Good HMI screen design keeps the display calm and grey in normal operation and uses colour only for abnormal conditions. Organise screens in four hierarchy levels, build every screen on one template with a fixed header, alarm line and navigation, show key values with units on moving analog indicators, and code every state with text or shape as well as colour.
- Grey when normal, colour when abnormal: alarm colours mean alarms and nothing else.
- Show values against their normal range, not as bare numbers.
- One template, one style guide, four hierarchy levels, three touches to any screen.
Why HMI Screen Design Matters
An HMI screen is the operator's window on the machine. On a normal shift it only needs to confirm that everything is fine; in an upset it must show, within seconds, what is wrong and where. Screens that look impressive in a demo, with 3D tanks, bright colours and animations everywhere, often fail at exactly that moment, because the abnormal condition looks like everything else on the screen.
Good design is not decoration. It decides how fast an operator notices a rising bearing temperature, whether a tripped motor is confused with a stopped one, and how many phone calls maintenance receives. The rules on this page apply equally to a 7-inch Comfort panel and to a SCADA workstation.
High-Performance HMI and the ISA-101 Standard
The high-performance HMI approach, and the ANSI/ISA-101.01 standard for human machine interfaces in process automation, start from one idea: an operator should be able to judge the state of the process at a glance. ISA-101 does not dictate one exact look; it asks every project to define a style guide, a display hierarchy and consistent rules for colour, text, navigation and alarms, and then to apply them everywhere. Alarm philosophy itself is covered by ISA-18.2 and EEMUA 191, which are discussed in SCADA alarm management.
| Topic | Conventional screen | High-performance screen |
|---|---|---|
| Background | Bright blue or black, saturated colours everywhere | Neutral light grey; the screen is calm when the plant is normal |
| Equipment | 3D pumps and tanks, photo-realistic piping | Flat 2D symbols, thin lines, grey tones |
| Running / stopped | Green = running, red = stopped | Dark fill + RUN text = running, outline + STOP = stopped; red stays reserved for alarms |
| Values | Number only, often without unit | Value with unit placed on a moving analog indicator showing the normal band and limits |
| Colour | Decoration and state | Reserved for abnormal conditions and alarm priorities only |
| Alarms | Flashing red everywhere, hard to rank | Colour + shape + priority number at the point of the problem, plus the alarm line |
| Navigation | Deep menus, pop-ups on pop-ups | Fixed navigation bar, hierarchy Levels 1 – 4, three touches to any screen |
Colour Rules: Grey When Normal, Colour When Abnormal
The most effective change you can make to an existing screen is to remove colour. When the background and all normal equipment are grey, the first saturated colour on the screen is, by definition, something that needs attention. Each alarm colour must have exactly one meaning across the whole project.
| Use | Colour | Rule |
|---|---|---|
| Screen background | #E9EEF3 | Same on every screen; never white, which glares on panels in bright halls |
| Panels, faceplates | #F8FAFC | Slightly lighter than the background to group content |
| Equipment normal / outline | #9CA3AF #475569 | Grey tones only; state is shown by fill and text, not hue |
| Equipment running | #334155 | Dark fill plus the text RUN |
| Header, navigation | #0D2B45 | Brand navy is fine for frames; keep brand orange off the process area so it is never read as an alarm |
| Alarm priority 1 | #DC2626 | Highest priority only, with marker number 1 |
| Alarm priority 2 | #EA580C | With marker number 2 |
| Alarm priority 3 | #EAB308 | Black text on yellow, marker number 3 |
| Information / maintenance | #0284C7 | Sparingly: manual mode, simulation, forced values |
Never let colour be the only signal. Roughly one in twelve men has some form of red-green colour-vision deficiency, and panels are often viewed at an angle or in sunlight. Every state therefore also needs text (RUN, STOP, TRIP), a shape (filled or outlined symbol) or a priority number. A quick test is to view the screen in greyscale: if a state disappears, it is coded by colour alone. The interactive demo below includes a colour-vision simulation for this purpose.
Display Hierarchy: Four Levels from Overview to Diagnostics
Organise screens by how much of the plant they show. Operators spend most of their time on Level 2 and drill down only when needed; maintenance works mainly on Level 4.
The Level 4 screens in this example already exist: the Alarm_Screen and Field_Status screens built step by step in the alarm lesson. A Level 2 screen for a sequence-driven machine is shown in the HMI sequence status screen.
Layout Grid and Screen Template
Consistency is what makes a screen fast to read: the title, the latest alarm, the clock and the navigation must always be in the same place. Put them in one screen template, and divide the remaining area into a process area and a context panel on a fixed grid.
- Process flows left to right and top to bottom, the way operators read; inputs on the left, products on the right.
- Context panel on the right for the selected device, the not-ready reason and command buttons, so commands are always in the same place.
- Touch targets at least about 40 × 40 px with 8 px between them; larger where gloves are worn. Keep destructive commands away from frequently used ones.
- White space is part of the design. A screen that is 60 % full reads faster than one that is 95 % full.
Text, Numbers and Units
| Element | Recommendation (7-inch, 800 × 480) |
|---|---|
| Screen title | 16 – 18 px bold, same position on every screen |
| Process values | 14 – 16 px, right-aligned, always with unit (bar, °C, A, m/s) |
| Labels | 12 – 13 px, sentence case; avoid long ALL-CAPS text |
| Decimals | Only as many as the measurement deserves: 6.1 bar, not 6.1274 bar |
| Abbreviations | One project list (MCCB, MPCB, LS, PT) used everywhere, including alarm texts |
| Numbers that change | Fixed width so values do not jump sideways as they update |
Moving Analog Indicators: Show Values Against Their Normal Range
A number alone forces the operator to remember what is normal. A moving analog indicator draws the scale, the normal operating band and the alarm limits, with a pointer at the current value. Several indicators side by side can be scanned in one glance: any pointer outside its light band is a problem, without reading a single digit.
In WinCC Comfort you can build one from a bar or rectangles plus a small triangle whose X position follows the tag through a movement animation, then save it as a faceplate so every indicator in the project behaves the same way. Trends belong on their own screens; see HMI trends and data logs.
Alarms and Operator Commands on Screens
- Latest alarm on every screen through a single-line alarm view in the template, and a full alarm screen one touch away. The configuration is in HMI alarm configuration in TIA Portal.
- Alarm markers at the point of the problem: a small priority box next to the device or value, using the same colours as the alarm classes.
- Commands on faceplates, not scattered over the process area: select the device, then press Start or Stop in the context panel. Ask for confirmation on critical actions and protect them with user rights.
- Explain refusals. If a start is refused, show why in words, as described in PLC interlocks and permissives. Buttons and lamps are covered in HMI buttons, lamps and auto/manual mode.
Applying These Rules in TIA Portal (WinCC Comfort)
- Screen template: header, single-line alarm view, date/time field and navigation bar live in one template that every screen uses.
- Faceplates and library types: build the motor symbol, valve symbol and moving analog indicator once as faceplates in the project library, so a style change is made in one place.
- Appearance animations and text lists: drive fill, outline and RUN/STOP/TRIP text from PLC status bits rather than drawing separate symbols per state.
- Alarm classes: set the class colours to the same priority colours used for on-screen markers.
- User administration: assign authorisations to command buttons and setpoint fields.
- Style guide in the project: keep the one-page guide with hex values next to the project so every engineer uses the same colours.
For the full toolchain, panel models and screen objects, see the Siemens HMI manual.
Interactive Demo: Conventional vs High-Performance HMI Screen
The same conveyor line, drawn two ways. Switch between the designs, inject an abnormal condition, and turn on the colour-vision simulation to see what a red-green colour-blind operator sees. Then take the challenge: press Find the problem, and click the device or value that has gone abnormal as fast as you can. Compare your times for both designs.
HMI Design Review Checklist
Use this list in a design review before commissioning, and again after the first week of operation when operators have given feedback.
| # | Design review check | Pass when |
|---|---|---|
| 1 | Background and equipment | No saturated colour on a screen where the plant is running normally |
| 2 | Colour meaning | Each alarm colour is used for exactly one meaning; brand colours are not used in the process area |
| 3 | Redundant coding | Every state is readable in greyscale: text, shape or fill as well as colour |
| 4 | Values | Every value has a unit, sensible decimals and, where it matters, a moving analog indicator |
| 5 | Hierarchy | Every screen belongs to Level 1 – 4 and is reachable in three touches or fewer |
| 6 | Template | Header, alarm line and navigation come from one screen template |
| 7 | Touch targets | Buttons at least about 40 × 40 px with 8 px spacing; bigger for gloved use |
| 8 | Critical commands | Start, stop, reset and setpoint changes on a faceplate with confirmation and user rights |
| 9 | Not-ready reason | A refused start always shows why, in words |
| 10 | Alarm display | Latest alarm visible on every screen; alarm markers at the point of the problem |
Hands-On Lab: Redesign a Conventional HMI Screen
Hands-on- TIA Portal with WinCC Comfort and a TP700 Comfort panel or simulation
- One existing machine screen with motors and at least three process values
- Estimated time: 60 minutes
Write a one-page style guide
Fix the background, equipment, alarm and information colours, fonts, units and abbreviations before drawing any screen.
Build the screen template
Create a 48 px header with title, single-line alarm view and clock, and a 48 px navigation bar on the 8 px grid.
Plan the hierarchy
List every screen as Level 1, 2, 3 or 4 and check that each is reachable in three touches or fewer.
Redraw equipment in grey
Replace 3D symbols with flat grey ones and show running and stopped with fill and RUN/STOP text.
Add moving analog indicators
For each key measurement draw the scale, normal band, limit marks and pointer, and show the value with its unit.
Review in greyscale and test
Run the design-review checklist, view the screen in greyscale and time how fast a colleague finds an injected abnormal condition.
The redesigned screen is calm and grey when the machine runs normally, every abnormal condition is visible by colour, shape and number at the point where it occurs, and an operator can say what the machine is doing in five seconds.
Frequently asked questions
What is a high-performance HMI?
A high-performance HMI is a screen design approach, reflected in the ISA-101 standard, that keeps the display calm and grey during normal operation and uses colour only for abnormal conditions, so operators detect problems faster and with fewer mistakes.
What does ISA-101 cover?
ANSI/ISA-101.01 is the standard for human machine interfaces in process automation. It covers the HMI lifecycle, a style guide, display hierarchy, consistent use of colour and text, navigation and alarm display, rather than prescribing one exact look.
Why should HMI screens not use green for running and red for stopped?
Red then means two things, stopped and alarm, so a real alarm hides among normal stopped equipment. Roughly one in twelve men also has a red-green colour-vision deficiency. Show running and stopped with fill and text, and keep red for alarms.
What background colour is best for an HMI?
A neutral light grey such as #E9EEF3. It avoids glare, keeps contrast for dark text and lets alarm colours stand out. Use the same background on every screen.
How many levels should an HMI screen hierarchy have?
Four is the common model: Level 1 overview, Level 2 unit control, Level 3 detail faceplates and Level 4 diagnostics. Every screen should be reachable in about three touches.
How big should buttons be on a 7-inch HMI panel?
As a practical rule, at least about 40 × 40 pixels on an 800 × 480 panel with 8 pixels between targets, and larger where operators wear gloves.
How do I apply these rules in TIA Portal?
Put the header, alarm line and navigation in one screen template, build equipment as faceplates in the project library, drive states with appearance animations and text lists, and keep a short project style guide with colours, fonts and sizes.