Overview Plus Detail
From http://wildfire.usgs.gov | |
What: |
Place an overview of the graphic next to a zoomed "detail view." As the user drags a viewport around the overview, show that part of the graphic in the detail view. |
|
You show a data set drawn as a large information graphic -- especially an image or a map. You want users to stay oriented with respect to the "big picture," but you also want them to zoom down into the fine details. Users will browser through the data, inspect small areas, or search for points of interest. High-level overviews are necessary for finding those points of interest, but users don't need to see all available detail for all data points at once -- zooming in on a small piece is sufficient for getting fine detail. |
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 zoom from
that view into the details as they need to, keeping both levels
visible on the same page for quick iteration.
Edward Tufte uses the terms "micro and macro readings" to describe a similar concept for printed 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, or move slowly. Finally, the overview can serve as a "You are here" sign. A user can tell at a glance where they are in the context of the whole data set by looking for the viewport on the overview. |
How: |
Show an overview of the data set at all times. It can be an
inset panel, as in the example at the top of the pattern. It
could also be a panel beside the detail view, or even another
window, in the case of a multiwindow application like
Photoshop (see the examples below).
On that overview, place a viewport. They're usually red boxes, by convention, but they don't have to be -- they just need to be visible at a glance, so consider the other colors used in the overview panel. If the graphic is typically dark, make it light; if the graphic is light, make it dark. Make the viewport draggable with the pointer, so users can grab it and slide it around the overview. The detail view shows a magnified "projection" of what's inside the viewport. The two should be synchronized. If the viewport moves, the detail view changes accordingly; if the viewport is made smaller, the magnification should increase. Likewise, if the detail view has scrollbars or some other panning capability, the viewport should move along with it. The response of one to the other should be immediate, within a tenth of a second (the standard response time for direct manipulation). |
Examples: |
|
From Photoshop Photoshop places the image canvas (the "detail view") on the left, and the overview on the right. The Navigator window shows a view of the whole image, with a red box showing the size and scroll position of the image's canvas window. |
|
From the MATLAB Signal Browser In the signal-processing example shown here, the overview panel is on the bottom of the window. The "You Are Here" aspect is particularly important for users who deal with long, complex signals. |
|