Small Multiples Within a User Interface

By Luke Wroblewski

Published: December 19, 2005

“Data monitoring, reporting, and modeling applications require people to make sense of large amounts of information quickly and easily.”

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 makes 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

Defining Small Multiples

“Small multiple designs are graphical depictions of variable information that share context, but not content.”

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 the 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 by Edward Tufte & Colleen Bushell

Redesigned animation

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

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

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, small multiples visualize 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—A set of small multiples within a radar traffic monitoring application

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.

Bibliography

Baker, M. Pauline, and Colleen Bushell. “After the Storm: Considerations for Information Visualization.” Urbana-Champaign, Illinois: National Center for Supercomputing Applications, University of Illinois: 1995. Retrieved December 19, 2005.

Tufte, Edward R. Envisioning Information. Cheshire, Connecticut: Graphics Press, 1990.

1 Comment

Excellent article, and I would like to read more like this. Thanks!

Join the Discussion

Asterisks (*) indicate required information.