Human Abilities:
Color, Vision, & Perception
CS 160, Spring 2005
Slides from: James Landay
2/23/05
1
Interface Hall of Shame or Fame?
 From IBM’s RealCD
* prompt
* button
2/23/2005
2
Interface Hall of Shame !
 From IBM’s RealCD
* prompt
* button
 Black on black????
* cool!
* but you can’t see it
* “click here...” shouldn’t
be necessary -> lack of
affordances
2/23/2005
3
Human Abilities:
Color, Vision, & Perception
CS 160, Spring 2005
Slides from: James Landay
2/23/05
4
Outline
Human visual system
Guidelines for design
Color & memory
2/23/2005
5
Why Study Color?
Color can be a powerful tool to
improve user interfaces, but its
inappropriate use can severely
reduce the performance of the
systems we build
2/23/2005
6
Visible Spectrum
2/23/2005
7
Human Visual System
Light passes through lens
Focussed on retina
2/23/2005
8
Retina
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
2/23/2005
9
Retina
 Center of retina has most of the cones ?
* allows for high acuity of objects focused at center & color
perception
 Edge of retina is dominated by rods ?
* allows detecting motion of threats in periphery
2/23/2005
10
Color Perception via Cones
“Photopigments” used to sense color
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
2/23/2005
11
Color Sensitivity
Really yellow
from: http://www.cs.gsu.edu/classes/hypgraph/color/coloreff.htm
2/23/2005
12
Color Sensitivity
Really yellow
from http://insight.med.utah.edu/Webvision/index.html
2/23/2005
13
Distribution of Photopigments
Not distributed evenly
* mainly reds (64%) & very few blues (4%) ?
+ insensitivity to short wavelengths
~ cyan to deep-blue
Center of retina (high acuity) has no
blue cones ?
* disappearance of small blue objects you fixate on
2/23/2005
14
Color Sensitivity & Image
Detection
 Most sensitive to the center of the
spectrum
* blues & reds must be brighter than greens & yellows
 Brightness determined mainly by R+G
 Shapes detected by finding edges
* combine brightness & color
differences for sharpness
 Implications?
* hard to deal w/ blue edges
& blue shapes
2/23/2005
15
Color Sensitivity (cont.)
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
Implications?
* don’t rely on blue for text or small objects!
* older users need brighter colors
2/23/2005
16
Focus
Different wavelengths of light focused
at different distances behind eye’s lens
* need for constant refocusing  ?
+ causes fatigue
* be careful about color combinations
2/23/2005
17
Focus
Different wavelengths of light focused
at different distances behind eye’s lens
* need for constant refocusing  ?
+ causes fatigue
* be careful about color combinations
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)
2/23/2005
18
Color Deficiency
(also known as “color blindness”)
 Trouble discriminating colors
* besets about 9% of population
* two major types
 Different photopigment response
* reduces capability to discern small color diffs
+ particularly those of low brightness
* most common
 Red-green deficiency is best known
* lack of either green or red photopigment  ?
+ can’t discriminate colors dependent on R & G
2/23/2005
19
Color Deficiency Example
2/23/2005
20
Color Components
 Hue
* property of the wavelengths of light (i.e., “color”)
 Lightness (or value)
* how much light appears to be reflected from a surface
* some hues are inherently lighter (yellow) or darker (blue)
 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
2/23/2005
21
Color Components (cont.)
 Lightness
 Saturation
from http://www2.ncsu.edu/scivis/lessons/colormodels/color_models2.html#saturation.
2/23/2005
22
HSV Color Model
 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)
 HSV is easier for people to use. Why?
* uses people’s intuition of what color is
* there is a direct conversion to RGB
 Other colors models:
* RGB: specify color by red, green, & blue components
* CMY: in terms of mixing pigments cyan, magenta, & yellow
2/23/2005
23
HSV Color Model (cont.)
from http://www2.ncsu.edu/scivis/lessons/colormodels/color_models2.html#saturation.
2/23/2005
24
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
2/23/2005
25
Color Guidelines
Opponent colors go
well together
* (red & green) or (yellow
& blue)
* Hering's opponent colors
diagram 
Pick non-adjacent
colors on the hue
circle
2/23/2005
26
Color Guidelines (cont.)
 Size of detectable changes in color varies
* hard to detect changes in reds, purples, & greens
* easier to detect changes in yellows & blue-greens
 Older users need higher brightness levels to
distinguish colors
 Hard to focus on edges created by color
alone ?
* use both brightness & color differences
2/23/2005
27
Color Guidelines (cont.)
 Avoid red & green in the periphery - why?
* lack of RG cones there -- yellows & blues work in periphery
 Avoid pure blue for text, lines, & small shapes
* blue makes a fine background color
* avoid adjacent colors that differ only in blue
 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
2/23/2005
28
Encoding Info with Color
Beware…
Working memory interferes with long
term memory
2/23/2005
29
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…
2/23/2005
30
Paper
Home
Back
Schedule
Page
Change
Simple Experiment
Do it again
Say “done” when finished
2/23/2005
32
Blue
Red
Black
White
Green
Yellow
Memory
Interference (recall MHP lecture)
* 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
2/23/2005
34
Memory Review
Memory
* three types?
+ sensor, WM, & LTM
* use cues in ? to get to ?
+ WM -> LTM
* interference can make hard to access?
+ LTM
Cues can make it easier to access LTM
2/23/2005
35
Summary
Color can be very helpful, but
Pay attention to
* how colors combine
* human perception
* people with color deficiency
Coding information w/ color is a
further issue
2/23/2005
36