Small Multiples
Problem
It is difficult to compare items that differ in many dimensions.
Solution
Show many instances of the items next to each other on the same page, or in a matrix format depending on the situation and number of dimensions, so that patterns of differences can be noticed.
Context
- The data or items to be shown differ in multiple dimensions.
Rationale
When things differ in multiple, subtle ways it becomes very difficult to notice and remember these differences even for small numbers of items. This pattern is all about showing people many examples at once so that there is no remembering required.
By showing many examples at once, demonstrating the differences across the dimensions allows users to see patterns that would be harder to notice if looking at one example at a time. Having to remember details across multiple examples one at a time would actually make it likely that many patterns wouldn’t be noticed at all.
These differences are noticeable especially in cases where the set of examples are similar in many ways, and really only differ slightly from each other. Only by seeing them all at once are these subtle differences noticeable.
Implementation
Depending on the number of dimensions you are trying to show differences for, you can arrange items in a single line, or you may need to create a sort of matrix to show multiple differences at once (for larger numbers of dimensions).
Provide clear labels for each dimension being varied, highlighting what the differences are along that dimension (e.g., color, size).
A key to help users notice the differences across the multiples is to make sure that each of the items (e.g., product image) does not differ in ways other than these dimensions. For example, each product image should be the same size, use the same background color, etc. Any noticeable differences between the items should have something to do with the dimensions you want them to notice.
Examples
The primary example for this pattern comes from a North America climate map that shows changes in climate over time, across different types of data for each time period.
http://quince.infragistics.com/10xd
This example from the Levi’s website uses the Small Multiples pattern to show differences between jeans. Each image is very similar, except for the differences in the jeans themselves which is the point. The labels “Regular” and “Skinny” provide guidance on what the differences are, and by placing the images next to each other, users are better able to understand what these labels mean.
http://quince.infragistics.com/11h0
Sources
Jennifer Tidwell, Designing Interfaces
Luke Wroblewski, Small Multiples Within a User Interface
Edward Tufte, Envisioning Information
Tags
