Download Use of Color in Design - Lecture Slides | 547 230 and more Study notes Information Technology in PDF only on Docsity!
ITI 230ITI 230 -- HCIHCI
Lecture #13Lecture
““ Use of Color in DesignUse of Color in Design ””
Dr. Jacek Gwizdka
http://www.scils.rutgers.edu/~jacekg/teaching/
ITI 230 – HCI – © Jacek Gwizdka (^2)
Dilbert & UI ColoursDilbert & UI Colours……
ITI 230 – HCI – © Jacek Gwizdka 3
Iterative Design ProcessIterative Design Process
1. Identify user needs and establish requirements
2. Develop alternative designs
3. Build interactive prototypes – each time more refined
- to evaluate them
- to communicate them to other people (managers, users)
4. Evaluate the prototypes
- with Experts
- with Users
- involving no people
5. Repeat the process… (go to 2)
ITI 230 – HCI – © Jacek Gwizdka 4
Visual Course Outline Visual Course Outline
Future Trends End!
Evaluation w. experts
Lo-Fi & Hi-Fi Prototyping
Conceptual Design
Week 8
Info Design
Week 5
Week 10
Week 7 Week 8
User Needs & Requirements
Evaluation w. users
Color Design
Info Architecture
Week 3 Understanding users – Human Cognition
Week 14 & 15
Evaluation w/o people
Week 4 Data Gathering
Week 6
Design
Evaluate
Prototype / Implement
Requirements Weeks 11…
ITI 230 – HCI – © Jacek Gwizdka (^5)
Why study color? Why study color?
Color can be a powerful tool to improve user
interfaces
Æ but its inappropriate use can severely reduce
user performance and even make user interaction
impossible
ITI 230 – HCI – © Jacek Gwizdka (^6)
Color UsesColor Uses
• Use color to assist in formatting a screen:
- Grouping related elements (same color)
- Breaking apart separate groupings of information (different colors)
- Associating information that is widely separated on the screen (same color)
- Highlighting or calling attention to important information
- pop-out effects (different color)
• Other - Use color to:
- Realistically portray natural objects
- Increase screen appeal
ITI 230 – HCI – © Jacek Gwizdka (^7)
Visible Spectrum Visible Spectrum
ITI 230 – HCI – © Jacek Gwizdka (^8)
Color Dimensions Color Dimensions
- Hue
- property of the wavelengths of light (i.e., “color”)
- Saturation (or chroma)
- purity of the hue - from gray to the most vivid version of the color 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
- Value (or lightness)
- how much light appears to be reflected from a surface
- some hues are inherently lighter or darker
ITI 230 – HCI – © Jacek Gwizdka 9
Color Dimensions (cont.) Color Dimensions (cont.)
- Value (Lightness) • Saturation (Chroma)
from http://www2.ncsu.edu/scivis/lessons/colormodels/color_models2.html#saturation. ITI 230 – HCI – © Jacek Gwizdka 10
Color models Color models
- RGB – Red+Green+Blue
- primary colors
- additive
- used by monitors (nothing = black)
- CMYK – Cyan+Magenta+Yellow+blacK
- complements of the primary colors
- subtractive
- used by printers (nothing = white)
- Hue, Saturation, Value (HSV) model
ITI 230 – HCI – © Jacek Gwizdka (^11)
Color models (cont.)Color models (cont.)
- Hue, Saturation, Value (HSV) model
from http://www2.ncsu.edu/scivis/lessons/colormodels/color_models2.html#saturation. ITI 230 – HCI – © Jacek Gwizdka (^12)
Human Visual SystemHuman Visual System
- Light passes through lens
- Focuses on retina
ITI 230 – HCI – © Jacek Gwizdka (^19)
Color Sensitivity (cont.) Color Sensitivity (cont.)
- As we age
- eye lens yellows & absorbs shorter wavelengths Æ sensitivity to blue is even more reduced
- fluid between lens and retina absorbs more light we perceive a lower level of brightness
- Implications
Blue text on a dark background to be avoided. We have few short- wavelength sensitive cones in the retina and they are not very sensitive. Older users need brighter colors
Blue text on a dark background to be avoided. We have few short- wavelength sensitive cones in the retina and they are not very sensitive. Older users need brighter colors ITI 230 – HCI – © Jacek Gwizdka (^20)
FocusFocus
- Different wavelengths of light focus at different distances behind eye’s lens - need for constant refocusing → causes fatigue - 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 (e.g., stop sign)
ITI 230 – HCI – © Jacek Gwizdka 21
Color great for classification Color great for classification
- Rapid visual segmentation
- Helps determine type
- Only about six categories
white black red
green yellow
yellow green
blue brown
pink purple orange grey
ITI 230 – HCI – © Jacek Gwizdka 22
Color coding/labelingColor coding/labeling
- Large areas: low saturation
- Small areas: high saturation
- Recommended colors for information coding:
- Widely agreed upon names
- First 4 + black & white are unique and mark ends of opponent color axes
- Entire set correspond to most common color names found across cultures
- Choose from set of first six, then from second set of six
ITI 230 – HCI – © Jacek Gwizdka (^23)
Color coding/labeling (cont.) Color coding/labeling (cont.)
The same rules apply to color coding text and other similar information. Small areas can have high saturation colors
Large areas should be coded with low saturation colors
Avoid high saturation colors for large areas
ITI 230 – HCI – © Jacek Gwizdka (^24)
Color guidelinesColor guidelines
- Avoid simultaneous display of highly saturated, spectrally extreme colors - e.g., no cyans/blues at the same time as reds, why? refocusing necessary! - desaturated combinations are better → use pastels
- Opponent colors go well together
- (red & green) or (yellow & blue)
ITI 230 – HCI – © Jacek Gwizdka (^25)
Color guidelines (cont.)Color guidelines (cont.)
- Pick non-adjacent colors on hue circle
ITI 230 – HCI – © Jacek Gwizdka (^26)
Color guidelines (cont.) 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
ITI 230 – HCI – © Jacek Gwizdka 27
Color guidelines (cont.)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 users
ITI 230 – HCI – © Jacek Gwizdka 28
Differences in ColorDifferences in Color Perception & InterpretationPerception & Interpretation
- Color blindness
- Age differences
- Cultural differences
- Domain differences
ITI 230 – HCI – © Jacek Gwizdka (^29)
Color blindness Color blindness
- Trouble discriminating colors
- besets about 9% of population
- Different photo-pigment response
- reduces capability to discern small color differences particularly those of low brightness
- Red-green deficiency is best known
- lack of either green or red photo-pigment → can’t discriminate colors dependent on Red & Green
- Color blind acceptable palette?
- Yellow-blue, and grey variation ok
ITI 230 – HCI – © Jacek Gwizdka (^30)
Cultural Differences Cultural Differences
Green % Red % Yellow % Safe 62.2 Hot 31.1 Caution 44. Go 44.7 Danger 64. On 22.3 Stop 48. Americans Safe 61.4 Hot 94.5 Caution 81. Go 99.2 Danger 89. Stop 100
HK
Chinese
