This month’s article provides tips on ways to display information in a way that is content rich. These methods display information in a way that enhances understanding, highlights important elements, and minimizes distractions.
In 1983, Edward Tufte published a remarkable book titled The Visual Display of Quantitative Information1. In it, he introduces display methods that make it easier for our eyes and brain to perceive and decipher data. The terms “chart junk” and “non-data ink” are terms he coined for those elements of a display that add no information, and may actively detract from what the chart/graph/screen is trying to convey. He uses a variety of examples, such as maps, railway timetables, and newspaper sports statistics pages to illustrate effective display vehicles for data.
Stephen Few, a consultant specializing in what he terms “infovis” (information visualization), has his own advice on what belongs on a computer dashboard. His recent book, Information Dashboard Design2, provides practical detail on how to pack maximum information into minimum space.
The principals synthesized below are one acolyte’s interpretation of readings by these and other experts in the field.
Increase the data pixels: Tufte originally referred to “data ink,” and Stephen Few updates this term for computer screens. Every pixel on-screen either presents data, or it doesn’t. Increase the pixels that do, eliminate the pixels that do not. Examples of data pixels are chart or graph lines, labels, numerical comparisons, categories, text, and graphics that represent what the user needs to know. See the paragraph below for examples of non-data pixels.
Eliminate all non-data pixels: What is not information is fluff, taking up valuable real estate in the service of flash. For example, logos; borders; color gradations without specific meanings; 3-d graphic effects; unnecessary borders; or any decoration on the screen. Eliminate every line not directly connected to the data, or not necessary to its interpretation.
Understand the psychology of perception: Our brains quantify some things easily, and some things less easily. For example, we can compare the height of two bars that are identical except in height that are next to each other with great accuracy. We do less well at gauging their relative size with separated bars, and even less well when they are different colors. We have a much more difficult time comparing the size of circles to each other with accuracy. We have an easy time distinguishing the orientation of lines next to each other – for example, a diagonal line within a series of vertical lines – but a harder time distinguishing patterns such as cross-hatching. Many studies of visual perception provide further information on how our mind interprets what our eyes perceive.
Text is your friend: Many designers present information in strictly graphical terms – perhaps it seems less boring and more attention getting. In many cases, though, pure text organized in a perceptually relevant pattern works perfectly well. Consider a railway timetable or airport arrival and departure screens. The alignment and organization of the text display the necessary data without borders, flashing colors, or anything resembling a speedometer.
Keep the dashboard on a single screen: Drill down capabilities allow for additional information for any item summarized on the dashboard, but do not make users scroll to the right or down to see the entire contents. Our brains work better when our eyes can see all the necessary information at a glance.
All of the techniques presented here are simply to remind designers of dashboards to have confidence in users’ intelligence. Many dashboards seem designed for young children with short attention spans. Altimeters and speedometers are prevalent, as are world maps and bright, attention-grabbing colors. In all probability, users of these dashboards want and need to know the information presented; therefore, they do not need flashy decorations or visual effects to attract them. Consider that many of these users are perfectly capable of reading the stock page every morning, which consists of nothing more than letters, numbers, and mathematical symbols. Less is more. Subtle variations of shades of gray are sufficient to differentiate elements that need separation. An x- and y-axis with labels against which a user can compare lines or bars does not need a heavy border around it. A chart does not need to be on a color-gradient background to tell its story. Stoplights depicting green or red to symbolize the situation will not tell the story as effectively as presenting the data in a directly comparative way. By the way, the red and green of stoplights are ineffective symbols for those who are color blind, estimated at approximately 7% of the male population of the U.S.
1 Tufte, Edward. The Visual Display of Quantitative Information. 1st. Cheshire, CN: Graphics Press, 1983.
2 Few, Stephen. Information Dashboard Design. 1st. Sebastopol, CA: O’Reilly Media, Inc., 2006.
