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