To enhance the user experience of HMIs on mobile devices, best design principles must be followed. A well-designed HMI can reduce operator error, save companies millions of dollars by minimizing downtime, and improve worker safety. The five best practices for HMI design below are specifically designed for mobile devices, taking into account size and interface requirements, and create a more enhanced experience for mobile users.
1. Powerful and user-friendly
Designing an effective Human-Machine Interface (HMI) helps reduce operator error and avoids misunderstandings or lack of access to all relevant information when critical decisions are needed. The key to a successful HMI design on mobile interfaces is to build a powerful yet user-friendly interface. Most users run Apple's iOS or Google's Android. The designed interface should integrate seamlessly into the native platform, providing a comfortable user experience.
Make the most of the unique interface (UI) features inherent on each platform. As the platform evolves and users update their operating systems, make the process simpler, ultimately making users feel comfortable opening the application.
2. Optimize navigation and layout
HMI users need to access content, and HMIs should provide them with navigation to find what they need. On a large screen, best practice for HMIs is to minimize the number of physical screens to simplify navigation. A successfully designed HMI example on a large screen might look like this: the content is well-organized, and all summary information is immediately visible. These screens can be further expanded using a hierarchical navigation structure.
However, displaying so much visual information on a single screen can be overwhelming for mobile devices. Instead, it's important to prioritize the number of paths a user can take to access the information they need, rather than minimizing the number of screens. Start with system-level views that provide the minimum level of information, then offer navigational paths connecting the different views. Within each view, content should fill the entire screen, while semi-transparency and blur can suggest more information. Avoid borders, gradients, and shadows, as these create visual noise and distract the user from the content.
Navigation within an application should be intuitive and predictable. A good option for navigation patterns is a sliding navigation drawer that can display multiple navigation targets at once and remain hidden unless invoked by the user.
This allows users to utilize the entire screen's content while also enjoying rich navigation capabilities, including the ability to switch between parent, child, and sibling views. This navigation mode also allows users to switch between unrelated views while preserving the ability to present a deep hierarchical structure. It also helps users understand alternating views or features, and build a mental model of how to interact with the system through the HMI.
3. Fully consider user behavior
When creating an HMI to interact with a system, HMI designers must consider both the developer model and the user model. On mobile devices, visual controls should be clearly presented to the user, and the interactions of the controls should be straightforward. A general guideline is that if the number of possible actions exceeds the number of controls, the user may become confused or the valuable functionality of the HMI may become obscured.
For example, key information shouldn't be found through a long series of keystrokes, as users might never find it. Consider adding an information button as an overlay in the top corner of the screen. This design subtly guides users to discover the information without being distracted or confused.
4. Control design suitable for mobile devices
To help reduce user confusion, many control models have been developed for mobile interfaces. Some common control models include:
For situations where there are only two states, on and off, use the on/off button.
If a user can only select one option, but that option has a possible value range, such as screen brightness, then a slider should be used.
If the user can only select one option with a range of values but needs precise control, use the step button.
If users need to select one of many category values, designers should use drop-down menus and scroll wheels.
As a last resort, text input can be used, but that's the slowest and most error-prone way to interact with mobile devices.
Another option is to combine haptic feedback with any such control function through vibration or sound; however, haptic feedback should only be used when visual cues are insufficient, to bring visual interactivity.
When designing controls, you should minimize any possibility of errors or the consequences if errors occur. Leave sufficient spacing for controls so users can easily access them without accidental touches. Additionally, use full-screen pop-up menus to confirm actions that would be difficult to undo.
Gestures on mobile devices are the ideal example of user interaction with the HMI. Repeated use of common gestures ensures that your application's behavior is predictable. Table 1 lists some common gestures.
Table 1: Commonly used gestures on mobile devices should be included in the HMI designed for mobile devices.
5. Remember that the design specifications should be adjustable.
Traditionally, HMIs have fixed screen and physical control requirements, which can be remembered during the design phase. However, when creating an HMI for mobile devices, a common screen resolution cannot be used. This is because UI elements (such as a button) appear larger on low-density screens and smaller on high-density screens. Therefore, it's crucial to ensure that visual elements such as text, icons, and graphics are clearly displayed on the various sizes of mobile device screens used by users. To help create an HMI that adapts to various resolutions, design according to the proportions in Table 2, so that the screen, controls, and text look the same when displayed on different screen sizes.
Table 2: When designing an HMI, remember to use different screen sizes and resolutions to ensure that users can have a clear display.
Following these best practices will help move HMIs to smaller screens or mobile devices and improve the overall user experience. The fundamental rules of good design remain valid, providing a good conceptual model. However, some unique challenges still need to be considered in the design, such as being able to display only limited visual information and understanding the different user interaction paradigms required for mobile devices.
Disclaimer: This article is a reprint. If it involves copyright issues, please contact us promptly for deletion (QQ: 2737591964 ) . We apologize for any inconvenience.
