7 - Terry Winograd - 1 Lecture 7 – Visual Design Terry Winograd CS147 - Introduction to Human- Computer Interaction Design Computer Science Department Stanford University Autumn 2006
CS147 - Terry Winograd - 1
Lecture 7 – Visual Design
Terry WinogradCS147 - Introduction to Human-
Computer Interaction DesignComputer Science Department
Stanford UniversityAutumn 2006
CS147 - Terry Winograd - 2
Learning Goals
•Understand the basic principles of visual design and be able to apply them in analyzing or designing an interface
•Know the goals and techniques of data visualization
CS147 - Terry Winograd - 3
Types of visual presentations
•Interfaces
•Data visualization
CS147 - Terry Winograd - 4
Good Graphics [Mullet & Sano]
• Communication
– Maximum meaning, minimum means
• Elegance
– Maximum of satisfaction from a minimum of components
• Simplicity
– Simple, bold, direct
CS147 - Terry Winograd - 5
Graphic goals
•Approachability
•Recognizeability
•Immediacy
•Usability
•Unity of Form
CS147 - Terry Winograd - 6
Visual language
CS147 - Terry Winograd - 8
CS147 - Terry Winograd - 9
CSS Styles - Zen garden
•www.csszengarden.com
CS147 - Terry Winograd - 10
Visual complexity
CS147 - Terry Winograd - 11
Problems
• Interference
• Structuring elements rather than natural
• Excessive detail or embellishment
• Gratuitous dimensionality
• Visual noise
• Distracting motion
• False structure
CS147 - Terry Winograd - 12
Understand what the Eye does Naturally
•Scanning
•Picking out
•Grouping
•Perceiving motion
CS147 - Terry Winograd - 13
Scanning
A
B
CD
E
F
G
H
I
J
K
L
M
N
OP
QS
R T
U
V W
X Y
Z
Picking out
A
B
CD
E
F
G
H
I
J
K
L
M
N
OP
QS
R T
U
V W
X Y
Z
CS147 - Terry Winograd - 16
Grouping - Gestalt Laws
• Köhler, Koffka, Wertheimer, Berlin 1912• Good shape• Proximity• Closure• Similarity• Continuity• Symmetry• Common Fate
If some words in this text blinked they would seem to belong together.
CS147 - Terry Winograd - 19
Layouts
•The eye craves structure and will seek to impose its own organization onto a design whose structure is not readily apparent. This breakdown threatens communication, since the designer is no longer in control of the message.
CS147 - Terry Winograd - 20
Grid-based layout
An unorganized page that does not use a grid
Same page using a grid
Copyright © Bob HoffmanEncyclopedia of Educational Technology http://coe.sdsu.edu/eet/
CS147 - Terry Winograd - 21
Techniques
•Symmetry
•Alignment
•Optical adjustment for human vision
•Negative space
CS147 - Terry Winograd - 22
Optical Adjustment
On WArn
CS147 - Terry Winograd - 23
Negative Space
Fonts
• Use them sparingly– What should stand out?
• Readability vs. style– Serif fonts
– Sans-serif fonts
• Screen and print are different
CS147 - Terry Winograd - 25
Books on doing visual design for interfaces
• Patterns:– Jenifer Tidwell, Desigining Interfaces
• Guidelines:– Roger Parker, One-minute Designer
• Principles– Robin Williams, The Non-Designer’s
Design Book
CS147 - Terry Winograd - 26
Information Visualization
• Can be 2D (e.g., Powerpoint charts) or 3D.
• Use human perceptual abilities more fully
– Multiple channels (position, size, color,...)
– Gestalt recognition
– Relative values (e.g., size, color, ...)
– Topology (e.g., connection, enclosure)
CS147 - Terry Winograd - 27
Data Visualizations
CS147 - Terry Winograd - 28
Tufte
CS147 - Terry Winograd - 29
Minard
CS147 - Terry Winograd - 30
Fisheye Views
Table Lens
CS147 - Terry Winograd - 32
Perspective Wall
Hyperbolic Browser
Treemap (Shneiderman)
CS147 - Terry Winograd - 35
Cone tree
Visual thesaurus
CS147 - Terry Winograd - 37
The Big Picture - CNET News.com