Cognitive and physiological design drivers

1. Judy Kay CHAI: Computer human adapted interaction research group School of Information Technologies Cognitive and physiological design drivers

2. Overview Thinking about people Cognitive constraints Physical constraints Physiological constraints

3. Postconditions for this week Identify human constraints that are important for design and evaluation of pervasive systems Cognitive Physical Physiological For a particular design for a pervasive interface, explain how these may be important Explain how to refine a proposed to design to take account of these factors Identify such issues particular to pervasive computing

4. Stroop effect http://faculty.washington.edu/chudler/java/ready.html

5. Stroop Effect From http://faculty.washington.edu/chudler/words.html

6. Coding Means distinguishing different parts of an interface Includes Font changessuch asthese Fontwithstyle and size Use of colour such as here and here – seriously Special symbols, shapes Sound Movement All are about ...

7. Coding Means distinguishing different parts of an interface Includes Font changessuch asthese Fontwithstyle and size Use of colour such as here and here – seriously Special symbols, shapes Sound Movement All are about ... gaining attention

8. Colour can be poorly used Means distinguishing different parts of an interface Includes Font changessuch asthese Fontwithstyle and size Use of colour such as here and here – seriously Special symbols, shapes Sound Movement All are about ... gaining attention

9. Colour Properties Hue – wavelength (red .. violet)‏ Saturation, chroma (purity, mix of wavelengths)‏ High saturation very pure Low saturation, greyish Brightness, intensity, value very low intensity becomes black

10. Physiology and colour Rods and cones Fovea – detailed vision (eg text)‏ Only cones sensitive to colour 64% respond to red 32% to green 2% to blue (none in fovea!)‏ Opposing colours at the neuron level Red-green, yellow-blue

11. Visual acuity reduced for violet end of spectrum Insensitivity to blue increases with age Blue seems harder to read, especially on some backgrounds With normal light, we see mid-spectrum colours vesr (ie green, yellow)‏ Colour blindness 8% men, 0.4% women Use additional redundant cue eg colour + box + brightness difference and this improves broad performance

12. Reds appear closer than blues Warm colours appear larger than cool colours eg red larger than blue Blooming effect Light colours on dark backgrounds appear larger Colours distant on spectrum require refocusing After images and shadows can follow Opposing colours Highly saturated colours Illumination matters too - pervasive?

13. Light text on a dark background Dark text on a light background

14. Red text on a dark background Red text on a light background

15. Red text seems to focus differently

16. Red text seems to focus differently Red text seems to focus differently Red text seems to focus differently Red text seems to focus differently Red text seems to focus differently Red text seems to focus differently Red text seems to focus differently Red text seems to focus differently Red text seems to focus differently Red text seems to focus differently

19. So many ways to make mistakes...

20. eg http://colorusage.arc.nasa.gov/guidelines.php Guidelines

21. Examples: Pure blue shall not be used on a dark background for text, thin lines, or high resolution information. [Source: DOE-HFAC 1, 1992] FAA Human Factors Design Standard, p 8-58 8.6.2.2.7 Blue. Blue should not be used as the foreground color if resolution of fine details is required. [Source: DOD HCISG V2.0, 1992] FAA Human Factors Design Standard, p 8-57.

22. http://colorusage.arc.nasa.gov/assets/blue_1.gif

23. More examples from NASA:from http://colorusage.arc.nasa.gov/guidelines_discrim_id.php Use no more than six colors to label graphic elements. Use colors in conformity with cultural conventions. Use color coding consistently across displays and pages Use color coding redundantly with other graphic dimensions. Don't use color coding on small graphic elements

24. Recommendations Use colour sparingly Maximum codings 5 (+ or – 2) matching short term memory Design in monochrome first Optimise all other aspects of design and layout Add colour (with awareness of problems)‏ Use colour to: Draw attention (better than shape, size, brightness)‏ Show organisation, status, relationships

25. cont With black foreground, use cyan, magenta, white Ensure contrast ib hue and brightness of fore- and background Allow users to control colour coding Use colour consistently across system Use other (redundant) cues as well Avoid saturated blue for small text and thin lines

27. When is it good? And not? Blinking and movement

28. A hungry tiger is coming from the distance at your right Take yourself back to hunter and gatherer times:

29. Blinking and movement Hard to ignore Reduces legibility Can be really annoying Helpful for tiny cursors (otherwise hard to find and large ones are obtrusive)‏ Helpful for critical situations

30. Shapes Conventions for some shapes eg warning and errors Special shapes eg little hand pointing Cultural boundaries

31. Summary Awareness of constraints on design of pervasive computing interfaces because of human constraints Ignoring them can create systems that nobody can use effectively Next week personalisation