Top 5 best practices for designing HMIs for mobile devices

When designing human-machine interfaces (HMIs) for mobile devices consider critical factors such as navigation, layout, and system controls.

By Joseph Zulick, MRO Electric and Supply June 12, 2018

Well-designed human-machine interfaces (HMIs) reduce operator error, save companies millions of dollars by reducing downtime, and increase worker safety. HTML5 programming enables transferring HMI designs to mobile devices, but programming is just the enabler. The following five best practices for HMI design are specific to mobile devices due to size and interface considerations to create an enhanced experience for mobile device users. 

1. Functional and user friendly

A well-designed HMI reduces user error from misunderstandings or not having all relevant information available when they need to make critical decisions. The key to designing a successful HMI on a mobile interface is building one that is functional and, at the same time, delights the user. Most users are going to be running either Apple’s iOS or Google’s Android. Design an interface to blend into the native platform that the user is comfortable with.

Make heavy use of the native unique interface (UI) features for each platform wherever possible. This will make life easier as the platforms evolve and the users update their operating systems, which will ultimately make users feel comfortable upon opening the application.

2. Navigation and layout

HMI users will need to be able to do two things: view content and navigate to content they want to find. On a large screen, an HMI best practice is to minimize the number of physical screens to simplify navigation. An example of a well-designed HMI on a large screen might looks like this: The content is well-organized and all of the summary information is immediately visible. Each of these views can be expanded further following a hierarchical navigation structure.

However, on a mobile device, having this amount of visual information on one screen would be difficult for a user to interpret. Instead, it’s important to prioritize user actions and the number of paths to reach the needed information, versus minimizing the number of screens. Start by presenting a system-level view which has the minimal level of information then provide navigation paths connecting different views for users to follow. At each view, content should fill the entire screen, while translucency and blurring can hint at more information. Avoid the use of bezels, gradients, and drop shadows as they introduce visual noise which takes the focus away from the content.

Navigation through the application should be intuitive and predictable. A good choice for a navigation pattern is a slide navigation drawer which displays many navigation targets at once, yet remains hidden until invoked by the user. This allows a user to use the entire screen for content while still maintaining a rich navigation model between parent, children, and sibling views. This navigation model also will allow a user to switch between unrelated views while maintaining the ability present a deep hierarchical structure. It will also help users learn about alternative views or features while building a mental model of how to interact with the system through the HMI. 

3. User actions

An HMI designer must consider the developer model and the user model when creating an HMI to interact with the system. On a mobile device, clearly present visual controls to the user and make interactions with controls clear. A general guideline is whenever the number of possible actions exceeds the number of controls, users may become confused or valuable features of the HMI may be obscured. For example, critical information shouldn’t be hidden behind a long press because the user may never find it. Instead, add an information button in the top corner of the screen as an overlay. This design will subtly guide the user to discover the information without being intrusive or vague. 

4. System controls

A number of control models have been developed for mobile interfaces to help minimize confusion for the user. Some common control models include:

  • Use a toggle button when something can only be on or off.
  • If the user can only select one option, but this option has a range of possible values such as screen brightness, use a slider.
  • If the user can only select one option with a range of values, but they need fine control, use a stepper button.
  • If a user needs to select one of many categorical values, the designer should use dropdowns or scroll wheels.
  • As a last resort, text entry can be used since that is the slowest and most error-prone way to interact with a mobile device.

Another option is to combine tactile feedback through a vibration or sound with any of these control functions, however tactile feedback should be used only to bring visibility to interactions where visual cues are not enough.

Controls should be designed to minimize the chance of any possible errors, or its effect once it is made. Maintain enough spacing for controls so users can easily access them without making unintended touches. Also, use fullscreen pop-ups to confirm actions that can have effects that are difficult to reverse.

Mobile devices gestures (see Table 1), are the ideal paradigm for users to interact with the HMI. Reusing common gestures will ensure your application behaves in a predictable manner. Some common gestures to consider are outlined in the Table 1. 

Mobile device gestures 

Table 1: Commonly used mobile gestures should be incorporated in an HMI design for mobile devices.

5. Design with scale in mind

Traditionally, HMIs have fixed screens and physical controls that can be designed with those features in mind. When creating an HMI for mobile devices, a common screen resolution is no longer guaranteed. As a result, UI elements (such as a button) appear physically larger on low-density screens and smaller on high-density screens. Because of this, it’s important to ensure that visuals, such as text, icons, and graphical images, are clear at every screen size users may have. To help create an HMI that can fit a variety of resolutions, follow the ratios in Table 2 so images, controls, and text will look the same when displayed across multiple screen sizes. 

Screen-size ratios for mobile device images, controls, text

Table 2: HMIs should be designed with various screen sizes and resolutions in mind to ensure the user has a clear display.

Following these best practices will help move an HMI to a smaller screen or mobile device and enhance a user’s overall experience. The basic rules of good design are still valid provide a good conceptual model and make things visible. However, certain unique challenges require design consideration such as only being able to show limited visual information and understanding the different user interaction paradigm mobile devices require.

Joseph Zulick is a writer and editor at MRO Electric and Supply. Edited by Emily Guenther, associate content manager, Control Engineering, CFE Media, eguenther@cfemedia.com.

MORE ANSWERS

KEYWORD: Human-machine interface (HMI)

How to design HMIs for mobile devices

Best practices to follow to enhance a user’s HMI experience on a mobile device.

Consider this

What are the challenges that need to be identified for your HMI design?