Overview Plus Detail

Problem

It can be difficult to look at a zoomed in, or detailed view of spatial data (e.g. a map, or an image) while also keeping track of how the detailed area you are currently viewing relates to the overall view.

Solution

Display a smaller window viewport inset within the larger overall view to show the relationship between the detailed part that is currently being displayed and the overall set of data.

Context

• Users need to see and interact with detailed, or zoomed in views of a subset of the overall data.
• It is impossible to show the entire data set at this detailed level at once on the screen.

Rationale

Allowing users to interact with data at the level of detail they prefer is a necessity, but you also want to do your best to keep users in the “flow” of the activity they are accomplishing. By providing a detailed view while always also providing a sense of where the detailed view fits into the overall data set, the Overview Plus Detail pattern enables users to stay in their activity flow, because they don’t have to keep reorienting themselves by having to zooming back in and out (e.g. after a while spent moving around in a detailed view, it can be easy to lose track of where you are in the overall data).

Implementation

Show an overview of the data set at all times showing the relationship to the main detailed view or working area of the user. The overall view window can be inset or overlaid in the same window as the detailed view, or it can be detached, or shown in a side panel.

Inside the overall data view, provide a draggable rectangle that represents the area that is currently shown in the detailed view. Make sure to keep the detailed and overall views synchronized, with changes in one affecting the other immediately.

Sources

Jennifer Tidwell, Overview Plus Detail

Edward Tufte, Envisioning Information

Tags

Map, Displaying Complex Data.