Color, Vision, & Perception. Outline

Transcription

1 Color, Vision, & Perception CS 160, Fall 97 Professor James Landay September 24, /24/97 1 Outline Administrivia Review Human visual system Color perception Color deficiency Guidelines for design Coding information Task analysis homework 9/24/97 2 landay 1

2 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. 9/24/97 3 Visible Spectrum 9/24/97 4 landay 2

3 Human Visual System Light passes through lens Focussed on retina 9/24/97 5 Retina Retina covered with light-sensitive receptors rods» primarily for night vision & perceiving movement» sensitive to broad spectrum of light» can t discriminate between colors» sense intensity or shades of gray cones» used to sense color Center of retina has most of the cones allows for high acuity of objects focused at center 9/24/97 6 Edge of retina is dominated by rods landay 3

4 Retina 9/24/97 7 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 Optic nerves sends to lateral geniculate body LGB re-codes and sends to brain as» R-G gives red or green color perception» R+G gives perception of brightness & yellow (Y)» Y-B gives yellow or blue color perception 9/24/97 8 landay 4

5 Color Sensitivity Really yellow from: 9/24/97 9 Distribution of Photopigments Not distributed evenly mainly reds (64%) & very few blues (4%)» insensitivity to short wavelengths cyan to deep-blue» high sensitivity to long wavelengths yellow & orange Center of retina (high acuity) has no blue cones Implications? 9/24/97 10 landay 5

6 Distribution of Photopigments Not distributed evenly mainly reds (64%) & very few blues (4%)» insensitivity to short wavelengths cyan to deep-blue» high sensitivity to long wavelengths yellow & orange Center of retina (high acuity) has no blue cones Implications?» disappearance of small blue objects you fixate on 9/24/97 11 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 expressed on a scale of luminance» light energy corrected for wavelength sensitivity Shapes detected by finding edges combine brightness & color differences for sharpness Implications? hard to deal w/ blue edges & shapes 9/24/97 12 landay 6

7 As we age Color Sensitivity (cont.) lens yellows» absorbs the shorter wavelengths» sensitivity to blue is reduced fluid between lens and retina absorbs more light» perceive a lower level of brightness Implications? don t rely on blue for text/objects! 9/24/97 13 Focus Different wavelengths of light focused at different distances behind eye s lens need for constant refocusing???? causes fatigue careful about color combinations Red objects appear closer than blue objects Pure (saturated) colors require more focusing then less pure (desaturated) 9/24/97 14 landay 7

8 Color Deficiency (also known as color blindness ) Trouble discriminating colors besets about 9% of population Different photopigment response most common reduces capability to discern small color differences» particularly those of low brightness Red-green deficiency is best known lack of either green or red photopigment? can t discriminate colors dependent on R & G 9/24/97 15 Hue Color Components property of the wavelengths of light (i.e., color) Lightness amount of white or black in the color some hues are inherently lighter or darker Saturation purity 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 9/24/97 16 landay 8

9 Illusions (not color) Can you guess the woman s age? Keep looking. 9/24/97 17 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 Avoid pure blue for text, lines, & small shapes blue makes a fine background color Avoid adjacent colors that differ only in blue 9/24/97 18 landay 9

10 Color Guidelines (cont.) Magnitude of detectable changes in color varies difficult 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 and color differences 9/24/97 19 Coding Information with Color Color can aid in searching if used sparingly searching for highlights or grouping distant items» superior to shape, brightness, size, & typeface e.g., hypertext links in green (blue is bad!) Use familiar color coding red for hot, dangers, cautions, & warnings» watch for cultural conflicts (e.g., red in Asian culture) Be consistent in use of color codes & limit num. five makes codes easy to remember & predictable 9/24/97 20 landay 10

11 Color Coding (cont.) Use redundant signals don t rely on color alone to discriminate items Yellow/green hues give the best acuity should be used for critical information Coding qualitative vs. quantitative data use differing hues for qualitative data use continuous variation for quantitative data» e.g., frequency or brightness 9/24/97 21 Summary Color can be very helpful, but Pay attention to how colors combine human perception people with color deficiency 9/24/97 22 landay 11