Edward Tufte
Overview
•
•
Who is he?
Why should we listen to him?
•
Tufte’s Big Ideas
::
::
::
::
::
Enforce Visual Comparisons
Show Causality
Show Multivariate Data
Integrate all visual elements (words, numbers, images)
Content-Driven Design
Jon Kolko
Savannah College of Art & Design
IDUS370 - Information Architecture | 1
Who is he?
IDUS370 - Information Architecture | 2
Why should we listen to him?
His work speaks volumes
about his talent
He is a domain specialist
There aren’t many
alternatives
Edward Tufte :: www.edwardtufte.com/
Professor at Yale, Statistical Evidence
Author
IDUS370 - Information Architecture | 3
Tufte’s Big Ideas
IDUS370 - Information Architecture | 4
Tufte’s Big Ideas : “5 grand principles”
Central, general issues with displaying data:
1. Enforce Visual Comparisons
:: Flatland (two dimensional world), and how to escape it
:: The really interesting data is almost always “multivariate”
:: Whitespace is a good thing
“Available resolution for displays of information isn’t
adequate for quantity and richness of information”
2. Show Causality
3. Show Multivariate Data
4. Integrate all visual elements (words, numbers, images)
5. Content-Driven Design
What does this mean?
IDUS370 - Information Architecture | 5
IDUS370 - Information Architecture | 6
1
Tufte’s Big Ideas : “5 grand principles”
1. Enforce Visual Comparisons
Tufte’s Big Ideas : “5 grand principles”
2. Show Causality
We can draw conclusions easier by
comparing data
Causality: one thing makes another
thing occur
Visual comparison is faster and easier
than mathematical or conceptual
comparison
Causality in a graph enhances and
reinforces the meaning of the content
Graphs without causality often leave us
wondering what the point is
Use thickness, color, weight to emphasize
visual comparisons
When possible, show comparisons
adjacent in space rather than over time
IDUS370 - Information Architecture | 7
Tufte’s Big Ideas : “5 grand principles”
3. Show Multivariate Data
IDUS370 - Information Architecture | 8
Tufte’s Big Ideas : “5 grand principles”
4. Integrate all visual elements (words,
numbers, images)
Try to show data on more than two
dimensions, enhancing the meaning and
point of the graph
Try to include images, text and numbers
where visually appropriate, instead of
pushing all contextual information to the
“legend”
Data with multiple variables enhances the
viewing experience, drawing the user in
Don’t make the user learn your “system”
Don’t bring your work to the level of the
user – bring the user to the level of the
work
How does this oppose basic HCI
principles?
IDUS370 - Information Architecture | 9
Tufte’s Big Ideas : “5 grand principles”
IDUS370 - Information Architecture | 10
Tufte’s Big Ideas, illustrated
5. Content-Driven Design
DesignMultivariate
Enforce
Show
Integrate
Causality
should
Visual
Words,
be
Comparisons
Content
Numbers
Data
& Images
Driven
Army size,
Width
Temperature
of lines
location,
records
give you
direction,
and
a clear,
blatant
geographic
time,
Information
The
poster
temperature
understanding
is
location
isdesigned
provided
information
as an
show thatposter,
contextually
anti-war
this
throughout
battle
and the
wasthe
lost
before any
graph
designer
was
fighting
clearlyensued
passionate
about the information
Good information design will never save
poor content!
:: Quality. If the data is wrong to
begin with, the designer is already
dead in the water.
:: Relevance. Why are you
presenting the information, and for
whom? If you are passionate about
the topic, your interest will be clear to
your audience.
:: Integrity. Don’t use your graphs
to lie, push an agenda, or otherwise
manipulate the viewer.
500,000 men left Kalvaria in June, 1812.
IDUS370 - Information Architecture | 11
20,000 men remained in Beresina in November, 1812.
IDUS370 - Information Architecture | 12
2
Tufte : Using Graphs to Lie
Tufte : Using Graphs to Lie
:: A “lie-factor” (visual % / actual %) exaggerates differences or similarities
:: Use area of volume instead of linear
scales to exaggerate differences
Actual increase in mileage: 53%
Visual increase in mileage: 783%
Lie Factor: 14.8
IDUS370 - Information Architecture | 13
Tufte : Using Graphs to Lie
IDUS370 - Information Architecture | 14
Tufte : Data-Ink Ratio
:: Exaggerate or changing the scale in mid-graph
“Data” Ink
Total Ink
= Data Ink Ratio
Increase data-ink ratio by:
:: Avoid heavy grids
:: Use whitespace to indicate
gridlines
:: Erase non-data ink
:: Remove dropshadows, boxes,
pointers, redundant legends, and
other extraneous crap
Looks like a linear salary increase ...
… Actually an exponential increase!
IDUS370 - Information Architecture | 15
Tufte : Data Density
# of data points
Area of image
IDUS370 - Information Architecture | 16
Tufte : Chartjunk
Decorative elements that provide no data and cause confusion
= Data Density
Increase data-density ratio by:
:: Increasing data-ink ratio
:: Including more data points
(use small multiples)
:: Including more variables
IDUS370 - Information Architecture | 17
IDUS370 - Information Architecture | 18
3
Tufte : Chartjunk
Tufte : Chartjunk
IDUS370 - Information Architecture | 19
Tufte : Chartjunk
IDUS370 - Information Architecture | 20
Tufte : Chartjunk
IDUS370 - Information Architecture | 21
When Charts Fail
IDUS370 - Information Architecture | 22
When Charts Fail : The Challenger
1986.
On Jan 28, 1986, at 11.38 am EST, the space shuttle
Challenger was launched from Cape Canaveral, Florida.
The mission ended 73 seconds later when the
Challenger exploded.
All 7 crew members were killed.
How could this happen?
IDUS370 - Information Architecture | 23
IDUS370 - Information Architecture | 24
4
When Charts Fail : The Challenger
When Charts Fail : The Challenger
This is one of several
graphs reviewed before
deciding to launch the
shuttle.
Do you see any
correlation between
temperature and
previous incidents?
IDUS370 - Information Architecture | 25
When Charts Fail : The Challenger
IDUS370 - Information Architecture | 26
When Charts Fail : The Challenger
This is the same chart,
but with every launch
added to the graph
instead of just the
problematic launches.
Things we now know, after the fact:
:: O-ring resiliency is directly related to its temperature.
:: A warm O-ring that has been compressed will return to
its original shape much quicker than will a cold O-ring
when compression is relieved. Thus, a warm O-ring will
follow the opening of the tang-to-clevis gap. A cold Oring may not.
Now do you see any
correlation between
temperature and
previous incidents?
:: A compressed O-ring at 75 degrees Fahrenheit is five
times more responsive in returning to its uncompressed
shape than a cold O-ring at 30 degrees Fahrenheit.
It was 36 degrees on
the day of the launch!
IDUS370 - Information Architecture | 27
When Charts Fail : The Challenger
IDUS370 - Information Architecture | 28
Summary
What if this was the chart shown to decision makers before the launch?
IDUS370 - Information Architecture | 29
•
•
Who is he?
Why should we listen to him?
•
Tufte’s Big Ideas
::
::
::
::
::
Enforce Visual Comparisons
Show Causality
Show Multivariate Data
Integrate all visual elements (words, numbers, images)
Content-Driven Design
IDUS370 - Information Architecture | 30
5