Manufacturing and Production: Meet UX

As most college graduates in 2009 will attest, the economy was not very strong and it was a daunting job market to enter into. Through a connection I was happy to find work at a small solar start-up company. The role was not a UX position, it was more like an end-user position and my job was to wear as many hats as possible on the manufacturing floor. This included setting up and operating a brand new 1/2 million dollar solar laminator direct from Japan. The shipping container alone was large enough to live in and it was accompanied by several jumbo size crates needed to assemble the control panel for the laminator. This was my first experience with a Human Machine Interface, or “HMI” as they would say in the manufacturing world.


The combination of touch screen controls and colorful analog buttons had my mind spinning, and the Japanese team in charge of setting up the machine and training required a translator. Aside from being lost in translation, the other thought looming over my head was the danger factor. This machine had a number of large mechanical moving parts including a 2 ton hydraulic lid compressing solar laminates on a hot plate at over 300 degrees, and at some point I had to hand the machine over to an entry-level operator. Nonetheless, we did eventually tame this complex machine and successfully integrate it into our production line, but not without a few weeks of frustration and experimentation. In hindsight, I can’t help but think that learning and operating this machine could have been easier.

As a UX Architect, my job is to make complex technology and systems easy to use by understanding user behaviors and applying appropriate interaction design and information architecture principles. Which got me wondering why the user experience design trend has yet to take hold in the HMI world. Google image search “HMI screen” and you’ll likely receive a grid of interface examples similar to the collage below.


Lots of red, green, yellow, blue and gray buttons along side machine graphics and small text. I’m not colorblind and nor have I needed glasses to date (knocking on wood), but imagine a poor operator who is!

So what user experience and information design principles can we apply to HMI design? Let’s take a look back at that solar laminator.

What could be improved

1. Information should be relevant and easy to digest

A main screen should not contain information that is irrelevant for daily use. For instance, the “Language” selector and “Select Mode” options were low traffic buttons and should be relocated to the settings tab to reduce chaos on the main menu. Real-time information should also be simple and easily digest. For example “Laminating Conditions” displayed real-time information of all the temperature points. To simplify things, this block of information could be combined and displayed as an average number or relocated to a more relevant tab in the navigation.

2. Buttons and titles should be easily recognizable

An operator should not have to remember or wonder what a button or title represents – it should be self-explanatory. For example, selecting the “Monitor” tab displayed an info graphic of the machine and the current active and inactive parts. For lack of better words this tab could have been relabeled “View Machine Status.”

3. Clear visibility of system status

There should always be a clear indication of the current status of the machine to inform the operator what’s going on whether it’s good or bad. In this case, “Machine Status” only displayed error indicators and was missing any sort of visual message to inform the operator of the current status such as “Cycle in progress” or “Machine Idle.”

4. Leverage font variation

Like your favorite brownie recipe, machines also have recipes to cook the perfect product. Once that recipe is dialed in it’s important to clearly display that info to reassure the operator is in fact applying the correct recipe during production. On this HMI, the recipe info should have been displayed with a larger font to be more visible and focus the operator’s attention during production.


5. Error prevention

Ideally you want to eliminate any error prone conditions an interface might present, especially in manufacturing. If you notice at the top of the screen there’s a navigation tab labeled “Manual”. While the machine was in “auto” mode an operator was able to select this tab and adjust the process by manually opening the lid, turning off the vacuum pump or adjusting the heating elements. Working in parallel with process engineers you quickly understand the importance of consistency. This tab should have required a secure login or a warning message before an operator commits to making any adjustments.

Has HMI design improved?

Below is an image example of a new HMI design introduced on Weber’s latest slicing machines. Let’s have a look at the details to understand where this interface wins.

Weber HMI

“Thanks to the Weber Power Control’s ergonomic and coherent interface design, handling a machine is quick and easy to learn.”


Screen is easy to scan

One clear difference between this screen and the previous screen examples is the conscious reduction of content despite the amount of real estate – 18.5 inches. The reduced content coupled with an increase of white space and font variation allows the curated information to pop out. In this case your eye is initially drawn to the main info graphic in the center of the screen which could be evaluated at a glance or from a distance.

Improved global navigation

Sometimes it’s more important to bubble up the content that matters, or consider breaking up the content into multiple screens to reduce the chaos. If you notice, located around the perimeter of the screen the interface applies navigational elements to access lower priority information and controls on sub-screens. Selecting or swiping can access these features similar to how we may navigate a tablet or smart phone device.



Digital and physical working in tandem

Improving the user experience for an operator is also about harmonizing the digital screen with the physical product. If you notice the HMI is suspended and rotatable, which is a great addition. It provides the operator with the ability to customize a good line of site to the monitor allowing them to view real-time process information while in awkward locations.

Visual consistency and thoughtful color application

Having a systematic approach to color and buttons styles is also a detail that was considered in Weber’s HMI display. When finalizing an online or mobile application, a design team will often deliver a development package to guide engineers on styling specific buttons, text, and diagrams. This will ensure consistency throughout the application and reduce the learning curve for first time users. It’s also important to observe the reserved use of specific colors, if you notice the largest object in red is the emergency stop button.

Let UX help you.

A solid UX team will work in parallel with end-users such as engineers and operators to create a simplified and more intuitive HMI that will no doubt reflect in operation reliability, reduced faults and higher output. You’re creating a better relationship between operator and machine, which could boost the overall moral of your workforce and present a better impression to potential customers.

Pete Wisber

User Experience Architect


  • Perspectives

Pete Wisber

User Experience Architect


  • Perspectives

Next Note

Redesigned Product Configuration Tool launches!

Working closely with a small, passionate client team and their development vendor, Spark led the redesign and re-architecture of Xylect, a product configuration and analysis tool for engineers and sales representatives in the industrial pump market.