Overview plus detail
The Design Need:
The user needs to keep an overview of the total image when zooming in.
Design Examples:
Design Solution:
Show a separate window with the overview of the total image next to it, in the corner or as a floating palette on the detailed (zoomed) image. When designing the interaction you should ensure that you:
- Avoid navigation commands that are specific only to the overview window or to the detail window. All zoom and pan actions should be similar across windows
- Slightly decouple the manipulation of the overview from the detailed view. The detailed view should only be updated if the manipulation of the overview is complete, e.g. when releasing the mouse button after panning. This allows the user to explore the overview without changing the detailed view
- Use overviews at least one-sixteenth the size of the detail window (in area)
- Allow the user to minimize the overview window.
When to use:
In all situations where the user needs to interact with a detailed or zoomed-in set of overall content, and when the overall content is too big to show at a sufficiently detailed level on one screen.
This pattern is typically used in navigation views such as maps and when editing/viewing images.
Why use this solution (rationale):
When people zoom into an image to carry out certain manipulations they easily lose overview. By providing an overview users maintain an idea of which detail they are working on or which detail they are manipulating.
More info elsewhere:
- Zoomable user interfaces on www.usabilitypost.com
- “Navigation Patterns and Usability of Zoomable User Interfaces with and without an Overview” by Hornbæk, Bederson, & Plaisant, in ACM Transactions on Computer-Human Interaction, Vol. 9, No. 4 2002
