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
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 the storm cloud animation shown in Figure 1, small multiples illustrate the change in variables over time.
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.
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.
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.
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.
An internationally recognized digital product design leader who has designed or contributed to software more than 700 million people use worldwide, Luke is currently Chief Design Officer for the newly launched startup Bagcheck. He is also an Entrepreneur in Residence (EIR) at Benchmark Capital and speaker and author at LukeW Ideation & Design. Before embarking on his entrepreneurial career, he was Chief Design Architect (VP) at Yahoo!, where he was responsible for product alignment and forward-looking, integrated customer experiences on the Web, mobile, and TV. Formerly Lead User Interface Designer on the platform team at eBay, Luke led the strategic design of new consumer products and internal tools and processes. He got his start at the University of Illinois, where he taught graduate interface design courses and worked as a Senior Interface Designer at the National Center for Supercomputing Applications, birthplace of NCSA Mosaic. Luke is the author of two popular design books: Web Form Design: Filling in the Blanks and Site-Seeing: A Visual Approach to Web Usability, as well many articles about digital product strategy and design. He is a top-rated speaker at conferences and companies around the world and a cofounder and former Board member of the Interaction Design Association (IxDA). Read More