Optimising graphics for mobile devices

26 April 2017

Scott Kortier examines best practices for interfacing mobile devices to automation systems through PC-based and embedded HMIs to provide the required access controls, security and viewing experience.

With mobile devices increasingly being used to interface to industrial automation systems –  usually for monitoring but sometimes for remote control. The HTML5 standard found in many modern embedded and PC-based HMIs minimises the development work needed to publish graphic screens from an HMI to mobile devices such as laptops, smartphones and tablets. Although it is easy to publish graphics, the user experience may suffer depending on the type and size of the mobile device display.

The small screen size of a mobile device can cause problems if simply reusing graphics created for embedded or PC-based HMI graphic screens (See figure 1). 

Instead of simply making local HMI screens available to mobile devices via a remote desktop connection—possibly causing excessive compressing, panning and expanding—some HMI suppliers use the HTML5 standard and related tools to create mobile device screens. Most mobile devices support this standard, allowing them to provide browser-based access to plant floor automation systems through the HMI without custom code.

Using HMI software – such as InduSoft Web Studio runtime – mobile clients supporting the HTML5 standard are able to display HMI graphics. This enables existing mobile devices and platforms to be used because the runtime is not tied to a specific operating system platform. This could even eliminate the need for at least some of the HMIs on the plant floor– if a compatible mobile device is already owned by the user – helping to reduce the cost of installation.

When using HTML5 and a browser on a mobile device, the engineer and system integrator are also spared the frustration of downloading and maintaining separate apps for each platform. User impact, training and maintenance of such systems is reduced by conveying information and optional interaction via the HTML5 standard.

Security can be managed by the HMI application, the company’s IT department or both. This remotely managed authorisation makes mobile device authentication less of a security concern. If the mobile device uses a web browser supporting HTML5, it can become a thin client runtime to the HMI.

The HMI server on the plant floor is the gatekeeper, limiting mobile device client access to machine and process data. The client will not be able to run code on the HMI server, and can only access data present in the HMI application display.

Design tips
Depending on the specific size and type of mobile device, data displays are used for different amounts of time and for different purposes—so there are advantages to laying out the graphic screens differently for each device.

Things to consider to create effective graphic and data displays include:

Consider specific use of data at a device
Present critical data at a glance
Limit amount of data per screen
Reduce required navigation among screens
Reduce graphic details
Use colour properly
Display alarms clearly
Streamline event notification
Minimise data entry fields

Consider specific use of data at a device as mobile devices are likely to be used differently than the line supervisor’s PC when viewing HMI screens. A smartphone would provide a quick data check or alarm view. A laptop or tablet could allow users to drill down into the details via additional screens.

Critical data should be presented at a glance on the mobile device. It should take only seconds to view machine status, tank level or accumulator capacity, for example. Having important information quickly available to the operator is often the best use of a mobile device on the plant floor.

Limiting the amount of data per screen is also important. Too much data will overwhelm the operator. Some key process variables are important, but many others are not. Filtering data helps an operator see relevant machine or process data while eliminating non-critical information (Figure 2). Only essential information needs to be displayed on each screen.

Design of the user display is part art and part science. Making the data easily visible, such as by using larger fonts on small mobile devices, is helpful. Understanding user interaction and minimising navigation effort needed to get to the data are also important.

Limiting navigation 
Required navigation among screens should be minimised. Navigation on mobile HMI devices is more difficult than on larger HMI displays. Some HMIs can detect if a mobile device is being used and will automatically adjust the screen. When detected, the display menu seen on large screens changes to three parallel lines called a hamburger icon, representing the menu. When pressed, a drop down menu is displayed. 

Mobile device graphic details should be minimised to allow room for clear display of the most important information. For example, a rotating pump graphic is not needed, and animation in general should be minimised. 

Colour should be used properly. Grayscale works well, as does using colour or a flashing graphic to indicating a problem. Up to 10% of operators are color blind, so a red and green indicator may not be detected. Indicator text can be added to address this issue, such as displaying words like Off, On or Alarm. Changing symbols, for example from a circle to a triangle, is also helpful to make issues understood quickly.

Alarms should be clearly displayed using a consistent and well-developed alarm management system. This is critical if multiple maintenance staff or operators are remotely monitoring and acknowledging alarms. Alarms should be logged with comments to confirm that operators have acknowledged an alarm and that the necessary corrective action has been taken. A simple user interface should be provided for these tasks.

Streamlining event notification and logging captures machine and process events for easy review by mobile device users (Figure 3). When viewed remotely on mobile devices, events should keep the user current on machine status and system changes. 

Data entry keystrokes should be minimized by automating entry where possible, or by using drop-down lists from which selections can be made. Entering large amounts of data is difficult with mobile devices and should be avoided.

Selecting an HMI supporting the HTML5 standard is just the start when using mobile devices on the plant floor. Effective graphic screen design for use on these mobile device is also necessary for users to view, understand and act on important information.

Scott Kortier is InduSoft Web Studio senior technical sales at Wonderware by Schneider Electric. 

Contact Details and Archive...

Print this page | E-mail this page