Top 5 best practices for designing HMI for mobile devices 为移动设备设计HMI的5大最佳实践

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

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 critical decisions are needed. 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 need to 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 needs 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 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 Table 1.

Mobile device gestures 移动设备手势

Tap 击打	One-finger press, lift 单指按下，抬起	Select选择
Swipe滑动	One-finger press, move, lift 单指按下，移动，抬起	Dismiss, scroll, etc.解散，滚动等
Long press 长按	One-finger press, wait, lift 单指按，等待，抬起	Select and element选择和元素
Pinch open 捏开	Two-finger, press, move outwards, lift 双指，按，向外移动，抬起	Zoom in放大
Pinch closed 捏闭	Two-finger press, move inwards, lift 双指按压，向内移动，抬起	Zoom out 缩小

Table 1: Commonly used mobile gestures should be incorporated in an HMI design for mobile devices. 表1：常用的移动手势应纳入移动设备的HMI设计中。

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.
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. 

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.

在为移动设备设计人机界面（HMI）时，请考虑导航，布局和系统控制等关键因素。

精心设计的人机界面（HMI）可减少操作员错误，通过减少停机时间为公司节省数百万美元，并提高工人的安全性。 HTML5编程可以将HMI设计转移到移动设备，但编程只是推动者。 HMI设计的以下五个最佳实践由于尺寸和尺寸而特定于移动设备
界面考虑因素，为移动设备用户创建增强体验。
1.功能齐全，用户友好
精心设计的HMI可以减少误解，或者在需要做出关键决策时无法获得所有相关信息。在移动界面上设计成功的HMI的关键是构建一个功能齐全的HMI，同时让用户满意。大多数用户将运行Apple的iOS或Google的Android。设计一个界面，融入用户熟悉的原生平台。
尽可能为每个平台大量使用本机独特界面（UI）功能。随着平台的发展和用户更新操作系统，这将使生活更轻松，最终使用户在打开应用程序时感到舒适。
2.导航和布局
HMI用户需要查看内容并导航到他们想要查找的内容。在大屏幕上，HMI最佳实践是最小化物理屏幕的数量以简化导航。在大屏幕上精心设计的HMI的示例可能如下所示：内容组织良好，所有摘要信息都立即可见。可以按照分层导航结构进一步扩展这些视图中的每一个。

然而，在移动设备上，在一个屏幕上具有这么大量的视觉信息对于用户来说将难以解释。相反，重要的是优先考虑用户操作和获得所需信息的路径数量，而不是最小化屏幕数量。首先提供具有最低信息级别的系统级视图，然后提供连接不同视图的导航路径供用户遵循。在每个视图中，内容应该填满整个屏幕，而半透明和模糊可以暗示更多信息。避免使用边框，渐变和阴影，因为它们会引入视觉噪音，使​​焦点远离内容。
通过应用程序导航应该是直观且可预测的。导航模式的一个很好的选择是滑动导航抽屉，它一次显示许多导航目标，但在用户调用之前一直保持隐藏状态。这允许用户在整个屏幕上使用内容，同时仍然在父视图，子视图和兄弟视图之间保持丰富的导航模型。该导航模型还允许用户在不相关的视图之间切换，同时保持能够呈现深层次结构的能力。它还将帮助用户了解替代视图或功能，同时构建如何通过HMI与系统交互的心理模型。
3.用户操作
在创建HMI以与系统交互时，HMI设计人员必须考虑开发人员模型和用户模型。在移动设备上，清楚地向用户呈现视觉控制并使控件的交互清晰。一般准则是，只要可能的操作数量超过控件数量，用户就可能会混淆，或者可能会模糊HMI的有价值的功能。

例如，关键信息不应隐藏在长按后面，因为用户可能永远不会找到它。而是在屏幕的上角添加一个信息按钮作为叠加层。该设计将巧妙地引导用户发现信息而不会产生干扰或模糊。
4.系统控制
已经为移动接口开发了许多控制模型，以帮助最小化用户的混淆。一些常见的控制模型包括：
•只能打开或关闭某些内容时使用切换按钮。
•如果用户只能选择一个选项，但此选项具有一系列可能的值，例如屏幕亮度，请使用滑块。
•如果用户只能选择一个具有一系列值的选项，但需要精确控制，请使用步进按钮。
•如果用户需要选择许多分类值中的一个，设计人员应使用下拉列表或滚轮。
•作为最后的手段，可以使用文本输入，因为这是与移动设备交互的最慢且最容易出错的方式。
另一种选择是通过振动或声音将触觉反馈与这些控制功能中的任何一种结合起来，但是，触觉反馈应仅用于为视觉线索不足的交互带来可见性。

控件的设计应尽量减少任何可能出现错误的可能性，或一旦产生错误的影响。为控件保持足够的间距，以便用户可以轻松访问它们而不会产生意外触摸。此外，使用全屏弹出窗口确认可能具有难以扭转的效果的操作。
移动设备手势是用户与HMI交互的理想范例。重复使用常见手势将确保您的应用程序以可预测的方式运行。表1列出了一些需要考虑的常见手势。

5.考虑到规模的设计
传统上，HMI具有固定屏幕和物理控制，可以根据这些功能进行设计。在为移动设备创建HMI时，不再保证常见的屏幕分辨率。因此，UI元素（例如按钮）在低密度屏幕上看起来更大，而在高密度屏幕上看起来更小。因此，确保用户可能拥有的每个屏幕尺寸都清晰地显示文本，图标和图形图像等视觉效果非常重要。为了帮助创建适合各种分辨率的HMI，请遵循表2中的比率，以便在多种屏幕尺寸上显示时，图像，控件和文本看起来相同。
遵循这些最佳实践将有助于将HMI移动到更小的屏幕或移动设备，并增强用户的整体体验。良好设计的基本规则仍然有效，提供了良好的概念模型并使事物可见。然而，某些独特的挑战需要设计考虑，例如仅能够显示有限的视觉信息并理解移动设备所需的不同用户交互范例。

移动设备图像，控件，文本的屏幕大小比率

表2：HMI应设计为具有各种屏幕尺寸和分辨率，以确保用户具有清晰的显示。