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
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
• dont 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
• RG!

13
Problem for Color Deficient Users
14
Color Wheel
15
Effective Color Combinations

• Opponent colors go well together
• complementary colors (RG or BY)
• 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
(No Transcript)
19
Simultaneous Contrast
20
Commonality/Difference of Color by Profession

• Machine industry white hot
• Chemical engineer redhot, bluecold
• Medical green, purple tumor
• red, yellow normal
• Control engineers green safe
• Financial redloss, blackgain, green
  profitable
• Health care green infected
• Map makers bluewater, greenforests,
  yellowdeserts
• Automobile industry greengo, yellowcaution,
  redstop

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

• Software now 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
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 whats behind many HCI techniques
• helps you understand what users will get
• aging population of users

36
Next Class

• Web Design Patterns (Homepage)