Overview Beside Detail

Examples:

Windows Explorer and many other file-system exploration dialogs
Web sites that contain a "site contents" frame on the left, and a frame containing the current page on the right
Email readers that show you a list of messages on one side, and the content of the selected message on the other side
Many visualization tools for large hierarchies or geographical maps

Context: The artifact contains a large amount of content -- too much to be reasonably presented in a single view. This content may be cleanly partitioned into a top-level set of objects or categories, such as document names and document content, containers and their contents, or objects and their properties; alternatively, the content may be a large, continuous, very detailed data set, in which users may have specific areas of interest.

Problem: How can you present this large amount of content so that a user can explore it at their own pace, in a way which is comprehensible and engaging to the user?

Forces:

Should always be able to see where you are; keep it within visual field, not hidden or distant
User wants to move between the detail views quickly, e.g. to compare and contrast
Not enough space to show multiple detail views simultaneously; may be constrained to one working surface
Too confusing to show multiple detail views simultaneously
Lets user concentrate on one object, category, or area of interest at a time
One working surface is easy to deal with -- no window shuffling or restacking
Easy navigation, managed by one (often flat) set of objects -- a star pattern

Solution: Show the whole set of objects, or the whole undetailed data set, in one part of the display area, to act as an overview of the content. When the user selects a single object, category, or area of interest within that overview, immediately show its related content -- its detail -- in the remaining space. As the user changes the selection, update the detail area to always reflect the current selection.

Keep the overview and detail areas spatially adjacent, so that the user can easily glance back and forth, using the overview area to drive the decisions about what to look at next. If you use Tiled Working Surfaces to relate them to each other, the user doesn't need to mentally "context switch" or make any extra gestures to go from one area to the other (such as raising one window above another). This enables a sense of flow.

Resulting Context: You have to decide how the user selects the part of the overview that they're interested in. The kind of data you're working with should suggest a graceful solution: a set of objects can be selected one at at time (or perhaps several contiguous ones), while a continuous data set like a geographic map may provide a freely movable "thumbnail," drawn on top of the overview, that shows the current selection.

A set of high-level objects or categories can be linear, hierarchical, or otherwise organized by whatever principle is appropriate -- see Hierarchical Set, Tabular Set, Editable Collection, Personal Object Space, and whatever other patterns you find appropriate.

Sometimes you just can't easily partition the content into only two levels of abstraction at a time. You should always retain the high-level overview, but you could then take the detail view and make it act like a second-level overview, so that the user can drill down one more level to see yet more detail. This recursion then gives you a total of three views, and you can continue the recursion for as many levels of depth as you need to. Netscape Messenger does this to show email and news, by the way: an upper-left panel shows the mailbox or newsgroup hierarchy, an upper-right panel shows the list of messages in the currently-selected mailbox or newsgroup, and a large bottom panel shows the message currently selected in that upper-right panel. Stuart Card et. al. recommend that for zooming in on a continuous data set, use a zoom factor between 3 and 30; more than that becomes disorienting for the user.

Sophisticated users may find it too constraining to see only one detail view at a time; if so, consider allowing multiple detail views simultaneously, possibly using Pile of Working Surfaces. Just keep in mind the increased complexity of the artifact when you do that -- users may get confused about where they are. I have rarely found it necessary to do this, however.

Notes: This pattern has also been noted, though not in pattern terminology, by Stuart Card, et. al. in their book Readings in Information Visualization: Using Vision to Think. A two-paper section called "Overview Plus Detail" is devoted to this concept; in the section introduction, they explain their reasoning:

Having an overview is very important. It reduces search, allows the detection of overall patterns [in the data], and aids the user in choosing the next move. But it is also necessary for the user to access details rapidly. One solution is overview plus detail.

Comments to: jtidwell@alum.mit.edu
Last modified May 17, 1999