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.

06/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. Courtesy: MRO Electric and Supply

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. Courtesy: MRO Electric and Supply

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?



Engineers' Choice Awards
The Engineers' Choice Awards highlight some of the best new control, instrumentation and automation products as chosen by Control Engineering subscribers.
System Integrator Giants
The System Integrator Giants program lists the top 100 system integrators among companies listed in CFE Media's Global System Integrator Database.
System Integrator of the Year
Each year, a panel of Control Engineering and Plant Engineering editors and industry expert judges select the System Integrator of the Year Award winners in three categories.
Design of Safe and Reliable Hydraulic Systems for Subsea Applications
This eGuide explains how the operation of hydraulic systems for subsea applications requires the user to consider additional aspects because of the unique conditions that apply to the setting
How to Maximize Factory Automation Efficiency with Low Cost Machine Vision
This eGuide illustrates solutions, applications and benefits of machine vision systems.
Wireless Reliability in Harsh Environments
Learn how to increase device reliability in harsh environments and decrease unplanned system downtime.
November 2018
Reliable wireless operations; PID tuning tips; Process control data quality; Cyber protection and integration
October 2018
HMI hardware evolution, Data acquisition strategies, Matching motors and drives, Machine vision advice
September 2018
Optimize controls via cloud software, ladder logic simulation, industrial wireless best practices
Edge Computing
This article collection contains several articles on how today's technologies heap benefits onto an edge-computing architecture such as faster computing, better networking, more memory, smarter analytics, cloud-based intelligence, and lower costs.
Data Center Design
Data centers, data closets, edge and cloud computing, co-location facilities, and similar topics are among the fastest-changing in the industry.
IIoT: Machines, Equipment, & Asset Management
Articles in this digital report highlight technologies that enable Industrial Internet of Things, IIoT-related products and strategies.
SIDB

Find and connect with the most suitable service provider for your unique application. Start searching the Global System Integrator Database Now!

October 2018
2018 Product of the Year; Subsurface data methodologies; Digital twins; Well lifecycle data
August 2018
SCADA standardization, capital expenditures, data-driven drilling and execution
June 2018
Machine learning, produced water benefits, progressive cavity pumps
John O. Ayuk, PE, CFSE, PMP, CAP
Automation Engineer; Wood Group
Doug Baker
System Integrator; Cross Integrated Systems Group
Jose S. Vasquez, Jr.
Jose S. Vasquez, Jr.
Fire & Life Safety Engineer; Technip USA Inc.
Data Centers: Impacts of Climate and Cooling Technology
This course focuses on climate analysis, appropriateness of cooling system selection, and combining cooling systems.
Safety First: Arc Flash 101
This course will help identify and reveal electrical hazards and identify the solutions to implementing and maintaining a safe work environment.
Critical Power: Hospital Electrical Systems
This course explains how maintaining power and communication systems through emergency power-generation systems is critical.
Engineers' Choice Awards
The Engineers' Choice Awards highlight some of the best new control, instrumentation and automation products as chosen by Control Engineering subscribers.
System Integrator Giants
The System Integrator Giants program lists the top 100 system integrators among companies listed in CFE Media's Global System Integrator Database.
System Integrator of the Year
Each year, a panel of Control Engineering and Plant Engineering editors and industry expert judges select the System Integrator of the Year Award winners in three categories.
Design of Safe and Reliable Hydraulic Systems for Subsea Applications
This eGuide explains how the operation of hydraulic systems for subsea applications requires the user to consider additional aspects because of the unique conditions that apply to the setting
How to Maximize Factory Automation Efficiency with Low Cost Machine Vision
This eGuide illustrates solutions, applications and benefits of machine vision systems.
Wireless Reliability in Harsh Environments
Learn how to increase device reliability in harsh environments and decrease unplanned system downtime.
November 2018
Reliable wireless operations; PID tuning tips; Process control data quality; Cyber protection and integration
October 2018
HMI hardware evolution, Data acquisition strategies, Matching motors and drives, Machine vision advice
September 2018
Optimize controls via cloud software, ladder logic simulation, industrial wireless best practices
Edge Computing
This article collection contains several articles on how today's technologies heap benefits onto an edge-computing architecture such as faster computing, better networking, more memory, smarter analytics, cloud-based intelligence, and lower costs.
Data Center Design
Data centers, data closets, edge and cloud computing, co-location facilities, and similar topics are among the fastest-changing in the industry.
IIoT: Machines, Equipment, & Asset Management
Articles in this digital report highlight technologies that enable Industrial Internet of Things, IIoT-related products and strategies.
SIDB

Find and connect with the most suitable service provider for your unique application. Start searching the Global System Integrator Database Now!

October 2018
2018 Product of the Year; Subsurface data methodologies; Digital twins; Well lifecycle data
August 2018
SCADA standardization, capital expenditures, data-driven drilling and execution
June 2018
Machine learning, produced water benefits, progressive cavity pumps
John O. Ayuk, PE, CFSE, PMP, CAP
Automation Engineer; Wood Group
Doug Baker
System Integrator; Cross Integrated Systems Group
Jose S. Vasquez, Jr.
Jose S. Vasquez, Jr.
Fire & Life Safety Engineer; Technip USA Inc.
Data Centers: Impacts of Climate and Cooling Technology
This course focuses on climate analysis, appropriateness of cooling system selection, and combining cooling systems.
Safety First: Arc Flash 101
This course will help identify and reveal electrical hazards and identify the solutions to implementing and maintaining a safe work environment.
Critical Power: Hospital Electrical Systems
This course explains how maintaining power and communication systems through emergency power-generation systems is critical.
Engineers' Choice Awards
The Engineers' Choice Awards highlight some of the best new control, instrumentation and automation products as chosen by Control Engineering subscribers.
System Integrator Giants
The System Integrator Giants program lists the top 100 system integrators among companies listed in CFE Media's Global System Integrator Database.
System Integrator of the Year
Each year, a panel of Control Engineering and Plant Engineering editors and industry expert judges select the System Integrator of the Year Award winners in three categories.
Design of Safe and Reliable Hydraulic Systems for Subsea Applications
This eGuide explains how the operation of hydraulic systems for subsea applications requires the user to consider additional aspects because of the unique conditions that apply to the setting
How to Maximize Factory Automation Efficiency with Low Cost Machine Vision
This eGuide illustrates solutions, applications and benefits of machine vision systems.
Wireless Reliability in Harsh Environments
Learn how to increase device reliability in harsh environments and decrease unplanned system downtime.
November 2018
Reliable wireless operations; PID tuning tips; Process control data quality; Cyber protection and integration
October 2018
HMI hardware evolution, Data acquisition strategies, Matching motors and drives, Machine vision advice
September 2018
Optimize controls via cloud software, ladder logic simulation, industrial wireless best practices
Edge Computing
This article collection contains several articles on how today's technologies heap benefits onto an edge-computing architecture such as faster computing, better networking, more memory, smarter analytics, cloud-based intelligence, and lower costs.
Data Center Design
Data centers, data closets, edge and cloud computing, co-location facilities, and similar topics are among the fastest-changing in the industry.
IIoT: Machines, Equipment, & Asset Management
Articles in this digital report highlight technologies that enable Industrial Internet of Things, IIoT-related products and strategies.
SIDB

Find and connect with the most suitable service provider for your unique application. Start searching the Global System Integrator Database Now!

October 2018
2018 Product of the Year; Subsurface data methodologies; Digital twins; Well lifecycle data
August 2018
SCADA standardization, capital expenditures, data-driven drilling and execution
June 2018
Machine learning, produced water benefits, progressive cavity pumps
John O. Ayuk, PE, CFSE, PMP, CAP
Automation Engineer; Wood Group
Doug Baker
System Integrator; Cross Integrated Systems Group
Jose S. Vasquez, Jr.
Jose S. Vasquez, Jr.
Fire & Life Safety Engineer; Technip USA Inc.
Data Centers: Impacts of Climate and Cooling Technology
This course focuses on climate analysis, appropriateness of cooling system selection, and combining cooling systems.
Safety First: Arc Flash 101
This course will help identify and reveal electrical hazards and identify the solutions to implementing and maintaining a safe work environment.
Critical Power: Hospital Electrical Systems
This course explains how maintaining power and communication systems through emergency power-generation systems is critical.
click me