1. Yonglei Tao School of Computing & Info Systems GVSU
Ch 9 Colors
Yonglei Tao
School of Computing & Info Systems
GVSU

2. Installing a Car Stereo System

3. Colors Add an additional dimension Draw attention
Support a logical information structure
Clarify differences and similarities and communicate relationships
Make display interesting

4. Using Color
Aid in understanding, remembering, and recalling information
Color-coded dials

5. Using Color
Used to catch user’s attention

6. Using Color Clarification, Relation, and Differentiation
Ethernet wires

7. Color and Performance Color improves performance in tasks Recall
Search-and-locate
Retention
Decision judgment

8. Using Color
Search

9. Color Concerns
It has been found that the colors red, blue, green, and yellow are the most beneficial in learning environments

10. Color Concerns (Cont.) Number of Colors
To remember a color and then recognize it later, we should use only a few distinct colors
To be able to tell the difference between two adjacent color-coded objects, we can use more colors
Interface colors should never distract the user or compete with content

11. Color Background
The perceived color of an object is affected by its background color

12. Color Pairing Some color combinations cause unique problems
Colors at opposing ends of the spectrum require the eye to use two different focal lengths
Positive contrast makes characters appear to glow
A test of 24 color combinations found that error rates ranged from 1-4 errors / 1,000 characters read
Low: black on light blue, blue on white
High: magenta on green, green on white

13. Color Combinations to Avoid
Saturated yellow and green
Saturated yellow on green
Yellow on white
Blue on black
Green on white
Saturated red on blue
Saturated red on green
Magenta on green
Saturated blue on green
Yellow on purple
Red on black
Magenta on black

14. Individual and Cultural Issues
Factors affecting color perception
Culture
Age
Fatigue
Emotions
Light sources
Color deficiency and human subjectivity must be considered important factors in interaction design

15. Normal color vision Deuteranopic color vision
Color Deficiencies
Types of Color Blindness
Normal color vision Deuteranopic color vision

16. Redundant Coding
A clear structure and presentation must already be present before color is used
Studies shows that people are better at search tasks when the targets are coded using more than one parameter, such as color and shape

17. Color Tips Use contrasting colors to emphasize separation
Such as red and green, blue and yellow
Use similar colors to emphasize similarity
Such as orange and yellow, blue and violet.
Use bright colors to attract attention
Use less bright colors to deemphasize elements
Color list from most bright to least bright, white, yellow, green, blue, red.

18. Color Tips (Cont.) Use warm colors to indicate necessary actions
Red, orange, yellow
Use cool colors to show status or background information
Green, blue, violet, purple

19. Color Tips (Cont.) Make default conservative
neutral backgrounds (gray, white, off-white)
dark foreground (black, dark blue)
Limit the number of colors used
four or fewer colors in a window
no more than seven in a system
Use bright colors in small amounts
Allow users to pick their colors
Remember the whole purpose is not to have the user focus on UI, instead it is the job they want to do.

20. Uses of Color to Avoid Relying on color exclusively
Use too many colors in a display or the colors are too bright
May confuse or disturb users
Low-brightness colors for extended viewing
Using color in unexpected ways
Human color perceptions are different.
Associate meanings with particular colors
8-10% of people have color confusion
colors can have cultural and emotional impact
Never overuse colors. Use only enough colors to fulfill the system’s objectives.
By convention, red is associated with stop or danger. To display a critical or error message in green would violate the convention and cause confusion. Always use colors in the way people expect them to be used.