Developing high-performance HMIs: Enhancing interface effectiveness

Inside Process: This two-part series examines the development of high-performance, human-machine interface (HMI) methodology. Part 1 covered HMI evolution, security, improving usability, and consistent use of color. Part 2 focuses on accuracy versus context, accessibility, visual hierarchy, animation versus static indication, and 2-D versus 3-D screens.


Figure 1: Use a digital representation when accuracy is more important than context. Conversely, use an analog representation when context is preferred. Courtesy: Elipse SoftwareUsability was strongly emphasized in "Part 1: Developing high-performance HMIs." The main purpose of a human-machine interface (HMI) is to allow users to interact with a process, alert operators when something is wrong in a plant, and notify them about what is important-while not drawing attention to irrelevant information.

The interface designer must balance accuracy and context and ensure that all information and alerts are accessible. Using differences in size, static versus dynamic indicators, and visual perspective can provide clarity, which enhances interface effectiveness. 

Accuracy versus context

Variables can be represented as analog or digital. When the accuracy of a value is more important than context, a digital representation is preferred. Alternatively, when context is more important than accuracy, an analog representation is preferred (see Figure 1).

For analog representations, it is recommended to use line lengths instead of areas to express quantity (see Figure 2). This is because our brains can better evaluate lengths rather than areas. 

Figure 2: Use length instead of area to represent analog values. Courtesy: Elipse Software


Usually, alarms are associated with levels of severity: high (1), medium (2), or low (3). In this case, using a specific indicator for each case is recommended (see Figure 3). Alarm indicators should be distinguished not only by their colors, but also by their shapes because some people have a condition that prevents them from differentiating certain colors. This deficiency is called "Daltonism," or color blindness.

Figure 3: In this diagram, alarms are associated with levels of severity: high (1), medium (2), and low (3). Using specific indicators—distinguished by color and shape—is recommended. Courtesy: Elipse Software

According to "Genetics Home Reference," as many as 8% of men and 0.5% of women with Northern European ancestry are unable to tell red from green. Other color combinations can present problems as well. However, in these cases, the percentage of affected people is less. Because of this situation, an interface must provide to people with this condition a means of differentiating every operative status safely. An effective way to test if an interface is accessible is by analyzing its screens, objects, and indicators as shades of gray.

In the next example, the first frame contains four displays. The top display does not present an alarm condition and is shown as white. The remaining three displays in the first frame are yellow, which represents an alarm condition (see Figure 4). The second frame repeats the first with shades of gray instead of color. It is obvious how difficult it is to differentiate between an alarm and a normal status.

Figure 4: The two frames on the left use color and grayscale to indicate an alarm condition making it difficult to distinguish between alarm and normal conditions. The two frames on the right have specific alarm indicators, which makes it easy to differen

In the third and fourth frames, specific alarm indicator shapes and numbers enable safe differentiation-even when using grayscale instead of color. Following the same strategy for alarm representations, devices must be represented in a way that people who are color blind differentiate among them. However, using no more than three colors for an object is recommended.

Avoid using a completely black or white color for screen backgrounds. In addition to lighter and darker shades, an intermediary shade allows more than two objects to be identified (see Figure 5). Another important issue is to not use colors to emphasize the status of objects. If a pump is energized and this is its normal status, there is no reason to catch an operator's attention with a bold color, such as red or green.

Figure 5: In addition to lighter and darker shades, an intermediary shade allows more than two objects to be identified. An icon near an object can provide the same information more efficiently than a wide range of colors. Courtesy: Elipse Software

If more statuses of an object are needed, such as leaving, in a transition, etc., the most convenient way is creating an additional indicator, such as an alarm. A simple icon near an object, such as a gear, arrow, or graphic of a device (pump, fan, etc.), can provide the same information more efficiently than a wide range of indicative colors for each status. 

Visual hierarchy

The goal of a visual hierarchy is to show relevance-what is more or less important to users-or elements with the same importance, indicating a possible relationship among them.

Figure 6: An object’s relative size can create a visual hierarchy on an interface—the larger the object, the higher the hierarchical level. Courtesy: Elipse Software

There are several ways to create a visual hierarchy on an interface. A simple way is through an object's size (see Figure 6). Objects with the same size indicate a similarity in their hierarchical positions. Larger objects, on the other hand, convey the concept of higher hierarchical levels.

Static versus dynamic indication

Motion is a powerful eye-catching feature often used as entertainment. Animating conveyor belts, rotor blades, liquid flows, among others, distracts operators from seeing something essential to seeing something that's less important.

Instead of using animations, such as a spinning turbine, to display a process status, use a static indicator that fits the purpose and application. Otherwise, the interface may look like an entertainment system, rather than a supervisory control and data acquisition (SCADA) system. A situation where an animation can be useful is a blinking indicator to alert operators to alarms that have not been acknowledged. 

Perspective versus clarity

The appearance of a "flat" surface represents information more clearly than one that shows perspective. Although a 3-D chart is more appealing, a 2-D chart more clearly indicates quantities (see Figure 7).

Figure 7: Although a 3-D chart is more appealing, a 2-D chart more clearly indicates quantities. Courtesy: Elipse Software

When drawing a screen or an object with a vanishing point (one-point perspective), objects become distorted to create the illusion of depth. This distortion violates the principles of visibility, clarity, and visual hierarchy because objects in the background tend to look smaller than the ones in the foreground-even if they have the same importance.

It is recommended to define an HMI screen's function first, then decide which representation is best. Actually, 3-D screens have limited spatial perception because 3-D is a deceptive effect: an image appears to have depth, but it is actually flat (see Figure 8). In addition, an overly realistic rendering brings too many colors and decorative details, which overloads the operator's cognitive system with unnecessary information.

Figure 8: Because 3-D is a deceptive effect, an image appears to have depth when it is actually flat. Define an HMI screen's function first, then decide which representation is best. Courtesy: Elipse Software

If a 3-D screen uses a one-point perspective, information rendering becomes even poorer because objects are deformed as they move closer to or farther from the vanishing point. This impairs both their visibility and readability, in addition to violating interface's visual hierarchy. Conversely, 3-D is aesthetically appealing, so it is used for demonstration screens where presentation is more important. Additionally, 3-D favors a general, rather than a specific, view. This is useful when it is desirable to create a navigation screen with a broader view of a plant or a very large area, such as a map, for example.

Based on the aforementioned clarity guidelines, groups of screens can be defined for the interface:

  • A set of 2-D screens to operate the process
  • A smaller set of 3-D screens for presentation purposes with a detailed view and no operative function
  • One or more 3-D screens for browsing, where operators need a general overview of a broader area. This can be a large general architecture or a map.

A way of mixing 3-D drawings with operative objects renders a fragmented scenario, with each drawing representing a part of that scenario (see Figure 9). Its colors are soft and do not compete with the colors of all other operational objects. However, they are integrated with these objects and with the whole representation of the process flow. In this case, the drawings were created using an axonometric projection (without a vanishing point) instead of a one-point projection (with vanishing points) to avoid distortions and to simplify their representation.

Figure 9: A way of mixing 3-D drawings with operative objects renders a fragmented scenario, with each drawing representing a part of that scenario. This drawing was created using an axonometric projection (without a vanishing point) instead of a one-poin

Although this solution is more complex, it can be a good alternative when a distinctive presentation is needed on certain operational screens without sacrificing the principles of this methodology. 

Helcker Goetz is an analyst and designer for Elipse Software, where he develops HMI user-improvement solutions, discovers new resources, and conducts research. He has worked for 22 years as a developer, graphic designer, and interface designer and has dedicated 13 years to the development of applications and interfaces for the industrial automation market. Edited by Jack Smith, content manager, CFE Media, Control Engineering,


Key concepts

  • Use digital representations to display accuracy; use analog to display context.
  • Use shapes and numbers to indicate device status or alarm conditions.
  • Create a visual hierarchy to show relevance.

Consider this

Are alarms going unnoticed in your plant?

ONLINE extra


Associação Brasileira de Normas Técnicas. NBR 9241: Requisitos Ergonômicos Para o Trabalho Com Dispositivos de Interação Visual: Parte 11: Orientações Sobre Usabilidade. Rio de Janeiro: ABNT, 2000.

Endsley, Mica R. "Toward a Theory of Situation Awareness in Dynamic Systems." Human Factors and Ergonomics Society. 32-64. March 1995.

Errington, Jamie, Tim DeMaere, and Eric Wade. Supporting Key Console Operator Interactions Through the Control System Interface. Atlanta: Human Centered Solutions; NOVA Chemicals Corporation, 2005.

Federal Aviation Administration. Indian Airlines Flight 605, Airbus A320-231, VT-EPN. Available at Accessed in October 2014.

Few, Stephen. Information Dashboard Design: The Effective Visual Communication of Data. 1. ed. Sebastopol: O'Reilly, 2006.

Genetics Home Reference. Color Vision Deficiency. Available at Accessed in October 2014.

Hollifield, Bill et al. The High Performance HMI Handbook. 1. ed. Houston: PAS, 2008.

Preece, Jennifer et al. Design de Interação: Além da Interação Homem-computador. 1. ed. Porto Alegre: Bookman, 2005.

U.S. Chemical Safety and Hazard Investigation Board. Investigation Report: BP Texas City, Texas. Mar/2007. Available at Accessed in October 2014.

Ware, Colin. Information Visualization: Perception for Design. 2. Ed. San Francisco: Elsevier, 2004.

No comments
The Engineers' Choice Awards highlight some of the best new control, instrumentation and automation products as chosen by...
The System Integrator Giants program lists the top 100 system integrators among companies listed in CFE Media's Global System Integrator Database.
The Engineering Leaders Under 40 program identifies and gives recognition to young engineers who...
This eGuide illustrates solutions, applications and benefits of machine vision systems.
Learn how to increase device reliability in harsh environments and decrease unplanned system downtime.
This eGuide contains a series of articles and videos that considers theoretical and practical; immediate needs and a look into the future.
Integrated mobility; Artificial intelligence; Predictive motion control; Sensors and control system inputs; Asset Management; Cybersecurity
Big Data and IIoT value; Monitoring Big Data; Robotics safety standards and programming; Learning about PID
Motor specification guidelines; Understanding multivariable control; Improving a safety instrumented system; 2017 Engineers' Choice Award Winners
This digital report will explore several aspects of how IIoT will transform manufacturing in the coming years.
Motion control advances and solutions can help with machine control, automated control on assembly lines, integration of robotics and automation, and machine safety.
This article collection contains several articles on the Industrial Internet of Things (IIoT) and how it is transforming manufacturing.

Find and connect with the most suitable service provider for your unique application. Start searching the Global System Integrator Database Now!

Mobility as the means to offshore innovation; Preventing another Deepwater Horizon; ROVs as subsea robots; SCADA and the radio spectrum
Future of oil and gas projects; Reservoir models; The importance of SCADA to oil and gas
Big Data and bigger solutions; Tablet technologies; SCADA developments
Automation Engineer; Wood Group
System Integrator; Cross Integrated Systems Group
Jose S. Vasquez, Jr.
Fire & Life Safety Engineer; Technip USA Inc.
click me