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