Jonathan Corum, New York Times
Practice until your eyes can see it
See what others have done
See what’s possible
Look at more than you can use
Find a clear thought and get it on paper
Sketching is visual problem solving
Sketches are not commitments
What are you trying to do?
Set the pattern, then show the variations
Ugly is fine
Sketch with data
Sketch in the browser
Find something your brain recognizes
Remember that aha! moment
Communicate that understanding
Good design is clear thinking made visible. - Edward Tufte
Design for someone else
Don’t be your own audience
If you’re talking to yourself, you’re not communicating
Remember what it’s like not to understand
If I could have gone back in time, what would help me get to understanding.
Explain overview + relevant detail
In order to get anything out of this [research paper], it’s going to be a translation project.
Don’t collect trivia
There’s a reason that I’m collecting that and then presenting it.
Collections should add up to something
Visualization ≠ counting
Find and show meaningful patterns
Avoid the language of infographics
Avoid the facade of communication.
Don’t introduce false patterns
Is this pattern a true pattern or an artifact of how I arranged the data?
Visualization ≠ explanation
Don’t count diapers!
Be skeptical of vanity data
Compared to what?
When your idea hits the real world.
Point and annotate
Put the text where it’s relevant.
Combine art + label
It doesn’t say here’s some lines, now you figure it out.
Help the reader through
Keep honing your ideas
We are not designers! - Matthew Ericson
Ruthlessly apply common sense
Brute force works but tools can help
Understand every step in the process
Understand what you can control: accuracy, clarity, legibility, empathy, and simplicity
What might emerge? Understanding, elegance, and beauty.
What if I am tricked? What if I believe in this just because it is beautiful? - Andre Lim
See & think = understand
Design & product = explain
Understand then explain
Respect the reader
Bret Victor, worrydream
Links to examples
- Static displays
- Dynamic displays
- Dynamic data
Summary and detail graphics - Two levels of questions for different readers. In the example it’s “what are the main contributing pollutants to global warming”, with the follow up being “what are the causes of each pollutant”.
Slice and filter - Every decision is put within context. Where you see information, you can interact to filter by that aspect.
Narrative context - While going through the data, you’re going through a story. These real world events are tied to the chart.
Emotion - Switching between datasets that can tell a story from different perspectives. Don’t let readers sleepwalk through the graphic.
When you have the interactive medium you can design a learning curve, similar to game design. Starting a reader off with a basic task and then after awhile let actions grow in complexity.
Black box explanations - you don’t care about what’s going on under the hood, you just want the output. Elements you can adjust and see the consequences of those adjustments.
Open box explanations - what’s under the hood is exactly what you care about. Explaining how an algorithm works. Nouns are data objects, verbs are the transitions. Series of interactive graphics explaining each step of the process.
Making a graphic is not about putting a large spreadsheet in the middle of the page with the data. It’s much more so like show and tell. Each cell telling a piece of the story, much like a comic strip.
Representations for systems design - Show comparisons between original and intended change. Show the state of the individual steps in a system. Come up with a design language and then show the steps through the system.
Ladder of Abstraction
The graphics we make for displays must be better than their paper counterparts. By showing an animation, you take away the control that interaction allows.
Animations are the pie charts of interactive graphics.
First, give readers control over time. Let them move at their own pace and answer their own questions as they arise.
Second, give control over each of the parameters while abstracting time. When you control a parameter, you need to be able to see the result. Be able to see the entire behavior over time.
Third, give control back by letting the reader control time and variable by marrying them together.
See also — Steven Wittens, Amit Patel
Mike Bostock, New York Times
If one of the best designers of all time doesn’t know if what he makes is good, how can anyone else expect to?
Good design is as little design as possible. - Dieter Rams
Fitt’s law, it’s easier to click on targets that are closer and bigger.
Two phases: create and edit.
Get fresh eyes frequently; invite criticism.
New York Times Preview tool, displays all of the ongoing work. Can switch between each branch and interact with works in progress. Takes a snapshot of each commit on each branch.
Prototypes should emphasize speed over polish.
Transition from exploring to refining near deadline.
Delete code as you go. Be ruthless.
Make your process reproducible.
Try bad ideas deliberately.
Don’t be afraid to fail.
Let’s make a bubble map.
pbpaste allows terminal to access system clipboard.
Edward Tufte, Author
- The Thinking Eye
Code is now design and design is code.
What was observed by us in the third place is the nature or matter of the Milky Way itself, which, with the aid of the spyglass, may be observed so well that all the disputes that for so many generations have vexed philosophers are destroyed by visible certainty, and we are liberated from wordy arguments. - Galileo Galilei
Organizations which design systems… are constrained to produce designs which are copies of the communication structures of these organizations - Melvin E. Conway
- Seek verbs and actions.
- See now, words later.
- A sense of the relevant.
- Seek forever knowledge with a taste for excellence.
- Understanding the difference between evidence and inference.
Only two industries refer to customers as users; software and the drug industry.
- Silence sharpens and deepens seeing.
- Most of social science studies are false. Social science is harder than rocket science. It does not have the fundamental truths of nature’s laws.
- Image quilts.
- Distribution of excellence is extremely logarithmic.
A hard look at the practice and results of conventional asymptotic theory easily leads one to three points:
- We ought not to expect it to be widely useful (since it refers to the ultimate oversimplification).
- Rather often it has been useful (surprise!)
- We have developed no basis for telling when it is likely to help and when it is not….. 123 - John W. Tukey
- Standards of graphical excellence: Google Maps and Swiss Mountain maps.
- Future is maps moving in time.
How do you know that?
How does what I see come to be seen by me?
- Real science has it easy because they have forever laws.
- Begin with a question, a problem, then measure.
You can have your own point of view, but not your own facts. - Daniel Patrick Moynihan