CS456: Human Computer Interface
 

Design Principle






Elegance & Simplicity

wpe1.jpg (14605 bytes)
 
 
 
 

The benefits of simplicity are functional as well as aesthetic in nature:

wpe2.jpg (14605 bytes) Principles wpe6.jpg (9902 bytes) wpe7.jpg (8130 bytes)
 
 

Elegance can be achieved by a few rules of thumb:

wpe9.jpg (9291 bytes) "Maximum meaning, minimum means"

------- Abram Games
 
 
 
 

Scale, Contrast and Proportion

Principles
 
 

Common Errors

wpe11.jpg (67844 bytes)
Techniques wpe12.jpg (30856 bytes) Establishing Perceptual Layers
1. Group items into 5 - 9 categorieswpe1A.jpg (742 bytes)  wpe1A.jpg (742 bytes)  wpe1A.jpg (742 bytes)  wpe1A.jpg (742 bytes)  wpe1A.jpg (742 bytes)

2. Rank groups in importance

3. Establish perceptual hierarchies

     wpe1A.jpg (742 bytes)

wpe1B.jpg (742 bytes)       wpe1C.jpg (742 bytes)

wpe1D.jpg (742 bytes)       wpe1E.jpg (742 bytes)

4. Maximize difference between groups

        wpe20.jpg (781 bytes)

wpe1F.jpg (838 bytes)           wpe1E.jpg (742 bytes)

wpe21.jpg (849 bytes)        wpe22.jpg (848 bytes)

5. Minimize difference within groups wpe23.jpg (953 bytes)wpe24.jpg (953 bytes)wpe25.jpg (953 bytes)

Sharpening Visual Distinctions

 1. Distinguish between layers
 2. Use range of variation
wpe12.jpg (30856 bytes)

Integrating Figure and Ground

 1. Figure -- primary formal element
 2. Ground -- background
 3. Both should be equal "weight"
 4. Provide ample space around figure
 5. Correctly center figure in ground
wpeF.jpg (10490 bytes)

Organization and Visual Structure
 

  • Common Errors
  • Principles
  • Techniques
  • Using Symmetry to Ensure Balance
  • Using Alignment to Establish Visual Relationships Optical Adjustment for Human Vision
  • Shaping the Display with Negative Space