Last Thursday I hosted Oslo’s bi-monthly UX book club. The book we read for this meetup was “Envisioning Information” by Edward R. Tufte. This blog post is a summary, mostly written for my own benefit and therefore focusing on the parts that I found most interesting (Esteban has written another summary).
What is envisioned information?
A graphical or tabular display of data.
Why do we envision information?
We do so to reason about, communicate, document, and preserve knowledge.
What is the main problem we are facing?
The data we are dealing with is multi-dimensional, but we (mostly) have to represent it in 2D.
How can we “escape flatland” and the limitation of the 2D medium?
By increasing the number of dimensions and/or the data density shown in 2D. This is only possible with extensive compromise.
What techniques are there to escape flatland?
- Small multiples:
A series of small information slices, positioned within the eye span, that allow to compare at a glance. They are visually enforcing comparisons of changes.
- Dimensionality and data compression:
Dimensions can be added by e.g. the ordering of data entries, color, spacing, …
- Micro/macro displays:
High-density designs that allow simultaneous local and global readings.
- Average and variation of data:
If working with vast quantities of data, it can be more useful to show means and variation within the data set rather than the data points themselves.
What are sins of information design?
- Pridefully Obvious Presentation:
The attention is put on the design (the data containers), not the data it represents.
- Chartjunk:
Cosmetic decoration that tries to compensate for otherwise dull design or lack of content. It often distorts the data and assumes the readers to be dumb and uncaring.
“Clarity and simplicity are completely opposite simple-mindedness.” (p. 34)
“High-information graphics [...] convey a spirit of quantitative depth and a sense of statistical integrity. Emanciated data-thin designs, in contrast, provoke suspicions – and rightfully so – about the quality of measurement and analysis.” (p.32)
Micro/Macro displays
And unconventional design strategy: “To clarify, add detail.” (p. 37)
Examples:
Fine-textured graphics with high detail lead to personal micro-readings, they call for individual stories about the data. The vast complexity is organized through multiple and (often) hierarchical layers of contextual reading. That is, the same ink serves one than one informational purpose. Read on a macro-level, the (micro-level) data blurs into a gray shape and allows for a different reading.
“The more relevant information within the eyespan, the better.” (p. 50)
Context switching is disruptive, and users have to rely on visual memory. High-density designs, on the other hand, enable selective, narrated, and personalized readings. The control of information is given to the users.
“It is not how much empty space there is, but rather how it is used. It is not how much information there is, but rather how effectively it is arranged.” (p. 50)
“Simpleness is another aesthetic preference, not an information display strategy, not a guide to clarity.” (p. 51)
Layering and Separation
When envisioning information, we want to show differences that make a difference. We can enforce that difference within the information if we consciously layer and separate it, visually stratifying various aspects of the data. Failure to differentiate the data leads to cluttered and incoherent displays filled with disinformation. “Confusion and clutter are failures of design, not attributes of information” (p.53).
1+1=3 or more
We need to be aware that elements interact, creating non-information patterns and texture. Negative areas of white space are visually activated.
- Josef Albers, “One Plus One Equals Three or More: Factual Facts and Actual Facts,” in Albers, Search Versus Re-Search (Hartford, 1969), pp. 17-18.
What matters is the proper relationship among information layers (“proportion and harmony”). Layering of data often involves creating a hierarchy of visual effects, possibly matching an ordering in the information content.
Tips:
- Lighter colors will minimize incidental clutter.
- Avoid bold shapes, they promote vibration all over.
- Avoid surrounding words with little boxes.
- Be aware of grids!
Strong grids take the focus away from the information. Gray grids, with a delicate line, almost always work; they promote a more accurate data reading. Grids should be muted relative to the data.
- Subtraction of weight (p.60): make your graphics appear lighter if you can (e.g. thinner lines for shading).
Color and Information
The first principle about using color is: “Above all, do not harm.” (p.81)
Uses of color:
- to label (color as noun)
- to measure (color as quantity)
- to represent or imitate reality (color as representation)
- to enliven or decorate (color as beauty)
Have good reasons for your color choices (more than just taste preferences).
- Do not use too many colors. More than 20-30 colors don’t just have less effect, they have negative effects.
- Mute unnecessary contrast.
- Don’t overuse bright, saturated colors. They have loud, unbearable effects when used over large areas. Use only small spots, on dull background. For two large areas of bright colors: it can work if you repeatedly intermingle one with the other.
- White with mixed bright colors produces unpleasant results. Prefer backgrounds in light gray or muted colors.
- Color palettes: prefer the use of colors from nature.
- Human cognitive processing gives considerable and often decisive weight to contour information. Make sure to use color (contours) for a purpose, not explaining something that is already obvious.
- Be aware of ”Cognitive Contours”, colors/shapes appearing where there aren’t any.
Color for quantifying data:
Color is a natural quantifier, which we can perceive and distinct with an incredible fineness.
Value scales (by color brightness) are often used, because they are easy to remember. Rainbow scales are an alternative, but are hard to remember and thus need other cues to be able to interpret the data.
Any color coding of quantity is potentially sensitive to contextual effects. (i.e. the same color appears to be lighter on a darker background). These interactions are only very seldom wanted (i.e. using a combination of two colors for a line, to avoid having to introduce a third color). Also, translating color back to data is error-prone, as readers have varying color perception.
Therefore: Don’t rely on color as the only way to send your message. Use multiple signals, redundant and partially overlapping methods. But make sure that there is a need for the redundant signal, and that you choose the appropriate redundancy.
A Surprising Highlight
There was one surprising moment of a seemingly objective data representation deliberately pushing you towards one way of thinking: In a court case against John Gotti, an alleged mafia leader, the below chart was used to show the criminal records of prosecution witnesses. The chart was crucial evidence in the acquittal of Mr. Gotti.
see http://hdl.handle.net/2376/1976
The crime list is ordered in such a way that the worst crimes are at the top and the bottom of the list. The marks are large and bold; they dominate the grid and make it almost impossible to believe that only 37% of the possible combinations are actually marked.
Opinion
The book is a highly recommended read. The summary really only makes sense when seeing all the examples that Tufte presents in the book. I can see myself going back re-reading various sections of the book for various purposes. It will certainly be useful information to have in mind when creating UI. But it will also come in handy when creating information material for non-profit work.
Also, did you notice that I changed the blog’s font to serif? 
