Color

caig.cs.nctu.edu.tw
  • No tags were found...

Color

Human Computer Interaction7. Color (A)National Chiao Tung Univ, TaiwanBy: I-Chen Lin, Assistant Professor


Objectives• Color can be a powerful tool to improveuser interfaces, but its inappropriate usecan severely reduce the performance ofthe systems we build.Refer to HCI lecture notes: “Human Ability”, Professor James Landay, UCB


Visible Spectrum


Human Visual System• Light passes through lens• Focused on retina


Retina• Retina covered with light-sensitive iti 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


Retina• Center of retina has most of the cones • allows for high acuity of objects focused at center• Edge of retina is dominated by rods • allows detecting motion of threats in periphery


Color Perception via Cones• Photopigments” used to sense color• 3 types: blue, green, “red” (really yellow)• each sensitive to different bands of spectrum• ratio of neural activity of the 3 → color• other colors are perceived by combining stimulationhttp://www.normankoren.com


Color Sensitivityhttp://insight.med.utah.edu/Webvision/index.html


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


Color Sensitivity & ImageDetection• Most sensitive to the center of the spectrum• blues & reds must be brighter than greens &yellows• Biht Brightness determined d mainly by R+G• Shapes detected by finding edges• combine brightness & color differences forsharpness• Implications?• hard to deal with blue edges & blue shapes


Color Sensitivity (cont.)• As we age• lens yellows & absorbs shorter wavelengths • sensitivity to blue is even more reduced• fluid between lens and retina absorbs b more light• perceive a lower level of brightness• Implications?• don’t rely on blue for text t or small objects!• older users need brighter colors


Focus• Different wavelengths of light focused atdifferent distances behind eye’s lens• need for constant refocusing →• causes fatigue• be careful about color combinationsi• Pure (saturated) colors require more focusingthen less pure (desaturated)d ’ d l i UI l ll• don’t use saturated colors in UIs unless you reallyneed something to stand out (stop sign)


Color Components• Hue• property of the wavelengths of light (i.e., “color”)• Lightness (or value)• how much light appears to be reflected from asurface• 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 saturationti


Color Components (cont.)lightnessSaturationhttp://www2.ncsu.edu/scivis/lessons/colormodels/color_models2.html#saturation.


Color Components (cont.)H∈[0 .. 360]; S, V, R, G, B ∈ [0, 1]MAX = max (R, G, B); MIN = min(R, G, B)


Color Components (cont.)Hue, Saturation, Value model (HSV)http://en.wikipedia.org/wiki/HSV p _ color_ space


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• Opponent colors go well together• (red & green) or (yellow & blue)


Color Guidelines (cont.)• Older users need higher brightness levels todistinguish colors• Hard to focus on edges created by color alone?• use both brightness & color differenceshttp://www.lighthouse.org/color_contrast.htmorg/color contrast htm


Color Guidelines (cont.)• Avoid choosing colors from the same sides.• Avoid choosing adjacent colorshttp://www.lighthouse.org/color_contrast.htm


Color Guidelines (cont.)• Avoid red & green in the periphery -why?h?• lack of RG cones there -- yellows & blues work inperiphery• 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 i observers


Color Scheme Toolshttp://wellstyled.com/tools/colorscheme2/index-en.html

More magazines by this user
Similar magazines