Post on 20-Dec-2015
transcript
A (Uncolorful) Lecture on Color for UI’s
Use of Color in UI Design (not ready for distribution)
laura leventhal
Reference
• Chapter 14Chapter 14
Introduction
• Color is increasingly important in interface design, especially in the design of interfaces with visual elements.
Color vision
• We have already skirted around the topic of color vision.
• Although about 8000 different colors can be distinguished comparatively, only 8 to 10 different colors can be identified accurately without training when viewed in isolation by a person with normal color vision.
Color Vision (2)
• People’s sensitivity to color is not uniform across their field of view. The eye is not sensitive to color at the periphery of vision.
– The eye is the least sensitive to red, green and yellow light at the periphery of color vision and most sensitive to blue light.
– The retina is not equally sensitive to all colors - it is best adapted to the perception of yellow-green light, and color is only well perceived in fovea (central) vision.
• Color perceptions are affected by fatigue. Prolonged exposure to one color like red causes the receptors to red to fatigue and we see images in green
• HCI Consequence – staring at image in one color may cause fatigue on that color so if that color is important to the meaning of the presentation, the user may start to see after images or other unintended colors.
Edges
• To see form, must have edges. Edges are signaled by a changes in color, brightness or both
• [Demo]
Demo/Edges
Edges are 'created' by a difference in brightness...
color.... or both
Color Terms - Hue
• Hue– what most people mean by 'color'. – The aspect of color most closely related to its
wavelength. Red through violet.
Color Terms - Saturation
• Saturation – Amount of 'noise' (black or white) added to
pure color. – Black, white and gray are completely
destaturated colors (called neutrals)
Color Terms - Lightness/Intensity
• Lightness/Intensity – Amount of light reflected by the object, usually
due to changes in hue and saturation
Color Terms - Brightness
• Brightness– Amount of illumination from external source. – E.g., jeans in sun vs. interior light vs. dark
Color Effects - Surrounding Color1
• Effects of surrounding color:– background colors influence color of object – [Two Demos]
Color Effects - Surrounding Color2
The same color can appear different depending on what other colors surround it.
Color Effects - Surrounding3
Color Effects - Surrounding Color4
• contrast: – gray letters on light background appear dark,
but on dark background, appear light
• bleeding: – colored area takes on color of surround
Contrast Demo (1)
TOO MUCH CONTRAST
TOO LITTLE CONTRAST
Contrast Demo (2)
STILL TOO MUCH CONTRAST
STILL TOO LITTLE CONTRAST
THIS IS PRETTY GOOD.
Contrast Demo (3)
Changes in both color and brightness result in better contrast than just a change in color or brightness
Why is color application difficult?
• Color interacts with its surroundings– - within a window– - between windows– - dynamic displays
Why is color application difficult
• External conditions affect perception– ambient light– display hardware/software characteristics
• e.g., what we can display on color monitor is less than half of visible colors
Why is color application difficult
• Individual differences in perception related to physiology and culture– age– color blindness
Why is color application difficult
• Cultural significance of color– e.g., in some cultures white signifies death and
in other cultures, white is associated with light and purity
• Psychological and learned associations to color
Why is color application difficult
• Color theory and design is complex
• Color preference is very personal
What *can* be done with color?
• Use color to impart information– can be redundant or the only source of
information • Example: color coding age of files
What can be done with color
• Can summarize data – e.g., scientific visualization
• Color as a mnemonic: – Pepto Bismol, Kodak, Coke products
What can be done with color
• Establish an environment or aesthetic (feeling)– e.g., desktops
• Color may a critical component of the task e.g., graphic design
Some Heuristics (1)
Warm colors bring objects closer Cool colors make the object retreat and make them appear larger. and seem smaller.
Some Heuristics (2)
Colors look best against a neutral background.
Some Heuristics (3)
Light blue letters are hard to see. So is any small blue object.
Beware of blue. It is difficult to distinguish
(the message says “light blue letters are hard to see. So aresmall blue objects.”)
Some Heuristics (4)
Don't use color as a critical clue for small objects. Color is hard to distinguish in small areas.
What color are these dots??
Some Heuristics (5)
Choose palettes of related colors and work within that palette. Better yet, get guidance on colors!
Related warm colors
Related cool colors
Some Heuristics (6)
Avoid intense combinations
Some Heuristics (7)
Four or fewer colors is preferred - even if the colors are related.
Color Matters Web Site
• A web site for a graphic designer
• http://www.lavanet/~colorcom