Local zoom
The Design Need:
The user wants a more detailed view of content from one or more items in an overview.
Design Examples:
Design Solution:
Allow the user to select certain items to see more detailed content within the content overview presented.
Show an overview of items with a list containing basic information, such as names, titles, etc.. Offer the opportunity to view more detailed info about each item in the list. You can use collapsible panels, overlay windows, etc. to show the extra information.
Don’t make users open the second level of information so that they can use the first level of content.
Decide, based on the type of content, on the best way to select the second level of content. There are a few options:
- Immediately when hovering over the content
- With some delay when hovering over the content
- On a mouse click.
When to use:
You should use this pattern if:
- The content overview contains too much information to show in the layout
- Users might want more detailed info on a specific element in an overview without navigating to it or activating it.
Why use this solution (rationale):
Sometimes users like to view more detailed information on elements in a complete overview containing basic information, without losing the complete overview. This helps them decide which element to select or which action to take.
More info elsewhere:
- Local zoom design pattern on http://quince.infragistics.com
- Closable panels on www.designinginterfaces.com
- Collapsible panels design pattern on www.welie.com
