When designing UX for human machine interfaces, the emphasis is on different visual items than that of typical website or app UX. If you’re designing a banking app you don’t really care about what other things might be distracting the user. The entire user experience is the software. They’re coming to make a bank transfer while they’re waiting on a latte.
For HMI development, the user experience is not the software. The machine is the user experience. Whether you’re hauling a load with a crane or swapping surf sides in wake boat, the graphical user interface is just a means to convey information and control the system. Our inputs and outputs take place in the physical world around us, not on the internet.
Where our banking app needs to grab the user's entire attention, an HMI user interface needs to aid in the overall experience and not distract from the task at hand.
This mindset has a led a good many engineer down a path of creating a utilitarian, but frankly, ugly user interface. You end up with black graphics on white backgrounds, simple bar gauges, and generally, an overload of monochrome text. Now that we are in a digital world of smooth animations, rounded rectangles, and gradients galore, the engineers interface is now a distraction. What would be your reaction if you got into a brand new luxury car and the speedometer was a digital gauge with comic sans and the indicators were clipart.
it works... but at what cost 🤮
What we must do in HMI UX design is strike the balance between aesthetics and ergonomics. Crappy graphics distract just as much as flashy graphics.
A few guiding principles:
- We’re trying to support a workflow that has inputs and outputs in the real world.
- We are not trying to distract from the real world.
- Our goal is to make aesthetically pleasing ergonomic designs.
- Crappy designs and dated graphics distract from the task at hand.
- Overly flashy designs distract
Sketches - Drawn on a whiteboard or a piece of paper. This is to gather the general idea. What do you want to be on the screen? What other physical HMI I/O are in the system like buttons, lights, and buzzers.
Wireframes - These are low fidelity, typically black and white, and may be digital or hand drawn. These are not intended to capture the style, quality, or look but are intended to visual capture what’s on screen, user workflow, and hierarchy between information.
”Mood” Board - Mood boards are used in creative fields to visually describe the emotions that you want someone to takeaway from your design. For our sake, this is just a collection of branding and styles guides, screenshots of other apps, and competitor systems with elements we want to bring into our design.
Mockups - Here is where a graphic designers takes the information needed identified in the sketches and wireframes and starts adding depth and color to the design based on the styles identified in the mood board. These do not have to cover every screen, but need to cover every graphical item.
Storyboards - Storyboards can be built from the wireframes or from mockups. These show the interactions between the different screens and give a roadmap for UX flow. This allows the customer, designer, and software developer to all be get on the same page.
The process bring all the stakeholders into the development of the user interface and puts the developers on the same page as the customer. It's a creative and technical process and when done right, new features are discovered and the end customer gets a highly usable and aesthetically pleasing user experience.