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

Installing a Car Stereo System

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

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

Using Color Used to catch user’s attention

Using Color Clarification, Relation, and Differentiation Ethernet wires

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

Using Color Search

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

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

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

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

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

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

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

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

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.

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

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.

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.