Post on 18-Dec-2015
2/23/05 1
Human Abilities:Color, Vision, & Perception
CS 160, Spring 2005Slides from: James Landay
2/23/2005 2
Interface Hall of Shame or Fame?
From IBM’s RealCD* prompt* button
2/23/2005 3
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/05 4
Human Abilities:Color, Vision, & Perception
CS 160, Spring 2005Slides from: James Landay
2/23/2005 5
Outline
Human visual system Guidelines for design Color & memory
2/23/2005 6
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?
2/23/2005 7
Visible Spectrum
2/23/2005 8
Human Visual System
Light passes through lens Focussed on retina
2/23/2005 9
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 10
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 11
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 12
Color Sensitivity
from: http://www.cs.gsu.edu/classes/hypgraph/color/coloreff.htm
Really yellow
2/23/2005 13
from http://insight.med.utah.edu/Webvision/index.html
Color Sensitivity
Really yellow
2/23/2005 14
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 15
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 16
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 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
2/23/2005 18
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 19
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
Color Deficiency (also known as “color
blindness”)
2/23/2005 20
Color Deficiency Example
2/23/2005 21
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 22
Color Components (cont.)
Lightness Saturation
from http://www2.ncsu.edu/scivis/lessons/colormodels/color_models2.html#saturation.
2/23/2005 23
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 24
HSV Color Model (cont.)
from http://www2.ncsu.edu/scivis/lessons/colormodels/color_models2.html#saturation.
2/23/2005 25
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 26
Opponent colors go well together* (red & green) or
(yellow & blue)* Hering's opponent
colors diagram Pick non-adjacent
colors on the hue circle
Color Guidelines
2/23/2005 27
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 28
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 29
Encoding Info with Color
Beware… Working memory interferes with
long term memory
2/23/2005 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…
PaperHomeBackSchedulePageChange
2/23/2005 32
Simple Experiment
Do it again Say “done” when finished
BlueRedBlackWhiteGreenYellow
2/23/2005 34
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 35
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 36
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