Crafting clean, rich, and meaningful information displays
I was first introduced to Edward Tufte’s work on information design and data visualization when I was studying HCI years ago at the University of Michigan. I recently had a chance to revisit the most well-known three of his books: The Visual Display of Quantitative Information, Envisioning Information (EI), and Beautiful Evidence (BE). I took away many insightful ideas from reading these books, and I’m sharing those that most resonated with me in this post.
Show comparisons, contrasts, differences
The fundamental analytical act in statistical reasoning is to answer the question “Compared with what? … Thus visual displays, if they are to assist thinking, should show comparisons.” (P127, BE)
Tufte calls out the importance of supporting comparisons in information design. That seemingly simple principle gets to the core of the reason why people look at a chart, a graph, or a table. And that reason is often to answer a question that involves a comparison. Consider the following questions that are top of mind to many people at the time of writing:
- How serious is inflation right now in the US?
- How much do I still need to worry about COVID-19 in my community?
- Is the stock market in the bear market territory?
All of these questions implicitly ask for a comparison with either a well-defined notion (e.g., bear market), historical precedents (e.g., inflation rates), or individual expectations and comfort levels (e.g., severity and prevalence of COVID-19). When an information display fails to show comparisons through its design, the viewer needs to make it up by memorizing information from one place and then project that visual memory onto another, which is a weak skill as Tufte points out.
Sparklines
In Beautiful Evidence, Tufte highlights sparklines, one of the most common data displays, as a great way to show comparisons and track changes over time. One particular advantage of sparklines is that they represent patterns that can be recognized and read as meaningful “words” instead of individual data points.
Sparklines are datawords: data-intense, design-simple, word-sized graphics. (P47, BE)
Small multiples
Another type of display to enable comparisons is “small multiples” — a series of similar charts visualizing different variables in the same format, often arranged in a grid layout.
In Tufte’s own words, “Small multiples, whether tabular or pictorial, move to the heart of visual reasoning- to see, distinguish, choose (even among children’s shirts). Their multiplied smallness enforces local comparisons within our eye span, relying on an active eye to select and make contrasts rather than on bygone memories of images scattered over pages and pages.” (P33, EI)
The key here is, again, reducing the burden on the viewer’s working memory by showing everything to be compared on the same page and in a similar format.
Simpleness of data and design ≠ clarity of reading
There’s a common misconception that the answer to information overload is a minimalist design which aggressively controls the amount of information presented to the user. Tufte argues that information overload or the perception of clutter is more often the result of poor information design rather than the amount of details included. A mindless pursuit of simplicity could be counterproductive.
What about confusing clutter? Information overload? Doesn’t data have to be “boiled down” and “simplified”? These common questions miss the point, for the quantity of detail is an issue completely separate from the difficulty of reading. Clutter and confusion are failures of design, not attributes of information. Often the less complex and less subtle the line, the more ambiguous and less interesting is the reading. (P51, EI)
Layering and separation
One approach Tufte suggests that can declutter an information display without sacrificing its detail is layering and separation. There are many different ways to achieve this. The first example he gives is using color to separate the annotations from the annotated as shown in the parts diagram below:
Another example Tufte shows is a long hospital bill showing a patient’s ICU care costs over a period of 26 days, annotated with a high-level summary of her care at the granularity of week on the margins of the bill.
This example is somewhat similar to the Overview+Detail UI pattern in interaction design, where multiple interconnected layers of information are offered to the user, who can shift their attention from one layer to another as needed.
Tufte also shows many examples in table design and cartography. They all share a general idea: information density and readability can be achieved at the same time through intentional use of color, texture, shape, and placement of visual elements.
Effects of 1 + 1 = 3 or more
Tufte maintains that the key to separation and layering of information is creating a “proper relationship among information layers.” Failing to do that could lead to the perception of a “busy” or “heavy” display. A particular threat to that proper relationship is the effect of 1 + 1 = 3 or more, which Tufte spends a lot of ink discussing across his books.
So what is the 1 + 1 = 3 effect? It’s the visual activation of negative areas of white space due to the automatic pattern recognition process in human visual perception. Tufte gives a very simple example to demonstrate that:
…when we draw two black lines, a third visual activity results, a bright white path between lines… (P61, EI)
Now imagine all the negative areas in a complex display and what they’d do to our visual perception system. Visual noise arises when our perception system unconsciously starts processing many negative shapes created by the marks in an information display. As Tufte points out:
Most of the time, that surplus visual activity is non-information, noise, and clutter. (P61, EI)
So how might we reduce the amount of negative shapes? Tufte’s approach is to remove unnecessary “weight” from the display, such as thick bars and borders, bold fonts, and high color contrasts.
The noise of 1 + 1 = 3 is directly proportional to the contrast in value (light/dark) between figure and ground. (P62, EI)
Thick bars of grid boxes generate little paths around both type and silhouette by exciting the negative white space: 1 + 1 = 3, all over again. (P63, EI)
Final thoughts
My overall takeaway from reading Tufte is that a good information design should exhibit the following qualities. First it anticipates the questions the viewer would ask, which are often comparative in nature. Second, it provides rich details but guides the viewer’s attention through separation and layers. Last, it controls visual activities that do not process information by minimizing effects of 1 + 1 = 3 or more.
