Enhancing Information with Color: Best Practices and Considerations

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

2. Example – Use of Colors

3. Using Color • As a formatting aid • Relating elements in groups • Breaking up separate groups • Highlighting important information • As a visual code to identify • Screen elements • Logical structure of ideas, processes, and sequences • Source or status of information

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 the color of its background

12. Color Pairing • Some specific color combinations cause unique problems: • Colors at opposing ends of the spectrum such as red and blue 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 to 4 errors per 1,000 characters read • Low: black on light blue, blue on white • High: magenta on green, green on white

13. Color Combinations to Avoid

14. 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

15. 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 • Use color in a thoughtful and consistent way • Be careful about coloring pairings

16. 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

17. 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

18. 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

19. Color Deficiencies • Types of Color Blindness Normal color vision Deuteranopic color vision