Small Multiples within a User Interface

by December 20, 2005

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.

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

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 below, small multiples illustrate the change in variables over time.

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 above—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. 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.

Initial design of multiple transaction windows

Colleen suggested we utilize a small multiples design. In the redesign below, 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.

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 below, 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.

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.