When interacting with a touch screen, controls should be sized such that the user does not activate neighbouring controls unintentionally.
In this 30 second clip a signaller tries to enter his credentials using an on-screen keyboard. However, he does not notice that he misses the right keys several times, especially when typing the password. The controls were approximately 14 x 14 mm, i.e., well below the common recommendations.
Operators interact with user interface controls on a touch screen. To touch a control they have to position their arm, which may increase arm fatigue over time.
For designers there is a trade-off between the size of controls and available screen real estate. Users must be able to interact with controls without unintentionally activating other controls located nearby.
Previous studies have shown the relation between the size of controls and error rate and speed, respectively. Sears and Shneiderman (1989) report a significant increase in error rate and task duration with decreasing target size and evaluate the application of Fitts’ law for touch screens. They used a stabilisation algorithm to support selection of very small targets.
In a later study (Sears et al, 1992), they investigated typing on touch screen keyboards using the lift-off strategy as stabilisation algorithm. The results showed that larger controls significantly reduce error rates and time required to complete the typing tasks. They furthermore identified experience as a major influence on task time.
More recently, Schedlbauer (2007) compared track ball, touch, and stylus input and determined that spacing does not seem to have a significant effect on performance. The study determined stylus input as the most accurate with a recommended minimum size of controls of 12 mm.
Each control consists of three regions: The outermost region is the safety padding, which defines the distance to the next neighbouring control’s safety padding. The next zone is the sensitive area of the component, which actually responds to user interaction. The innermost region, the visible area of the control is the visible part of the component.
- The size of the control’s sensitive area shall be set according to what various HCI and safety standards recommend. The FAA Human Factors standard recommends a minimum size of 19 millimeters for user interface components.
- The visible area calculates from the size of the sensitive area minus the recommended spacing. For instance, the above mentioned FAA standard requires a minimum spacing between controls of 3 millimeters; i.e., the size of the component’s visible area would have to be 19 – 3 = 16 millimeters.
- The size of the safety padding again is calculated in the same fashion: The size of the sensitive area plus half the standard’s recommendation for spacing. For the FAA example, this is 19 + 3 = 22 millimeters.
To calculate the actual required size in pixels use the real size calculator. It calculates required minimum sizes for user interface controls and fonts according to various standards and for different screen resolutions.
Error prevention, speed, efficiency, user satisfaction
Size and, to a lesser extent, spacing between controls significantly reduces error rate and task duration. If screen real estate is at a premium, spacing between controls should be reduced before reducing control size. Stabilisation algorithms may further assist with the selection of small targets.
Martin Schedlbauer; Effects of Key Size and Spacing on the Completion Time and Accuracy of Input Tasks on Soft Keypads Using Trackball and Touch Input. Human Factors and Ergonomics Society Annual Meeting Proceedings, pp. 429-433(5), 2007.
Andrew Sears and Ben Shneiderman, High precision touch screens: design strategies and comparisons with a mouse. International Journal of Man-Machine Studies, Volume 34, Issue 4, April 1991, Pages 593-613.
Andrew Sears et al, Investigating touchscreen typing: the effect of keyboard size on typing speed. In Behaviour & Information Technology, Volume 12, Issue 1 January 1993, pages 17-22.Show all articles