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.

By Helcker Goetz July 13, 2016

Usability 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. 

Accessibility

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.

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.

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.

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.

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).

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.

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.

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, jsmith@cfemedia.com.

MORE ADVICE

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

References

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 https://lessonslearned.faa.gov/ll_main.cfm?TabID=1&LLID=71&LLTypeID=0. 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 https://ghr.nlm.nih.gov/condition/color-vision-deficiency. 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 https://www.csb.gov/bp-america-refinery-explosion. Accessed in October 2014.

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