1. 2/23/051 Human Abilities: Color, Vision, & Perception CS 160, Spring 2005 Slides from: James Landay

2. 2/23/20052 Interface Hall of Shame or Fame? 4 From IBM’s RealCD *prompt *button

3. 2/23/20053 Interface Hall of Shame ! 4 From IBM’s RealCD *prompt *button 4 Black on black???? *cool! *but you can’t see it *“click here...” shouldn’t be necessary -> lack of affordances

4. 2/23/054 Human Abilities: Color, Vision, & Perception CS 160, Spring 2005 Slides from: James Landay

5. 2/23/20055 Outline 4 Human visual system 4 Guidelines for design 4 Color & memory

6. 2/23/20056 Color can be a powerful tool to improve user interfaces, but its inappropriate use can severely reduce the performance of the systems we build Why Study Color?

7. 2/23/20057 Visible Spectrum

8. 2/23/20058 Human Visual System 4 Light passes through lens 4 Focussed on retina

9. 2/23/20059 Retina 4 Retina covered with light-sensitive receptors *cones +used to sense color *rods +primarily for night vision & perceiving movement +sensitive to broad spectrum of light +can’t discriminate between colors +sense intensity or shades of gray

10. 2/23/200510 Retina 4 Center of retina has most of the cones  ? *allows for high acuity of objects focused at center & color perception 4 Edge of retina is dominated by rods  ? *allows detecting motion of threats in periphery

11. 2/23/200511 Color Perception via Cones 4 “Photopigments” used to sense color 4 3 types: blue, green, “red” (really yellow) *each sensitive to different band of spectrum *ratio of neural activity of the 3  color +other colors are perceived by combining stimulation

12. 2/23/200512 Color Sensitivity from: http://www.cs.gsu.edu/classes/hypgraph/color/coloreff.htm Really yellow

13. 2/23/200513 from http://insight.med.utah.edu/Webvision/index.htmlhttp://insight.med.utah.edu/Webvision/index.html Color Sensitivity Really yellow

14. 2/23/200514 Distribution of Photopigments 4 Not distributed evenly *mainly reds (64%) & very few blues (4%)  ? +insensitivity to short wavelengths ~cyan to deep-blue 4 Center of retina (high acuity) has no blue cones  ? *disappearance of small blue objects you fixate on

15. 2/23/200515 Color Sensitivity & Image Detection 4 Most sensitive to the center of the spectrum *blues & reds must be brighter than greens & yellows 4 Brightness determined mainly by R+G 4 Shapes detected by finding edges *combine brightness & color differences for sharpness 4 Implications? *hard to deal w/ blue edges & blue shapes

16. 2/23/200516 Color Sensitivity (cont.) 4 As we age *lens yellows & absorbs shorter wavelengths  ? +sensitivity to blue is even more reduced *fluid between lens and retina absorbs more light +perceive a lower level of brightness 4 Implications? *don’t rely on blue for text or small objects! *older users need brighter colors

17. 2/23/200517 Focus 4 Different wavelengths of light focused at different distances behind eye’s lens *need for constant refocusing  ? +causes fatigue *be careful about color combinations

18. 2/23/200518 Focus 4 Different wavelengths of light focused at different distances behind eye’s lens *need for constant refocusing  ? +causes fatigue *be careful about color combinations 4 Pure (saturated) colors require more focusing then less pure (desaturated) *don’t use saturated colors in UIs unless you really need something to stand out (stop sign)

19. 2/23/200519 4 Trouble discriminating colors *besets about 9% of population *two major types 4 Different photopigment response *reduces capability to discern small color diffs +particularly those of low brightness *most common 4 Red-green deficiency is best known *lack of either green or red photopigment  ? +can’t discriminate colors dependent on R & G Color Deficiency (also known as “color blindness”)

20. 2/23/200520 Color Deficiency Example

21. 2/23/200521 Color Components 4 Hue *property of the wavelengths of light (i.e., “color”) 4 Lightness (or value) *how much light appears to be reflected from a surface *some hues are inherently lighter (yellow) or darker (blue) 4 Saturation *purity of the hue +e.g., red is more saturated than pink *color is mixture of pure hue & achromatic color +achromatic: a color lacking hue; white, gray, or black +portion of pure hue is the degree of saturation

22. 2/23/200522 Color Components (cont.) 4 Lightness 4 Saturation from http://www2.ncsu.edu/scivis/lessons/colormodels/color_models2.html#saturation.http://www2.ncsu.edu/scivis/lessons/colormodels/color_models2.html#saturation.

23. 2/23/200523 HSV Color Model 4 HSV model - hue, saturation, & value *hue is primary wavelength (i.e., basic color) *saturation is a measure of how pure light is +high is pure, low means it is mixed w/ white/gray *value is intensity (dark vs. light) 4 HSV is easier for people to use. Why? *uses people’s intuition of what color is *there is a direct conversion to RGB 4 Other colors models: *RGB: specify color by red, green, & blue components *CMY: in terms of mixing pigments cyan, magenta, & yellow

24. 2/23/200524 HSV Color Model (cont.) from http://www2.ncsu.edu/scivis/lessons/colormodels/color_models2.html#saturation.http://www2.ncsu.edu/scivis/lessons/colormodels/color_models2.html#saturation.

25. 2/23/200525 Color Guidelines 4 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

26. 2/23/200526 4 Opponent colors go well together *(red & green) or (yellow & blue) *Hering's opponent colors diagram  4 Pick non-adjacent colors on the hue circle Color Guidelines

27. 2/23/200527 Color Guidelines (cont.) 4 Size of detectable changes in color varies *hard to detect changes in reds, purples, & greens *easier to detect changes in yellows & blue-greens 4 Older users need higher brightness levels to distinguish colors 4 Hard to focus on edges created by color alone  ? *use both brightness & color differences

28. 2/23/200528 Color Guidelines (cont.) 4 Avoid red & green in the periphery - why? *lack of RG cones there -- yellows & blues work in periphery 4 Avoid pure blue for text, lines, & small shapes *blue makes a fine background color *avoid adjacent colors that differ only in blue 4 Avoid single-color distinctions *mixtures of colors should differ in 2 or 3 colors +e.g., 2 colors shouldn’t differ only by amount of red *helps color-deficient observers

29. 2/23/200529 Encoding Info with Color 4 Beware… 4 Working memory interferes with long term memory

30. 2/23/200530 Simple Experiment 4 Volunteer 4 Start saying colors you see in list of words *when slide comes up *as fast as you can 4 Say “done” when finished 4 Everyone else time it…

31. Paper Home Back Schedule Page Change

32. 2/23/200532 Simple Experiment 4 Do it again 4 Say “done” when finished

33. Blue Red Black White Green Yellow

34. 2/23/200534 Memory 4 Interference (recall MHP lecture) *two strong cues in working memory *link to different chunks in long term memory 4 Why learn about memory? *know what’s behind many HCI techniques *helps you understand what users will “get” *aging population of users

35. 2/23/200535 Memory Review 4 Memory *three types? +sensor, WM, & LTM *use cues in ? to get to ? +WM -> LTM *interference can make hard to access? +LTM 4 Cues can make it easier to access LTM

36. 2/23/200536 Summary 4 Color can be very helpful, but 4 Pay attention to *how colors combine *human perception *people with color deficiency 4 Coding information w/ color is a further issue