Edward Tufte & Information Design For the Web
© 2 0 1 1 N AT H A N H U E N I N G
1 2 M a rc h 2 01 1
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 © 2 0 1 1 N AT H A N H U E N I N G
1 2 M a rc h 2 01 1
“
Insights into gr graphical aphical 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 © 2 0 1 1 N AT H A N H U E N I N G
1 2 M a rc h 2 01 1
Outline
Information design principles Application to Web design
© 2 0 1 1 N AT H A N H U E N I N G
1 2 M a rc h 2 01 1
Tufte’s Information Design Principles
1 Graphics reveal data 2 To clarify, add detail 3 Small multiples invite comparisons 4 “Smallest effective difference” 5 Abov Above e all else, els e, show the data
© 2 0 1 1 N AT H A N H U E N I N G
1 2 M a rc h 2 01 1
Principle 1
Graphics reveal data
© 2 0 1 1 N AT H A N H U E N I N G
1 2 M a rc h 2 01 1
“
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 © 2 0 1 1 N AT H A N H U E N I N G
1 2 M a rc h 2 01 1
“
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 © 2 0 1 1 N AT H A N H U E N I N G
1 2 M a rc h 2 01 1
96
Principle 2
To clarify, add detail
© 2 0 1 1 N AT H A N H U E N I N G
1 2 M a rc h 2 01 1
“
Information-sensitive designs Information-sensitive are exacting and laborious, requiring a deep appreciation of the particular content at hand.
Visual Explanations 148 © 2 0 1 1 N AT H A N H U E N I N G
1 2 M a rc h 2 01 1
Principle 3
Small multiples invite comparisons
© 2 0 1 1 N AT H A N H U E N I N G
1 2 M a rc h 2 01 1
Tufte iPhone Video:
“
Multiple images reveal repetition and change, pattern and surprise the defining elements in the idea of information of information..
Visual Explanations 105 © 2 0 1 1 N AT H A N H U E N I N G
1 2 M a rc h 2 01 1
Principle 4
The “smallest effectiv ef fective e difference”
© 2 0 1 1 N AT H A N H U E N I N G
1 2 M a rc h 2 01 1
“
Now what can be eliminated?
Frank Lloyd Wright © 2 0 1 1 N AT H A N H U E N I N G
1 2 M a rc h 2 01 1
Principle 5
Above all else, show the data
© 2 0 1 1 N AT H A N H U E N I N G
1 2 M a rc h 2 01 1
“
It is all right to decorate construction, but never construct decoration.
Robert Venturi Learning from Las Vegas © 2 0 1 1 N AT H A N H U E N I N G
1 2 M a rc h 2 01 1
Tufte’s Information Design Principles
1 Graphics reveal data 2 To clarify, add detail 3 Small multiples invite comparisons 4 “Smallest effective difference” 5 Abov Above e all else, els e, show the data
© 2 0 1 1 N AT H A N H U E N I N G
1 2 M a rc h 2 01 1
Application to Web Web Design
1 Design reveals content 2 To clarify, add detail 3 Design from the inside, out 4 Smallest effective difference 5 Abov Above e all else, els e, show the content
© 2 0 1 1 N AT H A N H U E N I N G
1 2 M a rc h 2 01 1
“
Design is largely an exercise in creating or suggesting contrasts contr asts ... in an effort ef fort to convey meaning.
Andy Rutledge A List Apart © 2 0 1 1 N AT H A N H U E N I N G
1 2 M a rc h 2 01 1
Application 1
Design reveals data
© 2 0 1 1 N AT H A N H U E N I N G
1 2 M a rc h 2 01 1
Application 1a
Contrast reveals data
© 2 0 1 1 N AT H A N H U E N I N G
1 2 M a rc h 2 01 1
Application 1b
Contrast reveals information
© 2 0 1 1 N AT H A N H U E N I N G
1 2 M a rc h 2 01 1
Andy Rutledge A List Apart
“
Information consists of differences that make a differenc dif ference. e.
Envisioning Information 65 © 2 0 1 1 N AT H A N H U E N I N G
1 2 M a rc h 2 01 1
5
1
2
3
4
6
Application 2
To clarify, add detail
© 2 0 1 1 N AT H A N H U E N I N G
1 2 M a rc h 2 01 1
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
© 2 0 1 1 N AT H A N H U E N I N G
1 2 M a rc h 2 01 1
tutorial9.net
tutorial9.net
Dan Cederholm simplebits.com
Doug Bowman stopdesign.com
“
I’ve never liked the adage Less is more... more... I say Less is better , which is neither cute nor clever, but almost always true.
John Gruber Independent Days © 2 0 1 1 N AT H A N H U E N I N G
1 2 M a rc h 2 01 1
Application 4
Design from the inside,, out inside
© 2 0 1 1 N AT H A N H U E N I N G
1 2 M a rc h 2 01 1
Warren Parsons Photo
“
Copywriting is interface design. Great interfaces are written. ... Good writing is good design.
37Signals Getting Real © 2 0 1 1 N AT H A N H U E N I N G
1 2 M a rc h 2 01 1
Application 5
Above all else, show the content
© 2 0 1 1 N AT H A N H U E N I N G
1 2 M a rc h 2 01 1
“
In an architecture of content, content, the information becomes the interface.
Visual Explanations 146 © 2 0 1 1 N AT H A N H U E N I N G
1 2 M a rc h 2 01 1
“
Aesthetics matter: attractive things work better.
Donald Norman Interactions Magazine © 2 0 1 1 N AT H A N H U E N I N G
1 2 M a rc h 2 01 1
Applications to Web Design
1 Design reveals content 2 To clarify, add detail 3 Design from the inside, out 4 Smallest effective difference 5 Abov Above e all else, els e, show the content
© 2 0 1 1 N AT H A N H U E N I N G
1 2 M a rc h 2 01 1
“
‘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. works.
Steve Jobs NYTimes Magazine © 2 0 1 1 N AT H A N H U E N I N G
1 2 M a rc h 2 01 1
Thank you
This has been a Sprocket House production.
© 2 0 1 1 N AT H A N H U E N I N G
1 2 M a rc h 2 01 1
