CS252. User Interface Design

Lecture Outline for Jan. 24
Using Color Effectively

1.   Causes of Variation in Color Response
     Color perception has been shown to be affected by psycho-physical factors:

     Colors are perceived differently according to the surrounding context

     Psychological factors affect visual memory
          memory color:

     Psychological factors affect visual accuracy


2.   Effects of Color on User Tasks
     Color responses affect how well users can perform tasks
     Discrimination and search studies

     Finding an item is fastest if


     Search time is not affected by

     Search time increases if 

     Tracking studies

     Tracking a moving item is fastest if 

     Slowest if

     Personality type affects value of color for recognition

3.   Guidelines for Color Use   Based on Psychological Factors
     See color guideline Web pages for more info
     (1) Vary color along more than one dimension to maximize discrimination. 

     (2) Avoid subtle distinctions in color.

     (3) Juxtapose different colors to be compared, particularly similar ones.

     (4) As the number of colors increases, increase the size of small images. 

     (5) Font and line width are at least as important as color in establishing legibility.

4.   Using Colors as Codes
     Color coding enhances display capabilities

     Uses of color coding

          quantitative differentiation: 

          qualitative differentiation:  indicate characteristics

     Examples of color coding schemes
          Four "psychological primaries" (focal colors) 

          False coding:

          Overloaded colors:

          Redundant cues:

          Cultural effects of color stereotypes [Courtney, 1986]

5.   Guidelines for Color Use   Based on Cognitive Factors
     See color guideline Web pages
     Read these on your own; we won't have time to go over them again
     (1) Use color sparingly. 

     (2) Use the four "focal colors" to encode information that needs to be remembered. 

     (3) Minimize the amount of coding the user is expected to learn and re-learn. 

     (4) "False coding" will confuse and frustrate users. 

     (5) "Overloaded colors" will confuse and frustrate users. 

     (6) Color use must be meaningful and consistent to facilitate searching or tracking. 

     (7) Provide labels or legends with colors when the meaning is not obvious or when
          several meanings must be remembered. 

     (8) Use names, rather than numbers, to describe colors. 

     (9) Use redundant cues to augment color coding. 

     (10) Where possible, match hues with conditions or actions being represented.