Guidelines for semantic zoom
A semantic zoom control enables the user to toggle between two different views of the same data set. It changes the parameters and layout of a graphical representation and modifies the display of the structure and selection of data.
- An app can contain only one semantic zoom control.
- The size of the zoomed-out view is constrained by the bounds of the semantic zoom control.
- Tapping on a group header toggles views. Pinching as a way to toggle between views can be enabled.
- Active headers switch between views.
An address book is one example of a data set that can be much easier to navigate using a semantic zoom control. In this example, the semantic zoom makes use of a jump list. In one view is the complete, alphanumerical overview of people in the address book (left image), while the zoomed-in view displays the data in order and with greater detail (right image).
- When using semantic zoom in your app, be sure that the item layout and panning direction don't change based on the zoom level. Layouts and panning interactions should be consistent and predictable across zoom levels.
- Semantic zoom enables the user to jump quickly to content, so limit the number of pages/screens to three in the zoomed-out mode. Too much panning diminishes the practicality of semantic zoom.
- Avoid using semantic zoom to change the scope of the content. For example, a photo album shouldn't switch to a folder view in File Explorer.
- Use a structure and semantics that are essential to the view.
- Use group names for items in a grouped collection.
- Use sort ordering for a collection that is ungrouped but sorted, such as chronological for dates or alphabetical for a list of names.
[This article contains information that is specific to Universal Windows Platform (UWP) apps and Windows 10. For Windows 8.1 guidance, please download the Windows 8.1 guidelines PDF .]
- For designers
- Guidelines for common user interactions
- For developers (XAML)
- Quickstart: Touch input
- Handle pointer input
- For developers (HTML)
- Quickstart: Adding a SemanticZoom
- Samples (XAML)
- Input: XAML user input events sample
- XAML scrolling, panning, and zooming sample
- 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 (DirectX)
- DirectX touch input sample
- Input: Manipulations and gestures (C++) sample