Lecture 11:
Visual Design Principles
March 8
Spring 2010
CMSC 434 Introduction to Human Computer Interaction
1
Spring 2010
CMSC 434 Introduction to Human Computer Interaction
2
phong.com
Spring 2010
CMSC 434 Introduction to Human Computer Interaction
3
Goals of visual design
•  Help users find their way
–  Learnability
–  Memory
–  Few errors
–  Efficient
•  Provide a distinct look and feel
–  Satisfaction
Spring 2010
CMSC 434 Introduction to Human Computer Interaction
4
Topics
• 
• 
• 
• 
Color
Contrast
Grouping
Simplicity
Spring 2010
CMSC 434 Introduction to Human Computer Interaction
5
Color
Spring 2010
CMSC 434 Introduction to Human Computer Interaction
6
Color Guidelines
•  Avoid saturated colors
–  Use pastel colors
•  Be consistent with expectations
–  Red means bad, green means go
•  Use few colors
–  Too many colors look complex, cluttered,
distracting
•  Avoid colors causing chromatic
Spring 2010
CMSC 434 Introduction to Human Computer Interaction
7
Chromatic aberration
•  Different wavelengths focus differently
•  E.g., red & blue can’t be focused
simultaneously
Is this sentence easy to read?
Is this sentence easy to read?
Spring 2010
CMSC 434 Introduction to Human Computer Interaction
8
Contrast
Spring 2010
CMSC 434 Introduction to Human Computer Interaction
9
Techniques for Contrast
•  Manipulate appropriate visual variables
•  Visual variables:
–  Brightness
–  Hue
–  Texture
–  Shape
–  Position
–  Orientation
–  Size
Spring 2010
CMSC 434 Introduction to Human Computer Interaction
10
Why contrast?
•  Users need to select an item of a
particular value (selectivity).
•  Users need to compare items with
different values (comparability).
•  When there are multiple dimensions,
users need the flexibility to ignore one
dimension (disassociativity).
Spring 2010
CMSC 434 Introduction to Human Computer Interaction
11
Techniques for Contrast
•  Manipulate appropriate visual variables
•  Visual variables:
–  Brightness
–  Hue
–  Texture
–  Shape
–  Position
–  Orientation
–  Size
Spring 2010
CMSC 434 Introduction to Human Computer Interaction
12
Techniques for Contrast
•  Manipulate appropriate visual variables
•  Visual variables:
–  Brightness
–  Hue
–  Texture
–  Shape
–  Position
–  Orientation
–  Size
Spring 2010
CMSC 434 Introduction to Human Computer Interaction
13
Techniques for Contrast
•  Manipulate appropriate visual variables
•  Visual variables:
–  Brightness
–  Hue
–  Texture
–  Shape
–  Position
–  Orientation
–  Size
Spring 2010
CMSC 434 Introduction to Human Computer Interaction
14
Techniques for Contrast
•  Manipulate appropriate visual variables
•  Visual variables:
–  Brightness
–  Hue
–  Texture
–  Shape
–  Position
–  Orientation
–  Size
Spring 2010
CMSC 434 Introduction to Human Computer Interaction
15
Techniques for Contrast
•  Manipulate the value of visual variables
•  Visual variables:
–  Brightness
–  Hue
–  Texture
–  Shape
–  Position
–  Orientation
–  Size
Spring 2010
CMSC 434 Introduction to Human Computer Interaction
16
Techniques for Contrast
•  Manipulate appropriate visual variables
•  Visual variables:
–  Brightness
–  Hue
–  Texture
–  Shape
–  Position
–  Orientation
–  Size
Spring 2010
CMSC 434 Introduction to Human Computer Interaction
17
Techniques for Contrast
•  Manipulate appropriate visual variables
•  Visual variables:
–  Brightness
–  Hue
–  Texture
–  Shape
–  Position
–  Orientation
–  Size
Spring 2010
CMSC 434 Introduction to Human Computer Interaction
18
•  Brightness
•  Hue
•  Texture
•  Shape
•  Position
•  Orientation
•  Size
Spring 2010
CMSC 434 Introduction to Human Computer Interaction
19
•  Brightness
•  Hue
•  Texture
•  Shape
•  Position
•  Orientation
•  Size
Spring 2010
CMSC 434 Introduction to Human Computer Interaction
20
•  Brightness
•  Hue
•  Texture
•  Shape
•  Position
•  Orientation
•  Size
Spring 2010
CMSC 434 Introduction to Human Computer Interaction
HCI
21
Spring 2010
CMSC 434 Introduction to Human Computer Interaction
22
•  Brightness
•  Hue
•  Texture
•  Shape
•  Position
•  Orientation
•  Size
Spring 2010
CMSC 434 Introduction to Human Computer Interaction
23
•  Maximizes range
•  Minimize levels
•  Why?
Spring 2010
CMSC 434 Introduction to Human Computer Interaction
24
Simplicity
"Simplicity is the ultimate sophistication."
Leonardo Da Vinci.
Spring 2010
CMSC 434 Introduction to Human Computer Interaction
25
Techniques for simplicity
•  Reduce
–  Hide or remove inessential component
•  Regularize
–  Limit inessential variations
•  Double-duty
–  Make a component to play multiple roles
•  Organize
–  Arrange controls in logical groups
Spring 2010
CMSC 434 Introduction to Human Computer Interaction
26
Reduce
Spring 2010
CMSC 434 Introduction to Human Computer Interaction
27
Regularize
Spring 2010
CMSC 434 Introduction to Human Computer Interaction
28
Double-duty
Spring 2010
CMSC 434 Introduction to Human Computer Interaction
29
Organize
Spring 2010
CMSC 434 Introduction to Human Computer Interaction
30
How does Google simplify
search?
Spring 2010
CMSC 434 Introduction to Human Computer Interaction
31
Grouping
Spring 2010
CMSC 434 Introduction to Human Computer Interaction
32
Gestalt principles
• 
• 
• 
• 
• 
• 
• 
Proximity
Similarity
Continuity
Closure
Figure and background
Symmetry
Common fate
Fancy way of saying “grouping”
Spring 2010
CMSC 434 Introduction to Human Computer Interaction
33
Proximity
Similarity
Continuity
Closure
Spring 2010
Figure and background
Symmetry
Common fate
CMSC 434 Introduction to Human Computer Interaction
34
Proximity
Similarity
Continuity
Closure
Spring 2010
Figure and background
Symmetry
Common fate
CMSC 434 Introduction to Human Computer Interaction
35
Proximity
Similarity
Continuity
Closure
Spring 2010
Figure and background
Symmetry
Common fate
CMSC 434 Introduction to Human Computer Interaction
36
Proximity
Similarity
Continuity
Closure
Spring 2010
Figure and background
Symmetry
Common fate
CMSC 434 Introduction to Human Computer Interaction
37
Proximity
Similarity
Continuity
Closure
Spring 2010
Figure and background
Symmetry
Common fate
CMSC 434 Introduction to Human Computer Interaction
38
Proximity
Similarity
Continuity
Closure
Spring 2010
Figure and background
Symmetry
Common fate
CMSC 434 Introduction to Human Computer Interaction
39
Proximity
Similarity
Continuity
Closure
Spring 2010
Figure and background
Symmetry
Common fate
CMSC 434 Introduction to Human Computer Interaction
40
Proximity
Similarity
Continuity
Closure
Spring 2010
Figure and background
Symmetry
Common fate
CMSC 434 Introduction to Human Computer Interaction
41