People: psychological and physiological constraints. Media Equation and avatars. Screen design.

1. People:psychological and physiological constraints. Media Equation and avatars. Screen design.

2. Overview Thinking about people Cognitive Physical Physiological Some guidelines, for no-user testing (Heuristic Evaluation) Importance of empirical validation

3. Cognitive processes • In contrast to physical, physiological • Includes • Attention • Memory • Perception • Meta-cognitive processes • Problem-solving, planning, reasoning and decision-making….

4. Attention • http://www.youtube.com/watch?v=vJG698U2Mvo&feature=c4-overview-vl&list=PLB228A1652CD49370 • Daniel Simons

5. Attention • Why did this happen? • 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

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

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

8. 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 • 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

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

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

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

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

13. Stroopeffect http://faculty.washington.edu/chudler/java/ready.html

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

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

16. Visible Spectrum CSE 440: User Interface Design, Prototyping, and Evaluation

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

18. 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 8% men, 0.4% women Use additional redundant cue eg colour + box + brightness difference and this improves broad performance

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

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

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

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

23. Red text seems to focus differently

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

27. So many ways to make mistakes...

28. 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 CSE 440: User Interface Design, Prototyping, and Evaluation

29. Using the Hue Circle • Pick non-adjacent colors • opponent colors go well together • (red & green) or (yellow & blue) CSE 440: User Interface Design, Prototyping, and Evaluation

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

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

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

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

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

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

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

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

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

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

40. 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)

41. not as sensitive to blue from: http://www.cs.gsu.edu/classes/hypgraph/color/coloreff.htm lots of overlap Color Sensitivity Really yellow CSE 440: User Interface Design, Prototyping, and Evaluation