+ 1

Bridge Design White Paper looking at some of the ergonomic issues of applying touchscreens to products.

*Whitepaper created in conjunction with Design Science.

Touch Screen Display Ergonomics

Bridge Design, Inc.San Francisco California

+1.415.487.7100www.bridgedesign.com

+

If a touch screen display is added to your product should it be adjustable, or can it be fixed?

1. There are many variables (with corresponding trade-offs) to be considered. The key ergonomic variables are:

• Viewing angle• Text Legibility• Parallax• Touch screen position relating to an international anthropometric market

2. Variables such as glare, hand/arm and body posture during use, button size and spacing, and period of time spent using the UI are also factors and not explored here, but must be considered for the specifics of each potential application and will vary greatly in affect.

3. Bridge encourages mock ups to simulate the actual use conditions4. In order to draw conclusions that can be practically tested working

assumptions to address each of the variables covered must be developed. 5. The following pages outline how these working assumptions can been arrived

at and give the reader a wide range of points to consider in their trade-off considerations.

6. Bridge recommends empirical testing of simple mock-ups to draw project specific conclusions.

2

+

Display Viewable Angle

3

+

Most modern sourced displays have a viewing angle which limits the viewability with regard to Contrast Ratio. However, just because a given display has a wide viewing angle does not mean that at the maximum viewing angle the text and graphics would necessarily be legible.

Display Viewing Angle

When sourcing displays consider the specified viewing angles and understand its impact in your specific application.Looking at a typical display specification it might read like this:Angle of viewing order is as follows: Left/Right/Up/Down (each manufacturer may vary this so review specs carefully)

4

+

The images below depicts the range of viewable angle of the previous example display without the contrast ratio dropping below 10.

CR is defined as: Contrast ratio (CR) =

Display Viewing Angle

12 o’ clock position

3 o’ clock position

6 o’ clock position

9 o’ clock position

Brightness on the “White” stateBrightness on the “Black” state

5

+

This 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 parameters will not be the restricting item in determining an optimal touch screen location and angle.

Working Assumption: Display Viewing Angle

6

+

Text Legibility

7

+

The angle that information is viewed by the user on screen can have a dramatic impact on the ease of legibility of text and graphics.

Text Legibility

8

+

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.

Text Legibility

9

+

In addition to the viewing angle there are many other variables that can affect the readability of on-screen information.

•Lighting (daylight, artificial, size of the source etc) glare and reflection can affect the ability to read information on screen.

•Anti-glare and anti-reflective coatings on displays as well as the contrasting colors and brightness levels chosen to display on-screen graphics all will have an impact on readability.

Other Legibility Variables

10

+

Working Assumption: Text Legibility

shown at a 30° angle(considered approx limit of

allowable perspective distortion)

shown at a normal viewing angle

Due to the 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. This should be checked by mocking up a display at your desired angle and using some typical UI screen shots to evaluate readability. For instance complex charting/graphing may require a shallower angle, but bold simple number displays may tolerate a greater angle.

11

+

Parallax

12

+

Definition: Parallax is an apparent displacement or difference in the apparent position of an object viewed along two different lines of sight, and is measured by the angle or semi-angle of inclination between those two lines.

Parallax

13

+

With a touch screen this becomes an interaction issue when the user attempts to, for example, press on-screen buttons when the display at an off angle.There are two ways of mitigating the impact of parallax:

1. Minimize the angle of the screen relative to the viewer to keep the error small enough to avoid the user unintentionally triggering an adjacent touch zone rather than the intended zone

2. Make the zones large enough and/or far enough apart to mitigate the error and accept this impact on the visual design of the user interface. (this is a common solution applied to many “mobile” websites that have large buttons and significant distance between buttons.)

Parallax

A

B

Perceived location of zone of contact (B)

Actual location of zone of contact (A)

Touch zones

Information as shown on screen

14

+

+/- 15° +/- 30° +/- 45°

Working Assumption: ParallaxConsidering parallax we assume the international range of 5%ile female to 95%ile male users should be able to interact with the touch screen at a maximum of 30°from their natural viewing angle. “Natural viewing angle” to be specified later in this document. NOTE – the impact of parallax is very dependent on the kind of interaction users need with the information on-screen. Fine control or adjustment of multiple variables may require shallower angles to minimize parallax errors and vice versa for bold simple adjustments. Every aspect of a touch screen UI depends on the specifics of what you are demanding of your users, hence the value of early mock-ups.

15

+

•It is assumed glass will be used over the top of a given display, hence the recommended max parallax angle. This is the typical depth of a modern touch screen.

•A simulation using the intended screen will clarify the impact of these issues

•If there is no extra layer of glass over the lcd component, eg the difference between the touch surface and the display surface in minimal then in practice this issue of parallax error largely disappears. Technically speaking this means the problem of parallax diminishes if the lens and display glass is very thin.

•The usable parallax angle is closely tied to button size and spacing. In other words, make the information less dense on screen and well spaced out and parallax error also diminishes

Working Assumption: Parallax

16

+

Touch Screen Location

17

+

The following pages are a study on touch screen location and angle relating to a kitchen surface mounting height (typical for labs, carts and many use situations) and an international size range from a 5%ile female to a 95%ile male (global not just US).(all dimensions in inches)

5% female shown* (China/Japan)

95% male shown (US/Europe)

Touch Screen Location

(* data for Asian markets provided by Bridge’s ergonomics partner, Design Science in PA)

18

+

User Parameters if a Fixed Touch Screen

is considered

19

+

The two images below show a median angle to position a fixed display. This display angle places the 5%ile female to a 95%ile male within an acceptable envelope of viewing angle (+/- 30°).

5% female shown (China/Japan)

95% male shown (US/Europe)

both shown overlaid

User Parameters: Fixed Touch ScreenThe composite image below shows the delta between the viewing angle of each of the two user examples (+/-15°) well within an acceptable range.

20

+

The two images below show a median angle to position a fixed display. This display angle places the 5%ile female to a 95%ile male within an acceptable envelope of viewing angle (+/- 30°).

5% female shown (China/Japan)

95% male shown (US/Europe)

both shown overlaid

User Parameters: Fixed Touch ScreenThe composite image below shows the delta between the viewing angle of each of the two user examples (+/-15°) well within an acceptable range.

21

Ergonomic tradeoffs:

•To optimize for taller users, an angle of 56º (closer to horizontal) would make it less optimal for the 5%ile (awkward viewing and button pressing, and possible need for step stools)

•To optimize for shorter users, an angle of 26º (closer to vertical) would make it less optimal for the 95%ile (possible stooping/ awkward viewing and button pressing)

•Consider your customer base and decide tradeoffs accordingly

+

User Parameters if an Adjustable Touch Screen

is considered

22

+5% female shown (China/Japan)

95% male shown (US/Europe)

both shown overlaid

User Parameters: Adjustable Touch ScreenThe two images below depict the ideal angle required to position the display that is normal to the viewing angle of each of the two users shown.

The composite image below shows the amount of tilt (30°) required to meet both positions.

23

+

Weighing up the trade-offs

24

+

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

•If cost reduction is a higher priority than gaining optimal interaction for all users

•If 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.)

•If the gender of users skews significantly to either gender allowing you to consider tweaking the angle to be more preferential to your likely user population rather than to a blanket 5%ile to 95%ile of all genders (eg: if more women then optimize angle for shorter users and vice versa for male users)

•Tests with mock ups show the posture of 5%ile to 95%ile users is acceptable with a fixed screen

Trade-offs

25

+

Consider an adjustable display if...

•The users 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 at the optimal height is not practical on the surfaces of the product

•When considering cost/usability trade-offs it is preferred to emphasize optimal interaction for all users and the product can either tolerate a higher price point or the manufacturer a lower margin if adjustability is added

•If the industrial and mechanical design of the enclosure works better with an adjustable screen (issues such as appearance tolerancing, serviceability, the ruggedness of the location, etc.)

•If the gender of users is likely to be balanced and in the markets for which anthropometric data is presented here – eg: US, Northern EU and BRIC countries

•Tests with mock ups show the body posture of 5%ile to 95%ile users is desirable with an adjustable screen

Trade-offs

26

+

Overall RecommendationsThe values used to arrive at both fixed and adjustable potential solutions are not absolute science. These numbers are based on the working assumptions that must be compared against real world tests. In order to draw final conclusions physical mock-ups must be constructed and tested.

Additionally, these numbers have not factored in variables such as glare, hand/arm posture, button size and spacing, and duration of use.

27