Touch interactions are becoming ubiquitous – at home, at work, and at play – for everything from espresso machines to parking meters to medical devices. That means design choices around touch screen displays become all the more critical.
So how can a design team make sure that a product’s physical layout doesn’t compromise the seamless usability that is a touch screen’s birthright? It’s all about position. Position a touch screen correctly, and using it (with your stellar UI) will be the most natural thing in the world. Position it wrong, and users will struggle to see, select from, and stay with your interface.
This paper identifies the key position variables, discusses their effect on usability, provides some working assumptions to help define design requirements, and finally offers a guide to selecting between a fixed or adjustable touch screen setup.
Most modern sourced displays specify a viewing angle, beyond which viewing is compromised due to reduced contrast ratio. However, just because a given display has a wide viewing angle does not mean that at its maximum angle, text and graphics would be legible.
When sourcing a display, consider the specified viewing angle – and understand its impact in your specific application.
A typical display specification might look like this:
Angle of viewing order is as follows: Left/Right/Up/Down
(Manufacturers may vary this, so review specs carefully.)
The diagram below shows the viewable angle range (to sides, and up and down) of the screen example above. Within these angles, the contrast ratio does not drop below 10.
Contrast ratio is defined as:
Working Assumption: Display Viewing Angle
This specification is a very wide angle of view, and does not address legibility. Based on the viewable angle of modern displays, it is safe to assume that these angles will not be the restricting item in determining an optimal touch screen location and angle.
The screen viewing angle can have a dramatic impact on the legibility of text and graphics.
As information is angled further from the optimal view of perpendicular (normal) to the user’s eye, information becomes more and more distorted and therefore more difficult to decipher.
Other Legibility Variables
In addition to the viewing angle there are other variables that can affect the readability of on-screen information:
- Lighting (daylight, artificial, size of the source, etc.)
- Anti-glare and anti-reflective coatings on displays
- Color contrast in screen graphics
- Brightness levels chosen for the display
Working Assumption: Text Legibility
Due to distortion that occurs as a result of viewing the display at an off angle, we assume users should be able to interact with the touch screen at a maximum of 30° from their natural viewing angle. The lesser this angle can be in practice, the better the legibility. The selected angle should be checked in a physical mockup at the intended desired angle with some typical UI screen shots to evaluate readability. Complex charts and graphs may require a shallower angle, but bold simple number displays may tolerate a greater angle.
In the two images below you can see it as normal angle and at 30° (considered approximate limit of allowable perspective distortion)
Parallax is an apparent displacement or difference in position of an object viewed along two different lines of sight. It is measured by the angle (or semi-angle) of inclination between those two lines.
With a touch screen, this becomes an interaction issue. A user trying to press an on-screen button may touch the wrong area when the display is at enough of an angle.
There are two ways of mitigating the impact of parallax:
- Minimize the angle of the screen relative to the viewer, keeping the perception error small to avoid unintentional triggering of an adjacent touch zone rather than the intended.
- Make the zones large enough and/or far enough apart to mitigate the perception error. This will of course impact the visual design of the user interface. (This is a common solution on many “mobile” websites that have large buttons and significant distance between buttons.)
Also note that the air gap between the touch surface and the display surface will vary according to screen type and touch technology used. For instance, the screens on modern mobile phones have a small air gap, whereas a screen needing thick reinforced glass for a more rugged application will have a larger gap.
Working Assumption: Parallax
Absent of parallax, we would have a goal that the international range of 5th percentile female to 95th percentile male users should be able to interact with the touch screen at a maximum of 30° from their natural viewing angle. (See below for a discussion of “Natural viewing angle”.) Depending on the actual display, parallax may reduce the viewing angle at which users can accurately interact with the screen.
Note that the impact of parallax is very dependent on the kind of interaction users have with the information on-screen. Minimizing parallax errors for fine control, or adjustment of multiple variables, may require smaller angles. Bold, simple adjustments may be fine with bigger. Every aspect of a touch screen UI depends on the specifics of what you are demanding of your users, so confirm your real needs with early mock-ups.
- The thickness of glass used over the top of a given display (or any other material, including air gap) will create a parallax effect.
- A simulation using the intended screen will clarify the impact of parallax with your screen and user needs.
- The problem of parallax error diminishes if the lens and display glass is very thin. If there is no extra layer of glass over the LCD component, i.e. the difference between the touch surface and the display surface is minimal, then in practice parallax largely disappears.
- The display usable angle is closely tied to button size and spacing. When parallax can’t be avoided, space out information on screen to diminish parallax impact.
The diagrams below look at location and angle for a touch screen at a kitchen surface height, which is typical for labs, carts, and many use situations. Users are shown in an international (not just US) size range, from a 5th percentile female to a 95th percentile male. (All dimensions in inches.)
User Parameters for a Fixed Touch Screen
The two images below show a median angle to position a fixed display. This display angle places the 5th percentile female to a 95th percentile male within an acceptable envelope of viewing angle (+/- 30°).
- A position optimized for taller users (an angle of 56º; closer to horizontal) is more awkward for the 5th percentile to view and button-press. Step stools might be needed.
- A position optimized for shorter users (an angle of 26º; closer to vertical) is more awkward for the 95th percentile. They might need to stoop.
Consider your customer base and select the best tradeoffs accordingly.
User Parameters for an Adjustable Touch Screen
The two images below depict the ideal angle required to position the display normal to the viewing, while the composite image shows the amount of tilt (30°) required to accommodate both users.
Weighing the Trade-Offs: Fixed or Adjustable?
Consider a fixed display if…
- The display interaction is occasional and does not require fine control of many settings, or analysis of very finely detailed visual information.
- You have the room on the product to locate the display at the optimal height.
- Cost reduction is a higher priority than gaining optimal interaction for all users
- The industrial and mechanical design of the enclosure can be made to accommodate a fixed screen (issues such as appearance, tolerancing the bezel for fit and finish; serviceability; the ruggedness of the location of the fixed display, etc.)
- The gender of users skews significantly to one or the other. In this case you might optimize the angle for your likely user population, rather than compromising for the blanket 5th to 95th percentile of both genders. (The obvious example: optimize display angle for shorter users if more of them will be women.)
- Tests with physical mock-ups show that body posture of 5th to 95th percentile users is acceptable with a fixed screen.
Consider an adjustable display if…
- Touch and visual interaction with the display is frequent and requires fine control of many settings, and analysis of finely detailed visual information.
- Locating it at a fixed angle and optimal height is not practical on the surfaces of the product.
- It is preferred to provide optimal interaction for all users. Adding adjustability will require that the product either tolerate a higher price point, or the manufacturer a lower margin.
- The industrial and mechanical design of the enclosure works better with an adjustable screen (adjustability may help with issues such as appearance tolerancing, serviceability, ruggedness, etc.)
- The gender of users is likely to be balanced, and in the markets for which anthropometric data is presented here: US, Northern EU, and BRIC countries.
- Tests with physical mock ups show desirable body posture for 5th to 95th percentile users with an adjustable screen.
The values used to arrive at both fixed and adjustable potential solutions are not absolute science. Numbers are based on the working assumptions about each of the variables. They must be compared against real world tests and new developments in screen view angles, depths, etc. Technology keeps improving on the standards that become inputs to this decision, but the fundamental principles laid out here remain the same.
Before finalizing any design choices, make and test physical mock-ups. Don’t forget to explore real-word conditions like glare, hand and arm posture, tasks your users will perform, and duration of use.
Choices around touch screen display position will drive good or bad ergonomics into a user’s experience of your product. Stay on the side of the angels by evaluating early and testing potential solutions as you move forward towards developing a refined touch screen product.