Effective Use of Color

1. Effective Use of Color IS 485, Professor Matt Thatcher

2. Agenda • Administrivia • Use of color in design • Other human abilities

3. Color as a Design Element • We wish to seek means through which the careful use of color can enhance human performance when dealing with computer displays • The meaningless introduction of color to an interface can reduce user performance to 1/3 of what it was without color

4. Physiology of the Eye • Physical structure of the eye • Limits of perception • Guidelines for use of color

5. Physiology of the Eye • Lens is not color corrected chromostereopsis, produces 3D effect Lens White Light Retina (separated wavelengths)

6. Lens Focus on Red Light Retina Lens Focus on Blue Light Retina

7. Implication of Chromostereopsis • Spectrally extreme colors produce eye strain (refocusing)

8. Visible Spectrum

9. Rods B&W Cones color Physiology of the Eye • Composition of the eye (retina), wavelength sensitivity 65% 2% 33%

10. Physiology of the Eye • Lens is not color corrected, Murch, 1984 • Adjacent, opposite colors produce eye strain, Schneiderman, 1992 • Cone composition of the eye, Murch, 1984 Composition of the Eye 65% 2% 33%

11. The Aging Process • Lens tends to yellow and absorbs shorter wavelengths • causing increased insensitivity to blue • Fluids in the eye suffer from reduced transparency • Perceive a lower level of brightness • Implications • don’t rely on blue for text or small objects • older users need brighter colors

12. Color Deficiency(or Color Blindness) • Trouble discriminating colors • Percentage of population affected • men: 8 - 10% • women: 0.5 - 1.5 % • Shape and contours defined by color alone can appear invisible • Most common color deficiency • R&G!

13. Problem for Color Deficient Users

14. Color Wheel

15. Effective Color Combinations • Opponent colors go well together • complementary colors (R&G or B&Y) • Pick non-adjacent colors

16. Poor Color Contrast

17. Color Illusions • Color adaptation • colors appear less saturated after prolonged exposure • McCullough effect • shifts in color perception toward complementary colors

19. Simultaneous Contrast

20. Commonality/Difference of Color by Profession • Machine industry: white = hot • Chemical engineer: red=hot, blue=cold • Medical: green, purple = tumor • red, yellow = normal • Control engineers: green = safe • Financial: red=loss, black=gain, green = profitable • Health care: green = infected • Map makers: blue=water, green=forests, yellow=deserts • Automobile industry: green=go, yellow=caution, red=stop

21. Difference of Color by Culture Culture Red Yellow Green Blue European danger caution,coward safe,sour masculine Japanese anger, danger grace,nobility youth villany Chinese joy,festive honor,royalty Arabic happiness, prosperity strength virtue,faith

22. Poor Color Coding

23. Experimental Results

24. Difference in Color • Source of colors • Texture or finish of surface • Ambient light sources • Size, orientation of surface • Other colors in field of vision • Distance from object

25. Color and Commercialism • Softwarenow evaluated based on its interface • Competition and focus may not be functionality, but usability

26. Review of Color Guidelines • Avoid the simultaneous display of spectrally extreme colors • Avoid red and green in the periphery of a large-scale display • lack of RG cones there -- yellows & blues work in periphery • Avoid pure blue for text, thin lines, and small shapes • Opponent (or complementary) colors on the color wheel go well together • Older operators need higher brightness levels to perceive and distinguish colors • Ensure that color coding supports the user and the task • Use color as a “redundant” clue

27. The Best Advice • Color can be very helpful, but • Pay attention to • how colors combine • human perception • people with color deficiency • established color coding • Best advice • perform user, task, environment analysis • conduct user tests • use color sparingly

28. Use Color Sparingly compared to

29. Human Abilities(Some More Interesting Stuff) • Fitts’ Law • moving hand is a series of microcorrections • correction takes Tperception + Tcognition + Tmotor = 240 msec • time Tpos to move the hand (or mouse) to target size S which is distance D away is given by: • Tpos = a + b log2 (D/S + 1) • summary • time to move the hand depends only on the relative precision required

30. Pop-up Linear Menu Pop-up Pie Menu Today Sunday Monday Tuesday Wednesday Thursday Friday Saturday Fitts’ Law Example • Which will be faster on average? • pie menu (bigger targets & less distance)

31. Simple Experiment • Volunteer • Start saying colors you see in list of words • when slide comes up • as fast as you can • Say “done” when finished • Everyone else time it…

32. ZYP QLEKF SUWRG XCIDB WOPR ZYP QLEKF XCIDB SUWRG WOPR SUWRG ZYP XCIDB QLEKF WOPR QLEKF WOPR ZYP XCIDB SUWRG

33. Simple Experiment • Do it again • Say “done” when finished

34. RED BLACK YELLOW BLUE RED GREEN YELLOW BLACK BLUE BLACK RED YELLOW GREEN BLUE GREEN BLUE RED YELLOW BLACK GREEN

35. Memory • Interference • two strong cues in working memory • link to different chunks in long term memory • Why learn about memory? • know what’s behind many HCI techniques • helps you understand what users will “get” • aging population of users

36. Next Class • Web Design Patterns (Homepage)