--- title: "HMI Design Best Practices for Operators | Citia" description: "HMI design best practices: show abnormal states first, use colour only for meaning and build screens from overview to detail, following ISA-101 guidance." url: https://citia-engineering.com/en/knowledge/hmi-design language: en updated: 2026-11-13 type: article site: Citia Engineering Indonesia --- # HMI design that helps operators: layout, colour and alarms Good HMI screens make abnormal states stand out, use colour only for meaning and go from overview to detail. ISA-101 practice, alarm load and field notes. | Field | Value | | --- | --- | | Topic | Control systems | | Author | Tim Engineering Citia | | Updated | 2026-11-13 | Key takeaways A good HMI screen makes abnormal conditions stand out more than normal ones, uses colour only for specific meanings, and arranges information from overview to detail. An HMI (human machine interface) is the screen where an operator sees the process and gives commands. It can be a small panel on one machine or a set of operator stations on top of a SCADA system or a DCS. This guide is about the design of those screens: layout, colour, hierarchy and alarms, with notes from Citia projects. - A good HMI screen makes abnormal conditions stand out more than normal ones, uses colour only for specific meanings, and arranges information from overview to detail. - ISA-101.01-2015 is the ISA standard for human machine interfaces in process automation, and it treats the HMI as something designed, built and maintained over a lifecycle. - A display hierarchy moves from a plant overview to unit screens, equipment details and diagnostics, so operators find what they need in a few clicks. - Alarm load decides whether an operator can respond: ISA-18.2 guidance treats about 150 alarms per day as very likely acceptable and about 300 as the maximum manageable. ## What an HMI is for An HMI exists so that an operator notices a problem early and acts correctly. Everything on the screen should serve that purpose. In a PLC system, the HMI shows the machine state, accepts start and stop commands and displays faults. In SCADA or a DCS, operator stations add plant-wide overviews, trends, alarm lists and navigation across many units. The ISA-101 series, published by the International Society of Automation, covers how such interfaces are designed, deployed, operated and maintained, with improved situational awareness as one of its stated aims. Situational awareness means the operator knows what is happening, understands what it means and can predict what comes next. A screen packed with bright pump icons and live numbers can look impressive and still fail that test, because the one value that matters is lost among the rest. At a fuel terminal, HMIs appear at several levels: a panel on the loading gantry or pump skid, the SCADA stations in the control room, and sometimes a DCS. Each should follow the same style rules. Otherwise an operator who moves between them reads the same colour in two different ways, and a habit learned on one screen becomes a mistake on another. ## Older screens vs ISA-101-style screens Many plant screens were drawn to look like the equipment. Newer practice draws them to show the state of the process. The difference is easiest to see side by side. The table describes the two styles in general terms; it is not a copy of any client screen. None of this means old screens must be thrown away. The value of the comparison is in the questions it raises: does each colour on this screen mean something, and can a new operator find the one abnormal value without help? - Background: Black or bright colours | Neutral grey, low contrast - Colour: Red and green for running and stopped | Colour reserved for alarms and abnormal states - Equipment: 3D pumps and tanks, animated | Simple flat shapes - Values: Raw numbers everywhere | Trends and bars against normal ranges - Alarms: Flashing text across the screen | Priority shown by colour and shape - Navigation: Flat list of pages | Hierarchy from overview to detail ## A display hierarchy from overview to detail A display hierarchy is a planned set of screens, each with a clear job, arranged from the widest view to the narrowest. The operator starts at the top and drills down only when needed. The four-level structure on the right is the one most often used with ISA-101. Level 1 answers whether the whole area is normal. Level 2 is where most daily operation happens. Levels 3 and 4 hold detail and diagnostics that operators visit less often and maintenance staff visit more. The hierarchy also guides the work. Building Level 2 screens for every unit first, then adding detail, gives operators something usable early and avoids hundreds of pages nobody navigates. - Level 1: area overview: Key values and abnormal states for the whole area on one screen. - Level 2: unit control: Everything needed to run one unit, such as a pump station or loading area. - Level 3: equipment detail: One tank, pump or valve with faceplates and interlocks. - Level 4: diagnostics: Communication status, device health and support information. ## Colour with a meaning On a good HMI, colour is a signal, not decoration. If everything is colourful, nothing stands out. That is why modern screens use grey backgrounds and muted equipment, and keep strong colours for alarms. A running pump does not need to glow green, because running is the normal state; a pump that tripped needs to be noticed. Colour also should not be the only cue, since some operators have reduced colour vision and screens fade. Pair each alarm colour with a shape or a label. Text size and contrast matter as well. Values must be readable from the operator's normal seat, and low-contrast grey designs should be tested on the real monitors in the real room, because a screen that looks fine on an engineer's laptop can wash out on a control room display. Write the colour rules into an HMI style guide before drawing the first screen, and apply them to every vendor's package on site. The example on the right shows the kind of table such a guide contains. - Grey tones: Normal equipment and background (example) - Dark text: Live values in the normal range - Red (example): Highest alarm priority only - Yellow or orange (example): Lower alarm priority only - Outline or hatch: Out of service, bad data quality ## Alarms an operator can actually handle An alarm is a request for the operator to act. If the screen raises more requests than a person can handle, the important ones get missed. ISA-18.2-2016 is the ISA standard for managing alarm systems in the process industries. A Control Engineering article on implementing it, published by Yokogawa in 2013, gives the alarm rates from the standard as practical limits of human capability; the figures are shown below. Use them as a yardstick when reviewing an alarm list, not as a target to fill. The work that fixes an alarm list is called rationalisation. Each alarm is reviewed for its cause, its consequence, the operator action and its priority, and alarms that need no action are removed or turned into events. ISA-18.2 places this step inside an alarm management lifecycle, so the list stays clean after the project ends. False alarms are as harmful as too many real ones. At the Lomanis fuel terminal, Citia traced alarms one by one through the DCS alarm and event log after a power failure, separated genuine from false ones and corrected the alarm logic, because persistent false alarms can draw attention away from real process alarms. See the Lomanis alarm clean-up . - ~150 alarms per day: very likely acceptable ISA-18.2, via Control Engineering (2013) - ~300 alarms per day: maximum manageable ISA-18.2, via Control Engineering (2013) - ~6 alarms per hour on average: very likely acceptable ISA-18.2, via Control Engineering (2013) - ~12 alarms per hour on average: maximum manageable ISA-18.2, via Control Engineering (2013) ## Field notes from HMI and SCADA work Most HMI work at Indonesian sites is adding data to existing screens or fixing screens that no longer match the plant. The examples come from Citia project records. At Lomanis, the review also found DCS pages that were not updating and product tanks on the HMI that might differ from the real ones. Screens drift away from the plant when changes in the field are not carried back into the graphics. - At Eltech in Bekasi, busbar power, humidity and temperature data that could only be seen locally were brought into the central SCADA. Validating the Modbus register mapping was essential so the values on screen matched the devices. See the Eltech HMI integration . - At the Pertamina Bitung integrated terminal, an AVEVA InTouch HMI in the central control room now shows pump pressure and VSD status, so operators no longer walk to the field to check them. See the Bitung pump restoration . - At the Balongan effluent water treatment plant, PLC, HMI and SCADA integration went through loop checks, I/O tests, functional tests and a site acceptance test before handover. See the Balongan EWTP work . ## A checklist before signing off a screen A short checklist catches most HMI problems before operators meet them. Run it with an operator in the room, not only with the engineer who drew the screen. The items below are practical checks rather than clauses from a standard. They fit any package, from a local panel to a SCADA or DCS station. For how the HMI fits next to PLCs, DCS and SCADA, see PLC vs DCS vs SCADA vs HMI . Repeat the checklist after every significant change, such as new equipment, a protocol gateway or a SCADA upgrade. Screens rarely break at handover; they drift over the years that follow. - Abnormal stands out: Find the one tripped pump on the overview in seconds. - Values have context: Key values show their normal range or trend. - Colour follows the guide: No colour used without a defined meaning. - Bad data is visible: Lost communication shows as bad quality, not a frozen number. - Commands are confirmed: Each command button tested against real field feedback. - Navigation is short: Any unit screen reachable in a few clicks from the overview. ## Terms to know Check the screen against the plant, not the drawing: Before handover or after any field change, walk the plant with the HMI open and compare tank numbers, valve positions and pipe routes with what is installed. At Lomanis, product tanks on the HMI were found that might differ from the real ones, and the P&ID and PFD documents needed re-documentation. - HMI: Human machine interface: the screen where an operator sees the process and gives commands. - ISA-101: The ISA series of standards and technical reports on HMIs for process automation. - Display hierarchy: A planned set of screens arranged from overview to detail. - Faceplate: A small pop-up window for one device, with its status, values and command buttons. - Trend: A chart of a value over time, used to see direction rather than a single number. - Alarm flood: More alarms arriving than an operator can read and act on, usually during an upset. - Situational awareness: Knowing what is happening, what it means and what is likely to happen next. - Alarm priority: The ranking that tells an operator which alarm to handle first. ## Frequently asked questions Q: Why do modern HMI screens use so much grey? A: Modern HMI screens use grey so that colour can be saved for alarms and abnormal states. When the normal plant is calm and neutral, a tripped pump or a high level stands out at a glance. Q: How many alarms per operator is reasonable? A: ISA-18.2 guidance, as reported by Control Engineering, treats about 150 alarms per day as very likely acceptable and about 300 per day as the maximum manageable. Hourly, that is about 6 and 12 on average. Q: What is ISA-101? A: ISA-101 is the ISA series on human machine interfaces for process automation, built around the standard ISA-101.01-2015. It guides how HMIs are designed, deployed, operated and maintained over their lifecycle. Q: What is the difference between HMI and SCADA? A: An HMI is the screen, while SCADA is the system that collects data from many controllers and serves many screens. A SCADA operator station is an HMI, but a local HMI panel on one machine is not SCADA. Q: Can old HMI screens be improved gradually? A: Yes, start with an HMI style guide and the overview and unit screens operators use most, then convert detail screens over time. Changing everything at once risks confusing operators during an upset. Q: Should an HMI screen copy the P&ID? A: No, an HMI screen should show what the operator needs to run the process, not every pipe and instrument from the P&ID. Detail belongs on lower-level screens; the overview should highlight state and deviations. ## Sources and further reading 1. ISA-101 Series of Standards, International Society of Automation (ISA) (https://www.isa.org/standards-and-publications/isa-standards/isa-101-standards) 2. ISA-101.01-2015, Human Machine Interfaces for Process Automation Systems, International Society of Automation (ISA), 2015 (https://www.isa.org/products/ansi-isa-101-01-2015-human-machine-interfaces-for) 3. ISA-18.2-2016, Management of Alarm Systems for the Process Industries, International Society of Automation (ISA), 2016 (https://www.isa.org/products/ansi-isa-18-2-2016-management-of-alarm-systems-for) 4. Implementing Alarm Management per the ANSI/ISA-18.2 Standard (Control Engineering), Yokogawa / Control Engineering, 2013 (https://www.yokogawa.com/us/library/resources/media-publications/implementing-alarm-management-per-the-ansi-isa-182-standard-control-engineering/) 5. Eltech: HMI IP integration, PT Citia Engineering Indonesia (https://citia-engineering.com/en/projects/eltech-hmi-ip-integration) 6. ABB DCS programming at Lomanis fuel terminal, PT Citia Engineering Indonesia (https://citia-engineering.com/en/projects/abb-dcs-programming-at-lomanis-fuel-terminal) 7. Cover photo by Larry D. Moore, CC BY 4.0 (cropped and colour graded), Wikimedia Commons (https://commons.wikimedia.org/wiki/File:Engine_Control_Room_Harmony_of_the_Seas_2026.jpg) Want a second look at your operator screens?: Share with siTia which system and screens you use, and a Citia engineer will follow up. ## Contact - Company: PT Citia Engineering Indonesia - siTia - Virtual Assistance: [WhatsApp +62 813-2206-507](https://wa.me/628132206507). siTia answers questions about our products, projects and enquiries on WhatsApp. Replies are automated, and a person from the Citia team follows up. - Email: services@citiaengineering.com - Phone / WhatsApp (siTia): +62 813-2206-507 - Location: Bandung, Indonesia [Contact Citia](https://citia-engineering.com/en/contact.md) ## Structured data (JSON-LD) ```json { "@context": "https://schema.org", "@graph": [ { "@type": "Organization", "@id": "https://citia-engineering.com/#organization", "name": "Citia Engineering Indonesia", "legalName": "PT Citia Engineering Indonesia", "alternateName": "Citia", "url": "https://citia-engineering.com", "logo": { "@type": "ImageObject", "url": "https://citia-engineering.com/media/citia-logo.png", "width": 950, "height": 328 }, "description": "Citia is an engineering and system integration company in Bandung, Indonesia. We connect field devices, PLC and SCADA, terminal software and enterprise systems, then install, test and maintain them.", "email": "services@citiaengineering.com", "telephone": "+62 813-2206-507", "address": { "@type": "PostalAddress", "addressLocality": "Bandung", "addressRegion": "Jawa Barat", "addressCountry": "ID" }, "contactPoint": [ { "@type": "ContactPoint", "contactType": "customer service", "email": "services@citiaengineering.com", "telephone": "+62 813-2206-507", "url": "https://citia-engineering.com/en/contact" }, { "@type": "ContactPoint", "contactType": "customer support", "name": "siTia - Virtual Assistance", "telephone": "+62 813-2206-507", "url": "https://wa.me/628132206507", "areaServed": "ID", "availableLanguage": [ "id", "en" ] } ], "areaServed": { "@type": "Country", "name": "Indonesia" }, "knowsAbout": [ "Terminal automation system", "Automatic tank gauging", "Tank management system", "SCADA", "Programmable logic controller", "Modbus", "Field instrumentation", "Weighbridge", "Pipeline pressure monitoring", "Industrial IoT" ], "brand": [ { "@type": "Brand", "name": "INTEGRA" }, { "@type": "Brand", "name": "CATALYST" } ], "sameAs": [ "https://www.facebook.com/citiaengineering/", "https://www.instagram.com/citiaengineering/" ] }, { "@type": "WebSite", "@id": "https://citia-engineering.com/#website", "url": "https://citia-engineering.com", "name": "Citia Engineering Indonesia", "inLanguage": [ "en", "id" ], "publisher": { "@id": "https://citia-engineering.com/#organization" }, "potentialAction": [ { "@type": "SearchAction", "name": "Search Citia News", "target": { "@type": "EntryPoint", "urlTemplate": "https://citia-engineering.com/en/news?q={search_term_string}" }, "query-input": "required name=search_term_string" }, { "@type": "SearchAction", "name": "Cari di News Citia", "target": { "@type": "EntryPoint", "urlTemplate": "https://citia-engineering.com/id/news?q={search_term_string}" }, "query-input": "required name=search_term_string" } ] }, { "@type": "WebPage", "@id": "https://citia-engineering.com/en/knowledge/hmi-design#webpage", "url": "https://citia-engineering.com/en/knowledge/hmi-design", "name": "HMI design that helps operators: layout, colour and alarms", "description": "HMI design best practices: show abnormal states first, use colour only for meaning and build screens from overview to detail, following ISA-101 guidance.", "inLanguage": "en", "isPartOf": { "@id": "https://citia-engineering.com/#website" }, "publisher": { "@id": "https://citia-engineering.com/#organization" }, "about": { "@id": "https://citia-engineering.com/#organization" }, "breadcrumb": { "@id": "https://citia-engineering.com/en/knowledge/hmi-design#breadcrumb" }, "dateModified": "2026-11-13", "mainEntity": { "@id": "https://citia-engineering.com/en/knowledge/hmi-design#entity" } }, { "@type": "BreadcrumbList", "@id": "https://citia-engineering.com/en/knowledge/hmi-design#breadcrumb", "itemListElement": [ { "@type": "ListItem", "position": 1, "name": "Citia", "item": "https://citia-engineering.com/en" }, { "@type": "ListItem", "position": 2, "name": "Knowledge", "item": "https://citia-engineering.com/en/knowledge" }, { "@type": "ListItem", "position": 3, "name": "HMI design that helps operators: layout, colour and alarms", "item": "https://citia-engineering.com/en/knowledge/hmi-design" } ] }, { "@id": "https://citia-engineering.com/en/knowledge/hmi-design#entity", "url": "https://citia-engineering.com/en/knowledge/hmi-design", "mainEntityOfPage": { "@id": "https://citia-engineering.com/en/knowledge/hmi-design#webpage" }, "@type": "TechArticle", "headline": "HMI design that helps operators: layout, colour and alarms", "description": "Good HMI screens make abnormal states stand out, use colour only for meaning and go from overview to detail. ISA-101 practice, alarm load and field notes.", "dateModified": "2026-11-13", "author": { "@id": "https://citia-engineering.com/#organization" }, "publisher": { "@id": "https://citia-engineering.com/#organization" }, "inLanguage": "en", "articleSection": "Control systems", "datePublished": "2026-11-13", "image": "https://citia-engineering.com/media/covers/hmi-design.webp" }, { "@type": "FAQPage", "@id": "https://citia-engineering.com/en/knowledge/hmi-design#faq", "url": "https://citia-engineering.com/en/knowledge/hmi-design", "inLanguage": "en", "isPartOf": { "@id": "https://citia-engineering.com/en/knowledge/hmi-design#webpage" }, "mainEntity": [ { "@type": "Question", "name": "Why do modern HMI screens use so much grey?", "acceptedAnswer": { "@type": "Answer", "text": "Modern HMI screens use grey so that colour can be saved for alarms and abnormal states. When the normal plant is calm and neutral, a tripped pump or a high level stands out at a glance." } }, { "@type": "Question", "name": "How many alarms per operator is reasonable?", "acceptedAnswer": { "@type": "Answer", "text": "ISA-18.2 guidance, as reported by Control Engineering, treats about 150 alarms per day as very likely acceptable and about 300 per day as the maximum manageable. Hourly, that is about 6 and 12 on average." } }, { "@type": "Question", "name": "What is ISA-101?", "acceptedAnswer": { "@type": "Answer", "text": "ISA-101 is the ISA series on human machine interfaces for process automation, built around the standard ISA-101.01-2015. It guides how HMIs are designed, deployed, operated and maintained over their lifecycle." } }, { "@type": "Question", "name": "What is the difference between HMI and SCADA?", "acceptedAnswer": { "@type": "Answer", "text": "An HMI is the screen, while SCADA is the system that collects data from many controllers and serves many screens. A SCADA operator station is an HMI, but a local HMI panel on one machine is not SCADA." } }, { "@type": "Question", "name": "Can old HMI screens be improved gradually?", "acceptedAnswer": { "@type": "Answer", "text": "Yes, start with an HMI style guide and the overview and unit screens operators use most, then convert detail screens over time. Changing everything at once risks confusing operators during an upset." } }, { "@type": "Question", "name": "Should an HMI screen copy the P&ID?", "acceptedAnswer": { "@type": "Answer", "text": "No, an HMI screen should show what the operator needs to run the process, not every pipe and instrument from the P&ID. Detail belongs on lower-level screens; the overview should highlight state and deviations." } } ] }, { "@type": "DefinedTermSet", "@id": "https://citia-engineering.com/en/knowledge/hmi-design#glossary", "url": "https://citia-engineering.com/en/knowledge/hmi-design", "inLanguage": "en", "isPartOf": { "@id": "https://citia-engineering.com/en/knowledge/hmi-design#webpage" }, "name": "Terms to know", "hasDefinedTerm": [ { "@type": "DefinedTerm", "name": "HMI", "description": "Human machine interface: the screen where an operator sees the process and gives commands.", "inDefinedTermSet": { "@id": "https://citia-engineering.com/en/knowledge/hmi-design#glossary" } }, { "@type": "DefinedTerm", "name": "ISA-101", "description": "The ISA series of standards and technical reports on HMIs for process automation.", "inDefinedTermSet": { "@id": "https://citia-engineering.com/en/knowledge/hmi-design#glossary" } }, { "@type": "DefinedTerm", "name": "Display hierarchy", "description": "A planned set of screens arranged from overview to detail.", "inDefinedTermSet": { "@id": "https://citia-engineering.com/en/knowledge/hmi-design#glossary" } }, { "@type": "DefinedTerm", "name": "Faceplate", "description": "A small pop-up window for one device, with its status, values and command buttons.", "inDefinedTermSet": { "@id": "https://citia-engineering.com/en/knowledge/hmi-design#glossary" } }, { "@type": "DefinedTerm", "name": "Trend", "description": "A chart of a value over time, used to see direction rather than a single number.", "inDefinedTermSet": { "@id": "https://citia-engineering.com/en/knowledge/hmi-design#glossary" } }, { "@type": "DefinedTerm", "name": "Alarm flood", "description": "More alarms arriving than an operator can read and act on, usually during an upset.", "inDefinedTermSet": { "@id": "https://citia-engineering.com/en/knowledge/hmi-design#glossary" } }, { "@type": "DefinedTerm", "name": "Situational awareness", "description": "Knowing what is happening, what it means and what is likely to happen next.", "inDefinedTermSet": { "@id": "https://citia-engineering.com/en/knowledge/hmi-design#glossary" } }, { "@type": "DefinedTerm", "name": "Alarm priority", "description": "The ranking that tells an operator which alarm to handle first.", "inDefinedTermSet": { "@id": "https://citia-engineering.com/en/knowledge/hmi-design#glossary" } } ] } ] } ```