Enhancing Remote HMI Mobile User Experience

HMI systems are increasingly being accessed remotely by mobile devices. With most modern PC-based and embedded HMIs, the HTML5 standard allows similar graphic screens to be displayed on a computer monitor, tablet or smartphone with little or no effort on the developer’s part. 

Creating graphics on a platform with HTML5 capability saves time. But what about user experience (UX), is it same on all devices? Smaller mobile devices can present a challenge when it comes to creating graphics, as smaller screen sizes often inhibit the simple reuse of HMI screen graphics. 

Standards Speed Graphics Development

The use of HTML standard in HMI software eliminated the need of maintaining separate apps as well as designing custom interfaces for each and every mobile device and platform. Screens developed using HMI software supporting the HTML5 standard can be accessed by any browser also supporting the standard, which is virtually every browser of the market. HTML5 simplifies the syntax and improves feature support. This reduces the reliance on external code, and therefore improves speed of remote access.

HTML5 also reduces the development time for HMI suppliers, freeing up resources and allowing them to implement customer-requested features in their product. It allows developers to keep the user experience and interface common, in look-and-feel as well as functionality. Whether graphics are run in a web browser or a runtime client, HTML5 allows them to look the same from one device to another.

Mobile Devices Use Cases

Although HTML provides ‘design once and display on multiple devices’ capability, one must not forget to optimize the remote mobile device user experience. Directly translating an HMI PC-based display to a smartphone screen can result in cluttered and often unintelligible graphics. Mobile devices are often used differently than PCs when viewing HMI screens, which affects many aspects of screen design.

Mobile devices access HMI systems remotely for:

• Checking overall system status
• Displaying and acknowledging alarms
• Remotely responding to events
• Viewing historical data
• Displaying analog variables such as speed, flow and level
• Adjusting set points
• Starting and stopping equipment
• Installation and setup of new equipment

Use Appropriate Graphics to Display Data

Viewing historical data in a table or trend can be useful via a mobile device. Comparing how a process ran in the past and understanding how to use historical data can dramatically improve performance and quality of the current product. By understanding what happened before and applying that model to current conditions, operators can catch subtle changes in vibration, tool wear, and other degradations in performance.

Displaying current variables and set points for levels, speeds and alarm limits are invaluable for remote users. If remote access is done correctly, it won’t take minutes or hours to check a tank level, line status, or buffer capacities - as this can be done in seconds. Having this information at the operator’s fingertips might be the single best use of a remote HMI.

Starting and stopping equipment should be taken very seriously. Pay attention to safety standards and company practices. Never use a remote HMI in emergency stop scenarios. Depending on the specific size and type of mobile device, data displays are used for different amounts of time and often for various operations, so there are advantages to optimizing the graphic screens differently for each device. For example, will a screen be used more often in portrait or landscape orientation? These and other questions should be answered before designing mobile device graphics.

Graphics Sized for Mobile Use

Everything that’s there for viewing on the main PC based HMI monitors should not necessarily be included for smartphones and tablets. Only the screens necessary for remote operator should be made available. It’s important to only show essential information on each screen, and resist the temptation to add more information as this can reduce clarity.

When it comes to screen development for an HMI, it’s best to optimize for any size when the screens are initially developed, as this saves the software developer from having to develop multiple screens to present information on different displays. If done correctly, a single screen can be resized and easily viewed on a 4-inch smartphone touch screen and on an 80 inch production monitor, and even on a video wall comprised of several HD monitors. Keep in mind during development that screens are expected to be scaled and zoomed into on mobile devices. Graphics should be vector-based to allow for scaling, as a graphic isn’t useful if it becomes too grainy to understand.

User interface design is part art, part science. Understand how the user will interact with the interface, and make sure data is clearly visible when it is needed and can be found with minimal effort or navigation. Larger fonts on smaller devices are often better. This is especially important to older users and for users with poor eyesight. Here are some key points to focus on while creating effective HMI graphics and data displays for mobile devices:

• Decide carefully which screens will be made available for remote access
• Offer data at a glance or summary view
• Limit amount of data per screen
• Reduce required navigation among screens
• Reduce details in graphics
• Use color appropriately
• Train the operator for mobile navigation

Less is More Sometimes

Eliminating unnecessary clutter from the mobile HMI display helps present all the important information in a clear and concise manner. Does a 3D shaded graphic with rotating blades help get the machine running if it has stopped? Probably not, so it’s a good idea to severely restrict the use of these types of animation, particularly for those screens intended for mobile access. A recent trend is to create screens that are mostly grayscale, while only using color or animation to indicate a problem. Some studies show that more than 10 percent of men are color blind, so changing an indicator from red to green may not be detected. A better way is to change from black to some color, and even better, to also put the state on the indicator using text. In many cases, the words, “On” and “Off” are much easier to understand than a color change.

Navigation on mobile devices can often be different than with a traditional PC-based HMI screen. Smartphones and tablets can often be automatically detected by the HMI. In this case, rather than displaying a menu that fills a large part of the screen, a “hamburger” icon (three parallel lines) can be used to represent the menu. Pressing this icon causes the menu to drop down for each access. This navigation method should be understood and the operator trained in its use. The operator should also be aware of menus that swipe in from the side, top or bottom and how they are easy to use and then collapse when not in use. Training operators in these and other remote device navigation methods will improve access, allowing quicker response to issues.

Reference

Feature Article: ‘Create a Better Remote HMI Mobile User Experience’ by Scott Kortier, Remote Site & Equipment Management magazine, Fall 2015.