1 / 36

Effective Use of Color

Effective Use of Color. IS 485, Professor Matt Thatcher. Agenda. Administrivia Use of color in design Other human abilities. 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

raziya
Download Presentation

Effective Use of Color

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

  18. Simultaneous Contrast

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

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

  21. Poor Color Coding

  22. Experimental Results

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

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

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

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

  27. Use Color Sparingly compared to

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

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

  30. 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…

  31. ZYP QLEKF SUWRG XCIDB WOPR ZYP QLEKF XCIDB SUWRG WOPR SUWRG ZYP XCIDB QLEKF WOPR QLEKF WOPR ZYP XCIDB SUWRG

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

  33. RED BLACK YELLOW BLUE RED GREEN YELLOW BLACK BLUE BLACK RED YELLOW GREEN BLUE GREEN BLUE RED YELLOW BLACK GREEN

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

  35. Next Class • Web Design Patterns (Homepage)

More Related