Many software programs provide access to—and let users work with—large amounts of information. In addition to interactions that allow users to create, edit, and expand massive data sets, these information-rich applications must also support effective data interpretation.
Data monitoring, reporting, and modeling applications require people to make sense of large amounts of information quickly and easily. It should come as no surprise, then, that for such applications many interface design problems are actually information design problems. As a result, we can leverage information design solutions when tackling such problems. Using small multiples is one such solution.
“Small multiple designs are graphical depictions of variable information that share context, but not content.”—Edward Tufte
Champion Advertisement
Continue Reading…
Defining Small Multiples
In Envisioning Information, Edward Tufte defined small multiple designs as information slices that repeat a common design several times within a user’s eye span—with each instance showing different data values. In other words, small multiple designs are graphical depictions of variable information that share context, but not content.
The small size of each presentation of data is necessary to allow viewers to “make comparisons at a glance—uninterrupted visual reasoning.” Their consistent design “puts the emphasis on changes in data” and visually enforces “comparisons of changes, of the differences among objects, of the scope of alternatives, of a range of options.”
In Edward Tufte & Colleen Bushell’s redesigned storm-cloud animation shown in Figure 1, small multiples illustrate the change in variables over time.
Figure 1—Redesigned animation of a numerically modeled severe storm
Each multiple maintains a consistent frame of reference—size, color, fonts—with changing data—cloud shape, number of minutes. The resulting information provides a complete narrative of how the storm changed over time.
Applying Small Multiples
“For a wide range of problems in data presentation, small multiples are the best design solution.”—Edward Tufte
In 1999, I teamed up with Colleen Bushell—co-designer of the storm visualization shown in Figure 1—on a project to redesign a financial transaction software package. Users on the receiving end of these exchanges were faced with the task of potentially coordinating multiple transactions at once.
My first iteration of the user interface design utilized cascading windows to stack incoming transactions within the user’s workspace, as seen in Figure 2. However, it quickly became clear that these windows would hold little value for our users. They did not provide enough context to help users locate the appropriate window—only the title and time left—and because users often had just seconds to react to incoming transactions, the short title bars did not provide large enough targets for quick mouse movements.
Figure 2—Initial design of multiple transaction windows
Colleen suggested we utilize a small multiples design. In the redesign, shown in Figure 3, a small pane represents each transaction and shows enough data to support quick identification. The colored bar at the top of each pane gives a high-level indication of the status of a quote that a user can quickly interpret, and the timer bars provide detailed information—the exact amount of time left to fill a request. When a user mouses over one of these small multiples, the application brings the full information for the corresponding transaction to the foreground.
Figure 3—The small multiples design
Not only do these small multiples provide quick access to important functions, they also help differentiate sets of information and options. These qualities become even more useful as the quantity of information increases.
In the data-monitoring application depicted in Figure 4, of set of small multiples visualizes the current status of traffic at individual sites. The consistent visual presentation of each of the small multiples enables users to quickly scan a dense information grid for important differences.
Figure 4—Small multiples in a radar traffic–monitoring application
Like other forms of information design, small multiples have a place within user interfaces for complex information systems. As we continue expanding the amount of digital information that is available to people in applications, expressing data as small multiples is likely to become even more useful.
Before joining Google, Luke was CEO and cofounder of Polar and Chief Product Officer and cofounder of Bagcheck. He is the author of three popular Web-design books—Mobile First, Web Form Design, and Site-Seeing: A Visual Approach to Web Usability—in addition to many articles about digital-product design and strategy. He was also the founder of LukeW Ideation & Design, a product strategy and design consultancy. Luke is a top-rated speaker at conferences and companies around the world, and was a cofounder and former board member of the Interaction Design Association (IxDA). Read More
