Edward Tufte &

Information Design
For the Web

© 2011 NATHAN HUENING sprockethouse.com 12 March 2011 Chapel Hill, NC

Dilbert Another Day in Cubicle Paradise
“ The fundamental task of the
information architect is to
make the information
understandable.
The goal is to clarify.

Richard Saul Wurman Digerati

© 2011 NATHAN HUENING sprockethouse.com 12 March 2011 Chapel Hill, NC

“ Insights into graphical
design are to be gained, I
believe, from theories of
what makes for excellence in
art, architecture, and prose.

The Visual Display of Quantitative Information

© 2011 NATHAN HUENING sprockethouse.com 12 March 2011 Chapel Hill, NC

 Outline

Information design principles

Application to Web design

© 2011 NATHAN HUENING sprockethouse.com 12 March 2011 Chapel Hill, NC

 Tufte’s Information Design Principles

1 Graphics reveal data

2 To clarify, add detail

3 Small multiples invite comparisons

4 “Smallest effective difference”

5 Above all else, show the data

© 2011 NATHAN HUENING sprockethouse.com 12 March 2011 Chapel Hill, NC

Principle 1

Graphics
reveal data

© 2011 NATHAN HUENING sprockethouse.com 12 March 2011 Chapel Hill, NC

“ Often the most effective way
to describe, explore, and
summarize a set of
numbers... is to look at
pictures of those numbers.

Visual Display of Quantitative Information

© 2011 NATHAN HUENING sprockethouse.com 12 March 2011 Chapel Hill, NC

“ Every bit of ink on a graphic
requires a reason. And
nearly always that reason
should be that the ink
presents new information.

Visual Display of Quantitative Information 96

© 2011 NATHAN HUENING sprockethouse.com 12 March 2011 Chapel Hill, NC

Principle 2

To clarify,
add detail

© 2011 NATHAN HUENING sprockethouse.com 12 March 2011 Chapel Hill, NC

“ Information-sensitive designs
are exacting and laborious,
requiring a deep appreciation
of the particular content
at hand.

Visual Explanations 148

© 2011 NATHAN HUENING sprockethouse.com 12 March 2011 Chapel Hill, NC

Principle 3

Small multiples
invite comparisons

© 2011 NATHAN HUENING sprockethouse.com 12 March 2011 Chapel Hill, NC

Tufte iPhone Video:

http://www.edwardtufte.com/
bboard/q-and-a-fetch-msg?
msg_id=00036T
“ Multiple images reveal
repetition and change,
pattern and surprise—the
defining elements in the idea
of information.

Visual Explanations 105

© 2011 NATHAN HUENING sprockethouse.com 12 March 2011 Chapel Hill, NC

Principle 4

The “smallest
effective difference”

© 2011 NATHAN HUENING sprockethouse.com 12 March 2011 Chapel Hill, NC

“ Now what can be eliminated?

Frank Lloyd Wright

© 2011 NATHAN HUENING sprockethouse.com 12 March 2011 Chapel Hill, NC

Principle 5

Above all else,

show the data

© 2011 NATHAN HUENING sprockethouse.com 12 March 2011 Chapel Hill, NC

“ It is all right to decorate
construction, but never
construct decoration.

Robert Venturi Learning from Las Vegas

© 2011 NATHAN HUENING sprockethouse.com 12 March 2011 Chapel Hill, NC

 Tufte’s Information Design Principles

1 Graphics reveal data

2 To clarify, add detail

3 Small multiples invite comparisons

4 “Smallest effective difference”

5 Above all else, show the data

© 2011 NATHAN HUENING sprockethouse.com 12 March 2011 Chapel Hill, NC

 Application to Web Design

1 Design reveals content

2 To clarify, add detail

3 Design from the inside, out

4 Smallest effective difference

5 Above all else, show the content

© 2011 NATHAN HUENING sprockethouse.com 12 March 2011 Chapel Hill, NC

“ Design is largely an exercise
in creating or suggesting
contrasts ... in an effort to
convey meaning.

Andy Rutledge A List Apart

© 2011 NATHAN HUENING sprockethouse.com 12 March 2011 Chapel Hill, NC

Application 1

Design
reveals data

© 2011 NATHAN HUENING sprockethouse.com 12 March 2011 Chapel Hill, NC

Application 1a

Contrast
reveals data

© 2011 NATHAN HUENING sprockethouse.com 12 March 2011 Chapel Hill, NC

Application 1b

Contrast
reveals information

© 2011 NATHAN HUENING sprockethouse.com 12 March 2011 Chapel Hill, NC

Andy Rutledge A List Apart
“ Information consists of
differences that make
a difference.

Envisioning Information 65

© 2011 NATHAN HUENING sprockethouse.com 12 March 2011 Chapel Hill, NC

 1 2
3 4

5 6
Application 2

To clarify,
add detail

© 2011 NATHAN HUENING sprockethouse.com 12 March 2011 Chapel Hill, NC

1 List your bits

2 Figure out which bits relate

3 Assign priorities

4 Design each bit

5 Assemble bits

37Signals An Introduction to Using Patterns in Web Design

Scan annotated
content invent.
Application 3

Employ the smallest

effective difference

© 2011 NATHAN HUENING sprockethouse.com 12 March 2011 Chapel Hill, NC

tutorial9.net
tutorial9.net
Dan Cederholm simplebits.com
Doug Bowman stopdesign.com
“ I’ve never liked the adage Less
is more... I say Less is better,
which is neither cute nor
clever, but almost always true.

John Gruber Independent Days

© 2011 NATHAN HUENING sprockethouse.com 12 March 2011 Chapel Hill, NC

Application 4

Design from the

inside, out

© 2011 NATHAN HUENING sprockethouse.com 12 March 2011 Chapel Hill, NC

Warren Parsons Photo
“ Copywriting is interface
design. Great interfaces are
written. ... Good writing is
good design.

37Signals Getting Real

© 2011 NATHAN HUENING sprockethouse.com 12 March 2011 Chapel Hill, NC

Application 5

Above all else,

show the content

© 2011 NATHAN HUENING sprockethouse.com 12 March 2011 Chapel Hill, NC

“ In an architecture of content,
the information becomes the
interface.

Visual Explanations 146

© 2011 NATHAN HUENING sprockethouse.com 12 March 2011 Chapel Hill, NC

“ Aesthetics matter: attractive
things work better.

Donald Norman Interactions Magazine

© 2011 NATHAN HUENING sprockethouse.com 12 March 2011 Chapel Hill, NC

 Applications to Web Design

1 Design reveals content

2 To clarify, add detail

3 Design from the inside, out

4 Smallest effective difference

5 Above all else, show the content

© 2011 NATHAN HUENING sprockethouse.com 12 March 2011 Chapel Hill, NC

“ ‘Make it look good!’ That’s
not what we think design is.
It’s not just what it looks and
feels like. Design is
how it works.

Steve Jobs NYTimes Magazine

© 2011 NATHAN HUENING sprockethouse.com 12 March 2011 Chapel Hill, NC

Thank you

This has been

a Sprocket House
production.

© 2011 NATHAN HUENING sprockethouse.com 12 March 2011 Chapel Hill, NC