UI Patterns and Techniques

Overview Plus Detail

From Mail for OS/X
Use when:	You need to present a large amount of content -- messages in a mailbox, sections of a website, frames of a video -- that is too big, complex, or dynamic to show in a simple linear form. You want the user to see the overall structure of the content; you also want the user to traverse the content at their own pace, in an order of their choosing.
Why:	It's an age-old way of dealing with complexity: present a high-level view of what's going on, and let the user "drill down" from that view into the details as they need to, keeping both levels visible for quick iteration. Overview Plus Detail breaks up the content into comprehensible pieces, while simultaneously revealing their interrelationships to the user. Edward Tufte uses the terms "micro and macro readings" to describe a similar concept for maps, diagrams, and other static information graphics. The user has the large structure in front of them at all times, while being able to peer into the small details at will: "the pace of visualization is condensed, slowed, and personalized." Similarly, users of Overview Plus Detail can page methodically through the content, jump around, compare, contrast, move quickly, move slowly, or even rearrange it. Finally, the overview can serve as a "You are here" sign. A user can tell at a glance where they are in the larger context. In the example above, the scrollbar shows that the visible message is near the end of the mailbox.
How:	The overview panel serves as a selectable index or map. Put it on one side of the page. When the user selects an element in it, details about that element -- text, images, data, controls, etc. -- appear on the other side. (Usually the overview panel is at the top or left.) What exactly is the "overview panel?" It depends -- on the inherent structure of the content, or perhaps on the task to be done. For instance, most file system viewers naturally show the directory hierarchy. Animation and video-editing software use interactive timelines. A map browser may show a large-area map with selectable grid squares. A GUI builder may simply use the layout canvas itself; selected objects on it might show their properties as the "details." In any case, keeping both halves on the same page or window is key. You could put the details into a separate window, but it's not as effective. You want the user to be able to browse easily and fluidly through the UI, without waiting or messing around with windows. In particular, you don't want the user to jump back and forth between two pages (though it's usually necessary on tiny displays like PDAs; see One-Window Drilldown, which doesn't require the use of two side-by-side panels). Most interfaces that use Overview Plus Detail present the overview as either a linear or a hierarchical set of selectable objects. Users generally know what to expect from lists and trees. But you should use whatever organizational model is appropriate -- geographic (as with a map), or a 2D matrix or table, or even some abstract data space such as a chart (as in the signal example below). See the "Showing Complex Data" chapter for more discussion of these organizational models. Information-presentation patterns such as Sortable Table and Tree-Table can be used in overviews, along with basic components like lists, trees, and tabs. Card Stack is a narrower, more concrete variation of Overview Beside Detail. And if you "chain" more than two levels of overview/detail together, you end up with something like Cascading Lists.
Examples:
From Windows Explorer The Windows Explorer is probably one of the most familiar uses of Overview Plus Detail, at least for software. Its content is organized hierarchically, using a selectable tree; in contrast, the Mac mail example shown above uses a selectable table, which is a strictly linear organization. In both cases, the dark backgrounds indicate the selected item.
From the MATLAB Signal Browser In this signal-processing example, the overview panel on the bottom has a slidable box that "projects" its content into the detail panel above, magnified. The width of the box is user-adjustable. The "You Are Here" aspect is particularly important for users who deal with long, complex signals.
From Preview for Mac OS/X Another example, this one of a PDF file being viewed in OS/X.