Touch Screen Usability Best Practices When Designing Automation User Interfaces (UI)

Posted on

PC application interfaces have been primarily developed and designed with input devices in mind that have been used in PCs for more than 20 years, such as the keyboard and mouse. But for the last few years, touchscreens have become very popular as input devices because of their intuitiveness.

Today’s advancing multitouch technology changes the rules of the game. The iPhone and iPad opened the way and now the multitouch technology is standard in the field of middle/high ranging telephony and is the driving force in launching a new category of ‘tablet’ devices, a forerunner in the field of notebooks.

The possibilities opened up by more natural and simple interaction (NUI, Natural User Interfaces) are numerous and should be fully exploited by new generation interfaces, including those used in industrial applications. Below is a series of helpful guidelines to make your touch screen interfaces simpler and more usable:

1. Use natural interactions

One of the biggest attributes of this new generation of interfaces is its ability to make interaction more natural, eliminating the need of input devices such as the mouse.

How? The on screen elements can be easily manipulated for immediate interaction using a series of spontaneous hand gestures.

2. Size interactive elements adequately

One of the first things that you notice when using a touch screen interface (and probably the most criticized) is the lack of precision our fingers have on the input device. This is also due to the fact that interfaces were (and still are) designed to work with the mouse cursor, which has 1-2 pixel precision that fingers do not have. Touch target sizes must be big enough to allow accurate interaction.

Exactly how big? An MIT study, “Human Fingertips to Investigate the Mechanics of Tactile Sense,” discovered that an average size fingertip measures 8-10 mm. This, then, should be the minimum size for each interactive element. The design should follow this simple equation: “+ important = + bigger” to make life easier for the user.

The interactive elements should then be appropriately spaced out: targets too close together increase the likelihood of error, where the user may press the wrong element unintentionally. Standard spacing between elements is 1-2 mms.

All these considerations are relative in one way or another to the Fitt law, which describes the time needed to reach a target, its size, and distance from the starting point using a mathematical formula.

3. Keep wandering hands in mind

One of the characteristics of NUI interfaces is the fact that the input device corresponds to the output device (the screen in both cases). This makes things easier but at the same time may create problems: hands covering important interface elements when they shouldn’t be.


The interface should therefore be designed keeping in mind these restrictions: positioning information so that it does not get covered by hands when needed. Avoid positioning labels underneath the interacting elements (as shown above) and instead position labels above the interacting elements.


4. Forget hovering and ToolTips

The touch screen interface design engineer must remember that ToolTips and Hovers are absolutely useless in touch screen systems. These tools are very handy when passing the mouse pointer over to an object or graphical element, which highlights upon contact or a ToolTip pop up appears.

In a touch screen system, however, these are useless because when the user touches the graphical element directly it activates without any roll-over effect. Therefore these tools should not be considered in graphical interface designs created exclusively for touchscreen systems. In a touch screen system it must be clear to the user what can be touched, manipulated, dragged, etc., and what cannot be touched without relying on the mouse to pass over it.

5. Optimize textual inputs

Even with the best graphical interface, users may often have to type numeric values and text strings with precision (i.e. set points, log-in and password), and the input from the keyboard onto the touchscreen interface should be placed where most efficient for the user. For example, when launching the iPad, Apple proposed a mini docking station for its new tablet product, equipped with the classical QWERTY keyboard.

In a touchscreen interface system, user interaction should be primarily by means of graphical objects and eliminate, as much as possible, the need to enter numbers and texts (i.e., cursors, sliders, spin, etc.). Requiring the user to type in information should be kept to a minimum. Obviously there are cases where this is not always possible (i.e. inserting user names and passwords), but in other cases this can be simplified or substituted with something else. When necessary, virtual numeric or alphanumeric keyboards can be used as long as they don’t cover or overlap vital information on the interface where they’re displayed.


by Scott Ludwig