Since the earliest HMI and SCADA applications were designed and developed, the use of color and best practices surrounding color have come a long way. Larger companies and those at the forefront of design began to realize that the trend of directly translating P&ID diagrams peppered with live values, was an inefficient design. The use of gradients, animations and photo-realistic illustrations were simply too visually overpowering for today’s modern industrial applications.
So, what are the best practices surrounding the use of colors in today’s SCADA applications? Here are a few guidelines that should enable you to make better HMI design decisions for your industrial application.
Leverage Operators Color Biases
All users enter your application with their inherit biases, and this applies to their understanding of your design system’s color palette. You want to leverage these biases, instead of fighting against them. Forcing users to re-learn and map color systems outside of their norms is simply asking for issues. These color biases apply specifically to colors that relate to the many states your system may be in.
As the above graphic depicts, many commonly used colors have inherent meaning to the operators of your interface, even before you’ve created a style guide and defined the intended meaning of these colors. Colors have emotional meanings, and we’ve been trained to feel a certain way about each color. By leveraging these inherent biases, you save time and money through less training and operator error.
Color Biases
- Reds. Users read reds quickly when scanning an interface, it naturally draws our eye and attention. Additionally, it has a negative bias, usually informing the HMI operator of an error, alarm stats or other problem.
- Oranges & Yellows. Similar to reds, these grab attention quickly and are associated with warnings or alarm states. Usually negative in connotation, they’re commonly used in alarming color schemes.
- Greens. Greens signify a success state or completion of a task or goal. Greens are also used to promote other positive interactions within a UI, or finances.
- Blues. The history of the internet hyperlink has trained most users to know that a blue means something is clickable, or has affordance in a software application. It’s an inviting color, which calmly draws the operator’s attention and signifies forward movement, information and interaction within an interface.
- Neutrals. Finally, there are neutrals which include a large spectrum of grays, beige, white, black and more. Neutrals fade into the background, not demanding the user’s attentions. They typically represent layout, application structure, text and other data in an industrial interface. Neutrals can help to draw attention to the other colors of your interface by fading away. They are the background, allowing what’s important to become apparent through their visual excitement.
Use Color Sparingly
Using colors sparingly allows them to more powerfully communicate to your operators. When colors are present, they are meaningful and capture attention within an HMI interface design. It is important to eliminate the common overuse and misuse of color. One important principle is that color alone is not used as the sole discriminator of an important status condition. The same colors designated for alarms must not also be used for other trivial purposes, minimizing their significance.
In this example you can see how much more significance the warning alarm state UI has on this tank’s moving analog indicator. The only difference between the images is the usage of color, yet one is a much more design.
Use An Accessible Color Palette
Accessibility in design in an incredibly deep subject. That said, we can quickly touch on a few point to ensure your color palette for your industrial application design is accessible. Most importantly, you want an application’s design to account for color blindness and legibility via checking the contrast.
There are an estimated 285 million people in the world who are visually impaired. This number includes anyone from legally blind, to those with less than 20/20 vision. The WCAG 2.0 outlines how to help you achieve the accessibility standards, specifically with foreground and background color, within your application’s design. Failing scores can cause problems for the usability of your app.
Double-Encode Alarms With Color
While using color in an HMI is an incredibly effective and powerful design tool, we don’t won’t to solely rely on it for something so important as our alarms. Industrial application designs are notoriously data-dense, so relying on color only to convey meaning is never a good approach. With alarms, be sure to double-encode these notifications visually, whenever possible. What does that mean?
Visual double-encoding is simply using something + color to denote the alarm design system. This could be color + symbol, color + sound, color + position, etc. It’s just important that we double encode HMI alarms to ensure there are less costly errors. Alarms are commonly indicated by simply changing the color of a process value or its background, a poor practice. Alarm conditions should be shown by a redundantly coded (shape, color, text) element indicating the alarm’s presence and priority. A click on the alarm indicator can call up its rationalization information. Alarm colors are not used for non-alarm purposes.
Use Color Consistently
Similar to the idea of color biases explained above, your operators will eventually learn and memorize the color encodings used in your industrial application. This means that the system in now understood and second nature to them. At this point, you want to ensure that color is being used consistently throughout the application. If your system warnings are orange – don’t mix and match other colors for other warnings, like blue. Be distinct with color coding, so that color means one thing, and one thing only.
Finally, realize that bright colors are used to draw attention to abnormal situations, not show normal ones. For example, a gray background and muted colors minimize the visual weight of the majority of an interface. Then, when colors are present – they capture the operator’s attention. Colors signal states within an industrial automation process, properly signaling what information they have. Think long and hard about your HMI color palette and the proper uses of each color in advance of building out a control system.
Do you design industrial SCADA applications or HMI software? If you found this article helpful, consider purchasing our HMI Graphics Library. The master collection includes over 100 vector graphics depicting industrial machinery. They work well on your marketing materials, slide decks, or even within your industrial interfaces themselves.