CS252. User Interface Design

Lecture Outline for Jan. 26
Applying Color Guidelines

1.   Potential Problems in Using Color
     Why color is good for coding images

     Why color can be bad

     Letting users specify arbitrary RGB values is a dangerous way to support customization

     Alternative ways to support user preferences

     Example:  PowerPoint (Microsoft presentation slide toolkit)

     Objective should be to present reasonable alternatives, not necessarily full latitude

2.     What Are Design Guidelines?
     Two types of guidelines: principles and design rules
     Design rules


     Both types are needed
       induction    specific, detailed guidelines      

       deduction    fundamental, general guidelines    

     Interface designer must understand both

     Example [derived from Brown & Cunninham 1989]
         The main function of the user interface is communication
         1. A good interface keeps the computer from coming between the user and the work
          1a.  The interface must be consistent
         2. A good interface keeps the user aware of what is going on in the task
          2a.  The interface should provide regular feedback to the user
     design rules
         For 1a (consistency)
          Make the interface work like others similar to it
          Make all parts of the interface work alike
         For 2a (user awareness)
          Let the user know when something time-consuming is going on
          Make online help available to explain what the program is doing

     There are usually tradeoffs involved in applying guidelines

     Guidelines are most useful when they include

     The ones on the Website include "explanation" and "example"

3.     Examples of Guidelines:  Best and Worst Color Combinations
     Gerald Murch's (1984) work in color combinations for lines and text (see color handout)
     Also available as "guidelines on color combinations" on Web pages


     In fact, color may be less important than font choice

     CS252 recommended font choices: