Layouts — Making HMIs User-Friendly

HMI development has a lot in common with graphic design. This means, there are a few rules that should be followed as closely as possible to ensure that the HMI is user-friendly. There is a difference between laying out an HMI and something akin to a website. I usually like to consider HMIs as the cousins to traditional user interfaces. Both types of interface have certain things in common, such as logical layout, efficient coloring, and so on.

Though these types of user interfaces are cousins to one another, an HMI will have a person staring at it much more often. As such, certain factors must be considered that would normally be ignored when developing something like a website. As such, certain rules should be followed when developing an HMI.

Due to operators using the HMI more frequently and in a much more high-paced and mission-critical environment, HMIs need to be easy to use, easy to look at, well organized, and provide just enough...

Technical requirements

Similar to the previous chapters, the only technical requirement you will need to follow along with is a working copy of CODESYS. This chapter will expand and modify the HMI from the last chapter; as such, you will want to pull down that HMI or review Chapter 11, or build one from scratch. You can pull down the code for this chapter at the following URL: https://github.com/PacktPublishing/Mastering-PLC-programming/tree/master/Chapter%2013.

The importance of colors

Believe it or not, colors can utterly sink an HMI. Colors are one of the most important aspects of an HMI in my opinion. Choosing the wrong colors for your HMI will literally hurt your operator’s eyes. A general, but not normally followed, rule is that you want to use dark, pastel colors for your HMI. This will reduce the contrast of the HMI screen and make it easier to operate. Generally, you want to avoid bright colors. Normally, HMI developers will opt for colors such as black or gray for backgrounds and different shades of gray for control colors. To start the color discussion, let’s look at backgrounds.

Backgrounds

In terms of backgrounds, I like to stick with shades of gray, depending on what I’m doing or if specified otherwise. However, some organizations I have worked for have primarily used black or shades of dark blue backgrounds and have used them to great success.

Black backgrounds are excellent; however, they do require...

Understanding grouping/position

Another key aspect of HMI design is grouping. Controls and readouts need to be logically grouped so the operator can easily control the machine and take necessary readings. When it comes to grouping, I have heard two schools of thought. The first one is to stack the controls vertically, as in Figure 13.5.

Figure 13.5 – Vertical stacking

With the controls laid out as they are in Figure 13.5, the operator scans the controls in a top-to-bottom motion. This configuration is known as side navigation. Normally the side navigation is on the left of the screen. Left navigation is considered more efficient and faster for the operator. The key to this layout is that each component gets equal weight. This means that, visually, the bottom switch is as important as the top switch.

Left-side layouts like these are common for things such as selecting submenus, homing different machine parts, and so on. This layout will free up...

Best practices for blinking

Nothing says hi-tech and advanced like blinking lights. Everyone loves blinking lights. However, much like many other features that we have seen, blinking can be as much a curse as it can be a blessing. When used properly, blinking can be used to indicate an emergency (such as an issue that could cause harm to personnel or property) or it could mean that a job is loaded and ready to go. In either case, blinking is distracting.

If you blink a component such as an LED, button, popup, or whatever, you need to be aware that this action will take the operator’s attention away from the controls and put their focus on the blinking component. For some things such as issues or emergencies, this is welcomed. However, blinking components for the sake of blinking components is bad. Generally, I will only blink a component under the following conditions:

• Machine malfunctions
• Safety-related issues (open door, safety sensor tripped, etc.)
• E-stop...

Organizing the screen into multiple layouts

One very common, but very poor, design decision in HMI development is to group multiple different screen responsibilities or way too much information on a single screen. There are many reasons why this is bad. Some reasons are as follows:

• Screen disorganization
• Cluttered appearance
• Poor usability
• Overloading the operator with irrelevant information

These are just a few reasons why screen organization is very important. However, one of the most important is overloading the operator with information. Generally, you only want to display the information that is relevant to the operator. If you include too much information, the operator can easily become confused or they can tune the information out and, ultimately, ignore important developments. One common way to combat this is to split an HMI application into multiple different screens.

Generally, screen organization can be determined with the one-sentence rule...

Final project – creating a user-friendly HMI

For our final project, we are going to expand and modify our HMI from the previous chapter to accommodate a home screen, a calibration screen, and a general health screen. As such, the first thing we are going to do is add the screens to the project. Therefore, we’re going to add calibration, home, health, and operator visualization to the project. All of the screens are going to be newly created, except for the operator screen, which is the HMI from the last chapter. With all that said, the first screen we are going to make is the home screen.

The home screen should be very simple and only serve as a navigation menu. With that in mind, the home screen is usually akin to a welcome page, with simple navigation and maybe pictures, such as company logos and so on. For this project, we are going to lay out the screen like the following:

Figure 13.25 – Home screen

This is a very minimal home...

Summary

This chapter was a crash course on HMI design practices. HMI design and development is a very important concept, as a bad HMI will sink a project very easily. Overall, by mastering the concepts such as screen navigation, blinking, colors, grouping, and so on, your HMIs will be easy to use and will allow your project to survive the test of time.

In this chapter, we have also explored error indications. Changing control colors and blinking is an excellent way to handle some issues. However, in automation engineering, we want to throw a true error in the event of an issue. Alarms are very closely tied in with HMI design; as such, our next chapter will be dedicated to exploring proper alarm usage and layouts.

Questions

Answer the following questions based on what you've learned in this chapter. Cross-check your answers with those provided at the end of the book, under Assessments.

1. What do the colors red, green, and yellow mean?
2. What color backgrounds should you primarily use?
3. How many responsibilities should each HMI screen have?
4. How do you set a default screen?
5. What should your default screen be?
6. Add a navigation bar on each screen so you can navigate to each screen from any of the screens.

Further reading

Have a look at the following resources to further your knowledge:

• Standard Colors on HMI: https://www.mesta-automation.com/standard-colors-on-hmi/
• Design Tips to Create a More effective HMI: https://blog.isa.org/design-tips-effective-industrial-machine-process-automation-hmi