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