1. Screen design Attention, Colour psychological and physiological constraints

2. Attention

3. What is attention? – Visual ** – Audio What are the implications for UI designers? – Multi-tasking – Attention-grabbers And for UI evaluations? – Eye tracking – Think-aloud For your project – Guiding the user in where to attend

4. Memory Working memory – Miller, George A. "The magical number seven, plus or minus two: some limits on our capacity for processing information." Psychological review 63.2 (1956): 81. (>17K gcites, Sep 2013) http://cogprints.org/730/1/miller.html – WM very limited – Chunking is really important – Complex to user this to predict … but may explain think- aloud observations – (Claude Shannon theory of information.. Brain as information processing machine) Long term memory – Critical for recall at UI – And learning about UI – Mental model

5. Perception Translating external stimuli into the memory – Senses – Processing their information – Tightly interlinked physical and cognitive Simple example, reading a screen – Vision… visibility

6. Screen design Tullis, Thomas S. "The formatting of alphanumeric displays: A review and analysis." Human Factors: The Journal of the Human Factors and Ergonomics Society 25.6 (1983): 657-682. http://www.eastonmass.net/tullis/publications/1983- HF/FormattingAlphanumericDisplays.pdf http://www.eastonmass.net/tullis/publications/1983- HF/FormattingAlphanumericDisplays.pdf Key outcomes in terms of – Performance versus affect (preferences) – Density (local/overall), grouping, layout complexity – Grouping related elements, organised for vertical scanning, with space between them aids search in speed and preference Science of screen design – Careful empirical studies – Design of initial study – Replication – Impact of different technology – Impact of the particular task – Impact of user’s mental model, standards for device, application – Translation to your interface

7. Colour Valuable for screen design – Performance ++ – Affect ++ Well understood challenges that are avoidable but failure to do so can compromise performance

8. Tog Principles http://asktog.com/atc/principles-of-interaction-design/ “Principle: Any time you use color to convey information in the interface, you should also use clear, secondary cues to convey the information to those who cannot see the colors presented Principle: Test your site to see what color-blind individuals see Principle: Do not avoid color in the interface just because not every user can see every color. Principle: Do not strip away or overwhelm color cues in the interface because of a passing graphic-design fad.

9. Colour blindness Affected ~ 8% of men,.5% women Testing tools eg – http://enably.com/chrometric/. http://enably.com/chrometric/ For images images – http://www.colblindor.com/coblis-color- blindness-simulator/. http://www.colblindor.com/coblis-color- blindness-simulator/

10. Coblis — Color Blindness Simulator Their demo: normal vision

11. Green-Blind/Deuteranopia

12. Blue-Blind/Tritanopia

13. Red-Blind/Protanopia

14. What can you do about colour blindness? Be aware! Design in black and white and add colour sparingly What else? …. Class activity

15. Colour Valuable for screen design – Performance ++ – Affect ++ Well understood challenges that are avoidable but failure to do so can compromise performance

16. Coding Means distinguishing different parts of an interface Includes – Font changes such as these withsize –Font with style and size – Use of colour such as here and here – seriously – Special symbols, shapes – Sound – Movement All are about...

17. Coding Means distinguishing different parts of an interface Includes – Font changes such as these withsize –Font with style and size – Use of colour such as here and here – seriously – Special symbols, shapes – Sound – Movement All are about... gaining attention

18. HAI2008. Lifelong ambient companions: challenges and steps to overcome them Colour can be poorly used Means distinguishing different parts of an interface Includes – Font changes such as these withsize –Font with style and size – Use of colour such as here and here – seriously – Special symbols, shapes – Sound – Movement All are about... gaining attention

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

20. Stroop Effect say the colour of the words here From http://faculty.washington.edu/chudler/words.html

21. 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

22. Visible Spectrum Winter 2013 CSE 440: User Interface Design, Prototyping, and Evaluation 22

23. 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

24. 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 best (ie green, yellow)‏ Colour blindness – Use additional redundant cue eg colour + box + brightness difference and this improves broad performance

25. 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

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

27. Blooming – light text on dark background seem larger Light text on a dark background Dark text on a light background

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

29. Red text seems to focus differently

31. So many ways to make mistakes...

32. Color Guidelines Avoid simultaneous display of highly saturated, spectrally extreme colors – e.g., no cyans/blues at the same time as reds, why? refocusing! – desaturated combinations are better  pastels Winter 2013 From: CSE 440: User Interface Design, Prototyping, and Evaluation 32

33. Guidelines eg http://colorusage.arc.nasa.gov/guidelines.p hp

34. 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.

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

36. 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

37. 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

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

39. 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

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

41. Summary Awareness of human factors affecting design Awareness of some basic guidelines for use of colour – Apply these for a simple form of no-user testing by checking your UI against guidelines – Better done by person other than designer (role for your teams to desk-check each other’s designs)