Best practices in control system HMI graphic development

In consideration of the scope of designing, migrating, or upgrading a control system, it is important to not overlook or underestimate the importance of HMI graphic development.

By Lindsey Clark, Cross Company October 8, 2015

Human-machine interface (HMI) graphics are the face of the control system—for the majority of users, this is the extent to which they see and interact with the system. Regardless of the quality of logic behind the scenes, an ineffective, confusing, or distracting set of graphics can hinder plant operation.

The following will outline some best practices in graphic development including organization, layout, color scheme, dynamics, and display of information.


It is important to start with updated P&IDs and accurate information. Building a set of graphics based on inaccurate or outdated process information will require re-work and/or lead to confusion if not resolved.

Visual logic

Second, one must consider the most logical way of representing their process through graphics. Typically, a process can be divided into several areas (try to limit this to between 4-12 areas)—these will be represented by less detailed overview graphics.

Overview graphics show a view of the interaction between all equipment in that area with only the most important information shown. From there, one must divide these areas into smaller sub-sections. These typically focus around a main piece of equipment or smaller sub-processes within that area and provide more detailed information on each device.

Arrows can be used on graphics to allow for easy, logical navigation to other parts of the process. To also aid in navigation, try to avoid creating more screens than are necessary—an operator wouldn’t want to have to navigate to a separate graphic that contains just a few readings on a tank. In graphic development, there’s a balance that should be achieved so that graphics are not too crowded, not too sparse, and not too numerous.

What colors represent “normal”?

When deciding upon a color scheme for the graphics, it is beneficial to consider more than just “what looks good”. Certain colors have been designated as alarm states or unexpected states in a process—red and yellow. Therefore, it is good practice to reserve these colors for abnormal states, not to be used to represent normal states in the process.

The use of grayscale in graphic development puts this method into effect by creating graphics that are mostly devoid of color unless a device is activated or an alarm or deviation is present. This prioritizes the attention of an operator and allows for timely responses when needed.

Animation is for movies

Don’t get carried away with dynamics and animations. The saying comes to mind “Just because you can, doesn’t mean you should.” Animations on graphics will catch an operator’s eye, so it is important to not allow this to become a distraction. Only essential information should be represented.

Ask if the operators really need to see material flow through pipes, fan rotation, flames flickering, conveyors moving… or should they focus on verifying on/off states and monitoring alarm conditions?

What should be displayed?

That brings up the fifth practice to keep in mind: how to best display information. Information should only be represented if it is important to the operator. This means limiting details shown on vessels and equipment. This also means thinking beyond just displaying analog values on a screen.

Display bars can be used to graphically provide information such as alarm limits and normal operating range, in addition to the current values. This allows operators to get a clear picture of the process by simply looking at the screen and identifying deviations. The operator can also embed trends inside vessels to allow for quick monitoring of historical data. Prioritizing the information that is displayed will help focus attention on where it is needed most.

The bottom line is that when designing the standards for the graphic development, one must remember the purpose of the HMI—to allow for the most timely and efficient monitoring of and response to the process. Keeping in mind these best practices during the design, upgrade, or migration of a set of HMI graphics can optimize the function of the HMI and, therefore, the process.

Lindsey Clark is a system integration engineer at Cross Company Integrated Systems. Cross Company Integrated Systems Group is a CFE Media content partner.

Cross Company is a CSIA member as of 10/3/2015