Designing Software applications

With any touch screen application, the design can be crucial to the usability of the final product. Clear icons, bright contrasting colors, large buttons, button placement, and simple layouts will contribute greatly to the success of your touch screen installation.

Button Design and Position for touch screen applications

Design the button as large as possible. {note}The human finger is much lager then a mouse cursor. Therefor a button should be not smaller then 20mm x 20mm{note} • Design larger active border areas for buttons. For example, if the button graphic is 1 inch x 1 inch, the active touch area behind it could be 2 inches x 2 inches. {gliffy:name=Touch Butto Active Area|space=touchscreen|page=Designing software applications|pageid=2916915|align=center|size=L} • Keep buttons away from the edges and corners of the screen. If this is impossible, make sure the active touch areas extend to the outer edges of the viewing area. extended active touch areas Large buttons located near edges Large buttons on bottom with active areas extending to edges {gliffy:name=buttons on the edge of the screen|space=touchscreen|page=Designing software applications|pageid=2916915|align=center|size=L} • Place buttons horizontally whenever possible. One size does not fit all! Consider the varying heights of users and thus viewing angles when designing the application. • Turn off the cursor. Users may inadvertently try to drag the cursor to the correct location on the screen, emulating moving a mouse, instead of touching the button directly. {gliffy:name=Mouse Pointer|space=touchscreen|page=Designing software applications|pageid=2916915|align=center|size=L} • Design your applications to work with a single touch to activate rather than a double-touch.


Parallax, the effect of a target object appearing in different positions when looked at from different angles, is a common problem in many computer applications. The combination of the touch screen in front of the display and differing heights of users can cause parallax. When designing your touch system software application, use the following guidelines to help reduce the effects of parallax.

Design considerations for disabled people and the ageing population

Blind and Partially Sighted

As touchscreens do not provide tactile cues in order to activate a control, blind and partially sighted users rely on touchscreens that have the ability to provide audio clues for the location of the control. One such development in this field is the "Talking Fingertip Technique" (Vanderheiden, n.d.).

Patterned backgrounds or an image in the background reduces the legibility of the text. Flashing, scrolling or moving text also creates significant problems for people with low vision, as the reader's eyes have to move at the same time as focussing on the text.

Hearing impaired

Hearing impaired users cannot identify commands or controls that require hearing, so visual or tactile feedback when controls are touched would be recommended.

Physically impaired

A person who has lost an arm or a hand may be using a prosthetic device. This may result in insufficient control to be able to accurately point at and press buttons or keys. Also, the prosthesis may be made of metal, plastic or some other material with dialectric properties that are different from those of a human finger, therefore a touchscreen will have to be able to detect this other material in order to react to the user's inputs.

Cognitively impaired

For those with cognitive impairments, labels that are made to look like controls can cause confusion. If screen designs and controls are constantly reconfigured so the design is flexible, this can render them difficult to use for cognitively impaired people, meaning that they are not given a chance to learn where the controls lie and what their associations are.

Ageing population

Elderly people often experience changes in vision, hearing, dexterity and understanding as they age, therefore, they may encounter issues with identifying the location of controls on the touchscreen and being able to comfortably activate controls. Recommendations


The touchscreen should be shielded from sunlight The screen should be angled towards the horizontal to provide arm/wrist support The screen should be perpendicular to the line of sight The text and background colour combination should have high contrast Avoid shades of blue, green and violet for conveying information since they are problematic for older users There should be no noticeable flicker on the screen Structure the visual display layout so that the user can predict where to find required information and how to use it


According to Namahn (2000), touch sensitive areas or keys for users with no impairments, should be of a:

"minimal size: 22mm across" However, Colle & Hiszem (2004) recommend that:

a "key size no smaller than 20mm...should be used if sufficient space is available" Key size should be varied according to the size and use of the screen and the impairment type. For example, for one-handed thumb use of mobile handheld devices equipped with a touch-sensitive screen Parhi, Karlson and Bederson (2006) state that:

"target size of 9.2mm for discrete tasks and targets of 9.6mm for serial tasks should be sufficiently large...without degrading performance and preference" Graphical symbols (such as icons) should be accompanied by text There should be high contrast between touch areas, text and background colour Text or controls should not be placed over a background image or over a patterned background White or yellow type on black or a dark colour is more legible, provided that the typeface, weight and size are suitable Controls are labelled in a large high contrast font Audible output or tactile output is provided for identification of controls and for results of activating controls An inactive space of at least 1mm should be provided around each target (Colle & Hiszem, 2004) Labels should be easily distinguishable from controls Controls should be operable by a mouthstick, headstick or other similar device (stylus) Commands can be entered by voice For wheelchair users the height of the active areas on the screen should be between 800mm and 1200mm The system must be error tolerant by providing a clear unambiguous control that permits the user to go back a step Position controls on the screen in a way that is consistent with functions All labels and instructions should be in short and simple phrases or sentences. Avoid the use of abbreviations where possible Provide text versions of audio prompts that are synchronised with the audio so that the timing is the same Speech output of instructions, as an addition to (and not a replacement for), on-screen instructions, is recommended Adhere to existing colour conventions e.g. red for stop Help facilities

Guidance should be readily distinguishable from other displayed information Provide the user with specific information relative to the task context rather than a generic message Provide information on how to recover from errors Indicate permitted range of values or syntax for user response Ideally, multi-modal help should be provided Allow skilled users the option of switching off help prompts if they are not required Keep spoken messages short and simple Do not use abbreviations in audio messages Allow users to interrupt the help at any time and return to the task An intelligent help facility is not an adequate solution to a poor user interface


ISO 13406-1 (1999) Ergonomic requirements for work with visual displays based on flat panels. Part 1 - Introduction. ISO 13406-2 (2001) Ergonomic requirements for work with visual displays based on flat panels. Part 2 - Ergonomic requirements for flat panel displays. ISO 80416-4 (2005) Basic principles for graphical symbols for use on equipment. Part 4 - Guidelines for the adaptation of graphical symbols for use on screens and displays. ISO 9355-1 (1999) Ergonomic requirements for the design of displays and control actuators. Part 1: Human interactions with displays and control actuators. ISO 9355-2 (1999) Ergonomic requirements for the design of displays and control actuators. Part 2: Displays. ISO / IEC 24755 (2007) Information technology - Screen icons and symbols for peronal mobile communication devices. ITU-T E.902 (1995) Interactive services design guidelines.

Touch screens - the ergonomics A Namahn brief Advantages • The input device is also the output device • All valid inputs are displayed on screen • Fast command selection (compared to a mouse) Disadvantages • The user must sit within arm's reach of the display
• Possible arm fatigue • Difficult to select small items
• Possible retrofit problem (the touch screen must be fitted on the screen) Ergonomic aspects Relation between arm fatigue and touch screen inclination (from horizontal): • 22,5%: least fatiguing • 30%: best trade-off for precision and comfort • 90%: poorest inclination Elbow support reduced arm fatigue. Parallax Definition: Parallax occurs when the touch surface or detectors are separated from the targets and causes the user to touch slightly next to the target.
For scanning IR touch systems, parallax occurs because the invisible grid of IR beams can be interrupted before actual contact is made with the display. The amount of parallax depends on: • the type of integration (higher on IR screens)
• the display type (higher on curved screens).
• user position (lower when user sits directly in front of the target and places his finger perpendicular to the screen) Touch screens 1 Touch Resolution Definition: number of touch active points or the physical spacing between them Overview: Conductive screens Capacitive screens IR screens 1000 x 1000 to 4000 x 4000 256 x 256 25 x 40* * due to limitations on the number of light beams that can be placed around the screens. Acoustic screens have a resolution a little higher than the IR screens, but less than the other technologies. Not all applications need to have a high resolution (control panels, public access, computer-based training), but additional touch points: • allow greater pointing precision because the software can average all the points that have been touched.
• make it easier to map them to targets on the display. Touch screens with low resolution can lead to selection errors if touch points are not centered over the targets. Touch User Interface Target Locations Users tend to touch toward the sides of the screen and slightly below target, especially for targets near the top of the display and when the screen stands at a steep angle (45 to 90 degrees). These problems are probably due to parallax and a need to extend the arm further for the top targets. Number of Targets • As few as possible (in case of menus, more items can be put on the screen)
• How: nesting and prioritizing.
Target Size • Touch keys may be closely spaced provided the individual keys are adequately sized. • Minimal size: 22 millimeters across, surrounded with a dead zone, where touches are not recognized.
Touch Feedback Use highlighting or sounds to indicate a key has been successfully pressed

Touch screens 2 Touch Activation Mode • A typical button target has three states: normal, hovered over, and pressed.
• When the user presses a button and releases the screen, the button is activated. • When the user presses a button, but drags his finger away from it, it is not activated. Further reading Handbook of Human-Computer Interaction, M. Helander (ed.), Elsevier Science Publishers, 1988 HCI Library

Touch screens 3