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. 1-6 Using Color Clarification, Relation, and Differentiation Ethernet wires

7. 1-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. 1-11 Color Background The perceived color of an object is affected by the color of its background

12. 1-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. 1-13 Color Combinations to Avoid Saturated yellow and greenSaturated 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. 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. 1-19 Color Deficiencies Types of Color Blindness Normal color visionDeuteranopic color vision