Guidelines for semantic zoom
Windows app: zoomed-in and zoomed-out views of a semantic zoom control
Windows Phone app: zoomed-out and zoomed-in views of a semantic zoom control
A semantic zoom control allows the user to zoom between two different semantic views of the same data set. One view contains a list of items grouped by some key, and the other view contains a list of group keys. Tapping a group key zooms back into the items in that group.
If the data set is a list of physical exercises grouped by the body part that each one benefits, then the zoomed-in view would be a list of exercises grouped by body part (the items) and the zoomed-out view would be a list of body parts (the group keys). With a large data set, being able to zoom out and see all the group keys on one page really helps the user to quickly access a distant item that would otherwise take lots of scrolling to reach.
- Use the correct touch target size for elements that are useable or interactive. For more information, see Guidelines for targeting.
- Provide a suitable and intuitive Semantic Zoom region. Users often initiate Semantic Zoom from within the area that surrounds the displayed items. Make the Semantic Zoom region large enough to encompass this area. For example, the Windows Store provides a large amount of white space around the app list where the user can place their fingers and zoom in or out.
- Use structure and semantics that are intrinsic to the view.
- Use the group names for items in a grouped collection.
- Use sort ordering (such as chronological ordering for dates or alphabetical ordering for a list of names) for an ungrouped, but sorted, collection.
- Use pages to represent a document collection.
- Ensure that the item layout and panning direction does not change based on zoom level. Layouts and panning interactions should be consistent and predictable across zoom levels.
- Limit the number of pages (or screens) in the zoomed-out mode to three. Semantic Zoom enables a user to jump quickly to content. Introducing excessive panning destroys this benefit.
- Don't use Semantic Zoom to change the scope of the content. For example, a photo album should never switch to a folder view in File Explorer.
- Don't set a border on the Semantic Zoom control's child controls. If you set borders on both the Semantic Zoom and its child controls, the Semantic Zoom border and the border of the child control that is in view will both be visible. When zooming in or out, the child control's borders are scaled along with the content and won't look good. Set a border only on the Semantic Zoom control.
Optical zooming alters the scale and magnification of content. Semantic zooming switches the semantics (the meaning) of the content presented between items grouped by key, and a list of those keys. Consider using a semantic zoom control whenever you want to display a long list of grouped data (for example, exercises grouped by body part, or names grouped by initial).
Scrolling from names beginning with 'A' to a name beginning with 'Z' may take a large number of swipe gestures. With a semantic zoom control, it can take as few as two taps: one to zoom out to the list of initials, and a second to zoom back into the 'Z's.
The semantic zoom manages zooming between its two views. A view is either a list view or a grid view, containing the items or the group keys as appropriate.
Semantic zoom uses two distinct modes of classification (or zoom levels) for organizing and presenting the content: one low-level (or zoomed in) mode that is typically used to display items in a flat, all-up structure and another, high-level (or zoomed out) mode that displays items in groups and enables a user to quickly navigate and browse through the content.
The semantic zoom interaction is performed with the pinch and stretch gestures (moving the fingers farther apart zooms in and moving them closer together zooms out), or by holding the Ctrl key down while scrolling the mouse scroll wheel, or by holding the Ctrl key down (with the Shift key, if no numeric keypad is available) and pressing the plus (+) or minus (-) key.
Watch this brief video for an overview of semantic zoom.
Examples of apps that could use semantic zoom include:
- An address book that organizes contacts alphabetically (or by some other means) and presents the data using the letters of the alphabet. The user could then zoom in on a letter to see the contacts associated with that letter.
- A photo album that organizes images by metadata (such as date taken). The user could then zoom in on a specific date to display the collection of images associated with that date.
A product catalog that organizes items by category.
- Other examples of Semantic Zoom layouts:
Zoomed in Zoomed out
Navigating with semantic zoom
While navigating content is possible through panning and scrolling alone (see Guidelines for panning), powerful navigational and organizational capabilities are possible when paired with semantic zoom.
Panning and scrolling are useful for small sets of content and short distances. However, navigation quickly becomes cumbersome for large sets of content. Semantic zoom greatly reduces the perception of traveling long distances when navigating through large amounts of content and provides quick and easy access to locations within the content.
Semantic zoom should not be confused with optical zoom (see Guidelines for optical zoom and resizing). While they share the same interaction and basic behavior (displaying more or less detail based on a zoom factor), optical zoom refers to the adjustment of magnification for a content area or object such as a photograph.
- Scroll jump
Tapping the content in zoomed-out mode will zoom the view and pan to the tapped point, as shown in these three diagrams.
Zoomed out, the entire content can be a touch target. A tap on a section of the content. Zoomed in and panned to the tapped area.
A smooth cross-fade and scale animation is used for the transition from one semantic zoom level to another. This is the default Windows Touch behavior and cannot be customized.
Considerations and recommendations
You are responsible for defining the two semantic levels in your apps.
Consider these questions when designing the zoomed-out mode:
- How should the structure and presentation of the info change based on the zoom level?
- Would hints, or "signposts," be helpful for navigating the data?
- What amount of content provides a useful semantic view while minimizing panning and scrolling?
These considerations are often in conflict with each other. You want rich content with lots of info so that users know where they are jumping to, but you need to balance this info with the total length of the semantic level. If users need to pan a lot in the zoomed-out mode, you lose the main benefit provided by Semantic Zoom—quick navigation.
Hands-on labs for Windows 8
Appearance and interaction
The appearance of a semantic zoom control depends on which of its views is being shown (each view is either a list view control or a grid view control). When zoomed-in, the semantic zoom appears as a list of items grouped under key headers; when zoomed-out, it appears as a list of keys.
Tapping an item while zoomed-in either selects the item or navigates to its details page. When zoomed-out, tapping a group key zooms in with that group scrolled into view.
Windows: The zoom interaction is performed with the pinch and stretch gestures (moving the fingers closer together zooms out and moving them farther apart zooms in), or by holding the Ctrl key down while scrolling the mouse scroll wheel, or by holding the Ctrl key down (with the Shift key, if no numeric keypad is available) and pressing the plus (+) or minus (-) key.
Windows Phone: When zoomed-in, tapping a group key header zooms out.
- For designers
- Guidelines for common user interactions
- Touch interactions
- For developers (HTML)
- Adding SemanticZoom controls
- Quickstart: adding a SemanticZoom
- Quickstart: Pointers
- Quickstart: DOM gestures and manipulations
- Quickstart: Static gestures
- Quickstart: Manipulation gestures
- For developers (XAML)
- Quickstart: Touch input
- Quickstart: Handling pointer input
- For developers (Windows Runtime app using DirectX with C++)
- Responding to touch input (DirectX and C++)
- Samples (WinJS)
- HTML SemanticZoom for custom controls sample
- HTML ListView grouping and SemanticZoom sample
- Samples (DOM)
- HTML scrolling, panning and zooming sample
- Input: Instantiable gestures sample
- Samples (Windows Store app APIs)
- Input: Windows 8 gestures sample
- Input: XAML user input events sample
- XAML scrolling, panning, and zooming sample
- Samples (DirectX)
- DirectX touch input sample
- Input: Manipulations and gestures (C++) sample