Human Machine Interface (HMI) Mockup Designs

Designing smooth user experiences for your connected devices
May 26, 2023

A Human Machine Interface (HMI) is anything that has a visual or graphical display that gives users a possibility to interact with a certain device.

This can be using voice recognition to use Alexa or using specific triggers for complex machines.

We'll look at the importance of creating HMI mockups and the tools that you can use to do so.

What are HMI's?

Whether you decide to launch a smart bracelet, self-service kiosk, or medical laboratory equipment, you’ll want to make your product appealing, functionally rich, and convenient to use. To incorporate all these capabilities, your solution needs a high-performance UI, top-notch functionality (for both hardware and software), smooth human-to-machine interaction, and a mix of other things expected when developing a single HMI unit.

The global Human Machine Interface market is growing by leaps and bounds. According to forecasts, it will be worth $7.24 billion by 2025 (Compare: in 2019, it was valued at $3.71 billion).

Experts predict that the pharmaceutical industry, in particular, will see significant growth in automation, citing the current trend towards the use of high-precision contamination-free minimal human-interaction machines as a sign of things to come. In different countries, including the US, China, and India, the pharmaceutical sector is expected to witness a CAGT of around 150-200%, according to a recent market report. (Note: the base year is 2019 — before the COVID-19 outbreak).

Along with solutions for the pharmaceutical sector, HMI development is common across various industries, such as consumer electronics, robotics applications, transportation, and more. Advanced HMI examples can be found across many industries and solutions — wearables, payment terminals, security systems, cars and airline cockpits.

Why should you create HMI mockups?

1. Verify the design works as intended

This is usually the most important part of prototyping, ensuring that the developed HMI meets the requirements of the customer and controls the LCD display or touchscreen as intended. In prototyping, it is common to consult with your customer so they can provide functional feedback as well, and often it is possible to add, remove, or modify some of the less critical features or requirements of the product.

2. Ultimately save money by ensuring the performance is satisfactory for your customer

This is a big advantage that ties in to first advantage of prototyping. If the design team was not granted the award to develop a prototype, they may develop an HMI that functions to the customers requirements and can ship with confidence that it works to Epec’s standards. However, without a prototype and customer feedback, the product will not arrive for First Article Inspection with the customers recommendations. For example, do the buttons need to be larger because the operators must wear big bulky gloves and do those buttons require less force to press, etc. These issues can be addressed before reaching the quality department of the customer.

3. Discover which materials require a long-lead time

When we write up our bill of materials (BOM) to include the components used to build our product, it is uncommon to look up the lead time of each component, especially as some BOMs can be hundreds of components long.

Often times you can guess which products will have the longest lead time, such as an LCD display or a COM module, but sometimes it can be after the 12-week commitment to build and ship a product that it is discovered that the solid state relay has a 10-week lead time, leaving 2 weeks to complete the remainder of the build. When a prototype is built, all these components are ordered and any long-lead time parts are noticed immediately, ensuring that can be considered when committing to a deadline.

4. Determine complexities of assembly early-on

This is a big one. Often, an engineer will design the housings along with the user interface (UI) and circuit boards, and manufacturability is not accounted for because it is the last piece of the puzzle and fits just right. Prototyping really highlights these challenges early on because the engineer will get a good look at what they are asking the manufacturing team to build, and they will figure out whether a fixture or a jig is needed to make the UI assembly easier. The engineer can develop a set of work instructions during prototyping if they realize there is an easy or hard way to do something.

An basic and old HMI for a radar with buttons and knobs

How can you create HMI mockups?

In the age of smart technology, creating a seamless, intuitive Human-Machine Interface (HMI) is crucial for device functionality. Here are the steps to consider while designing an HMI:

  1. Understand Your User:

The first step to creating a powerful HMI is to understand your users, their needs, and their expectations. This includes defining the characteristics of your typical user, such as their technical proficiency, their physical abilities, and their interaction habits with similar devices.

  1. Define the Functionality:

Next, determine what your device needs to do. What functions should it perform? What information should it display? These answers will help you in the HMI design process. Remember to prioritize functionalities based on their importance and frequency of use.

  1. Sketch the Design:

Now that you have your user profile and device functionality in hand, start sketching your HMI design on paper. This low-fidelity prototype allows you to visualize the user journey and the overall structure of the interface. Experiment with different layouts and placements of buttons or touchpoints.

  1. Create a Digital Prototype:

Once you're happy with your paper sketches, translate them into a digital prototype. This can be done using a tool like Microsoft Power Point or Adobe Experience Design (Adobe XD). A digital prototype lets you see how your design looks in its intended medium and makes it easier to make modifications.

  1. Make it Interactive:

The next step is to transform your digital prototype into an interactive one. This allows you to simulate user interactions and verify if the flow and the structure of your HMI are intuitive and efficient. Again, Adobe XD is a great tool for this.

  1. Test and Refine:

Now that you have an interactive prototype, conduct user testing. Watch how people interact with your HMI and listen to their feedback. Look for any difficulties they face and any features they don't understand or fail to notice. Make revisions based on these insights and test again. Repeat this process until your HMI is intuitive, efficient, and user-friendly.

  1. Material Selection and Assembly Complexity:

Ensure to discover which materials require a long-lead time for their availability. Determine any complexities of assembly early-on during prototyping and figure out whether any specific fixtures or tools will be needed for manufacturing.

  1. Final Design and Production:

Once you have thoroughly tested and refined your design, finalize it for production. Make sure you have considered every detail, from screen resolution and color contrast to button size and tactile feedback.

Remember, designing an effective HMI involves a balance of aesthetic appeal, functionality, and user-friendly navigation. Keep the user at the center of your design process and iterate based on their feedback to create an HMI that meets their needs and expectations.

Tools:

Pen and paper

As mentioned above, prototypes differ greatly in their implementation. As the simplest form of the prototype, it is quite sufficient to put first thoughts on paper as a simple sketch. These sketches are perfectly suited as a basis for discussion for all further steps.

Microsoft Power Point

Yes - Power Point!!! The big advantage of this tool is that nearly every person has already worked with it and knows how to handle it. With Power Point it is therefore possible to create an interactive prototype within a few minutes. This is often enough to validate that the fundamental concept will work.

Adobe Experience Design (Adobe XD)

Adobe XD is a tool specifically designed for the design of digital interfaces. From design to the creation of interactive prototypes, all steps are covered. Recently, Adobe XD has also been introduced as a free, full-featured entry-level solution.

Prototyping a user interface is a very powerful tool to ensure, that the HMI design concept you are developing is exactly what the user will need for the final system. There should be no excuse not to spend the extra effort for that, because your end product will be much more better!

Ready to imagine with us?

Let's make it happen

Spill the beans about your problem, challenge, intuition... and we'll bring a solution to life at lightning speed.

co-found a CLIMATE VENTURE