Edward Tufte and Information Design for the Web

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


“ 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


Outline

Information design principles

Application to Web design


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


Principle 1

Graphics
reveal data


“ 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


“ 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


Principle 2

To clarify,
add detail


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

Visual Explanations 148


Principle 3

Small multiples
invite comparisons


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.



Principle 4

The “smallest
effective difference”


“ Now what can be eliminated?

Frank Lloyd Wright


Principle 5

Above all else,
show the data


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

Robert Venturi Learning from Las Vegas


Application to Web Design

1 Design reveals content


3 Design from the inside, out

4 Smallest effective difference

5 Above all else, show the content


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

Andy Rutledge A List Apart


Application 1

Design
reveals data


Application 1a

Contrast
reveals data


Application 1b

Contrast
reveals information


“ Information consists of
differences that make
a difference.

Envisioning Information 65


Application 2

To clarify,
add detail


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


“ 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


Application 4

Design from the
inside, out


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

37Signals Getting Real


Application 5

Above all else,
show the content


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



“ Aesthetics matter: attractive
things work better.

Donald Norman Interactions Magazine


Applications to Web Design

1 Design reveals content


3 Design from the inside, out

4 Smallest effective difference

5 Above all else, show the content


“ ‘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


Thank you

This has been
a Sprocket House
production.


Edward Tufte and Information Design for the Web

More Related Content

What's hot

Similar to Edward Tufte and Information Design for the Web

Recently uploaded

Edward Tufte and Information Design for the Web