Upload
others
View
1
Download
0
Embed Size (px)
Citation preview
Human Abilities
Lawrence A. RoweComputer Science Division - EECSUniversity of California at Berkeley
http://bmrc.berkeley.edu/~larry
CS 160 Spring 2001
CS 160: 3/9/01 2
Outline
§ Human visual system§ Color perception§ Color deficiency§ Guidelines for design
CS 160: 3/9/01 3
Color can be a powerful tool to improve user interfaces …
But inappropriate use can severely reduce human performance
Why Study Color?
CS 160: 3/9/01 4
Visible Spectrum
CS 160: 3/9/01 5
Human Visual System
§ Light passes through lens§ Focussed on retina
CS 160: 3/9/01 6
Retina
§ Covered with light-sensitive receptors§ Rods
primarily for night vision & perceiving movementsensitive to broad spectrum of lightcan not discriminate between colorssense intensity or shades of gray (luminance)
§ Conesused to sense color (chrominance)
CS 160: 3/9/01 7
Retina
CS 160: 3/9/01 8
Retina
§ Edge dominated by rods Allows detecting motion of threats in periphery
§ Center mostly cones Allows for high acuity of objects focused at center
CS 160: 3/9/01 9
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 → colorre-coded & sent to brain as
R-G gives red or green color perceptionR+G gives perception of brightness & yellow (Y)Y-B gives yellow or blue color perception
CS 160: 3/9/01 10
Color Sensitivity
Really yellow
CS 160: 3/9/01 11
Distribution of Photopigments
§ Not distributed evenlyMainly reds (64%) & very few blues (4%)
insensitivity to short wavelengths (cyan to deep-blue)
high sensitivity to long wavelengths (yellow & orange)
§ Center of retina has no blue cones Implies disappearance of small blue objects on which you fixate
CS 160: 3/9/01 12
Color Sensitivity
from http://insight.med.utah.edu/Webvision/index.html
CS 160: 3/9/01 13
Color Sensitivity &Image Detection
§ Most sensitive to the center of the spectrumBlues & reds must be brighter than greens & yellows
§ Brightness determined mainly by R+G Expressed on a scale of luminance
§ Shapes detected by finding edgesCombine brightness & color differences for sharpness
§ Implications?Hard to see objects w/ blue edges & blue shapes
CS 160: 3/9/01 14
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 lightperceive a lower level of brightness
§ Implications?Do not rely on blue for text or small objects!
CS 160: 3/9/01 15
Focus
§ Different wavelengths of light focused at different distances behind eye’s lens
Need for constant refocusing (causes fatigue)Must be careful about color combinations
§ Red objects appear closer than blue objects§ Pure (saturated) colors require more
focusing then less pure (desaturated)
CS 160: 3/9/01 16
What Happens with Age?§ Opening/closing iris slows down
Means you should not have rapid changes
§ Most people lose visionNeed glassesNeed bifocalsGo blind?
§ Very frustrating!
CS 160: 3/9/01 17
§ Trouble discriminating colorsBesets about 9% of population
§ Different photopigment responseReduces capability to discern small color differences (particularly those of low brightness)
§ Red-green deficiency is best knownLack of either green or red photopigment (can notdiscriminate colors dependent on R & G)
Color Deficiency (“color blindness”)
CS 160: 3/9/01 18
Color Components
§ HueProperty of the wavelengths of light (i.e., “color”)
§ LightnessHow much light appears to be reflected from a surfaceSome hues are inherently lighter or darker
§ SaturationPurity of the hue (e.g., red is more saturated than pink)Color is mixture of pure hue & achromatic color
portion of pure hue is the degree of saturation
CS 160: 3/9/01 19
Color Components (cont.)§ Lightness § Saturation
CS 160: 3/9/01 20
Color Components (cont.)§ Lightness § Saturation
http://www2.ncsu.edu/scivis/lessons/colormodels/color_models2.html#saturation.
CS 160: 3/9/01 21
Color Components (cont.)§ Hue, Saturation, Value model (HSV)
from http://www2.ncsu.edu/scivis/lessons/colormodels/color_models2.html#saturation.
CS 160: 3/9/01 22
Color Models§ Additive color model
Light adds to create different colorsAll RGB gives white, no RGB gives blackTypical in monitors and projectors
§ Subtractive color modelLight absorbed by material on surface so it removes primaries to create colorAll RGB gives black and no RGB gives whiteTypical in printing – inks on different surfaces absorb different light/color wave lengths
CS 160: 3/9/01 23
Color Theory§ Humans perceive irregular shaped 3D
space of colors§ Scientists have developed reference
models for colorPantone is reference model for printing world
§ People perceive colors differently§ Projects/printers produce different colors
CS 160: 3/9/01 24
Visual Illusions (not color)
Can you guess the woman’s age? Keep looking.
CS 160: 3/9/01 25
Using Color
§ Avoid simultaneous display of highly saturated, spectrally extreme colors
e.g., no cyans/blues at the same time as reds, why?desaturated combinations are better → pastels
§ Opponent colors go well together(red & green) or (yellow & blue)(black & white)
CS 160: 3/9/01 26
Pick Non-adjacent Colors on the Hue Circle
CS 160: 3/9/01 27
Color Guidelines (cont.)§ Size of detectable changes in color varies
Hard to detect changes in reds, purples, & greensEasier to detect changes in yellows & blue-greens
§ Older users need higher brightness levels to distinguish colors
Most TV sets have brightness set too high
§ Hard to focus on edges created by color alone
Use both brightness & color differences)
CS 160: 3/9/01 28
Using Color (cont.)
§ Avoid red & green in the peripheryyellows & blues work well in periphery
§ Avoid pure blue for text, lines, & small shapesblue makes a fine background coloravoid adjacent colors that differ only in blue
§ Avoid single-color distinctionsmixtures of colors should differ in 2 or 3 colors
CS 160: 3/9/01 29
UI Hall of Fame or Shame?
CS 160: 3/9/01 30
Discussion
§ Dialog box seems to use color wellyes (green) and no (red)
§ Problems?R-G color deficiencyCultural mismatch
Western - green good, red badEastern & others – different implication
CS 160: 3/9/01 31
Summary§ Color can be very helpful, but§ Pay attention to
How colors combineHuman perceptionPeople with color deficiency
§ Be sensitive to people with limitationsColor blindnessNear/far sightedFocusing speed