Guidelines and checklist for SemanticZoom controls (Windows Runtime apps)
Roadmap: How does this topic relate to others? See:
- Roadmap for Windows Runtime apps using C# or Visual Basic
- Roadmap for Windows Runtime apps using C++
Use the SemanticZoom control for "in-view" navigation where a user views identical content in different ways. When a user transitions between semantic views, the scope of content should not change. Never expose the user to a view that is unrelated in scope to the one they are currently viewing. For example, a view presented as a photo album should never switch to a File Explorer folder view.
Use the SemanticZoom control the same way that you use the scrollbar—to navigate within a single view.
Semantic zooming is performed through direct manipulation with the pinch interaction (moving the fingers closer together zooms in and moving them apart zooms out), or by holding the CTRL key down while scrolling the mouse scroll wheel, or by holding the CTRL key down and pressing the + or - key.
Navigating content in Windows 8 is also possible through the panning interaction. But while panning is useful for small sets of content and short distances, it quickly becomes cumbersome for large sets of content. The SemanticZoom control can greatly improve the "long distance" experience of navigating large amounts of content. It enables users to easily and quickly jump to locations within their data or content and can provide anything from an overall view of an entire collection down to a single element.
Paired with panning, the SemanticZoom enables you to build touch-optimized applications with powerful navigational and organizational capabilities.
The SemanticZoom doesn't support timed interactions to invoke an action.
To use the SemanticZoom control, you must provide two views. One of these is the main view of the content. The second view is a view of the same content represented in a way that allows users to quickly navigate through it. For example, a contact list or the file system could use a grid of the alphabet as the secondary view. A grouped ListView could use its headers for the zoomed-out view.
Developers are responsible for defining the various semantic views and thresholds for their apps.
When designing the semantic (zoomed-out) view, consider these points:
- Does the structure and presentation of the info change based on the zoom level?
- Would navigational hints, or "signposts," be helpful to navigate the data?
- How can you provide enough info for users to be able to navigate your content?
- How do you fit enough content within a few pages so that users don’t have to pan a lot within the semantic view?
These considerations can often be in conflict with each other. When designing the semantic view, you often want to create rich views with lots of info so that users know where they are jumping to. But you need to balance providing this info with the total length of your semantic view. If users need to pan a lot in the zoomed-out view, you lose the main benefit provided by the SemanticZoom—quick navigation.
The SemanticZoom handles its own input.
The semantic zoom control doesn't add a mouse UI to the app. Therefore, if an app uses zooming for a primary purpose within an app (such as zooming in a photo viewer or navigating through books in a reading app), include an additional control for zooming in the AppBar.
|Do's||Do use the correct touch target size for elements that are useable or interactive.|
|Do use structure and semantics that are intrinsic to the view.|
|Do limit the number of pages (or screens) in the zoomed-out view to three. Semantic zooming enables a user to quickly jump to content. Introducing excessive panning destroys this benefit.|
|Dont's||Don't use a SemanticZoom to navigate a hierarchy. Use the SemanticZoom to navigate within the current content efficiently. The SemanticZoom should never change the scope of the content. (For example, don't use the SemanticZoom to zoom in to and out of folders).|
|Don't set a border on the SemanticZoom control's child controls. If you set borders on both the SemanticZoom and its child controls, the SemanticZoom border and the border of the child control that is in view will both be visible. When zooming in/out, the child controls' borders are scaled along with the content and won't look good. Set a border only on the SemanticZoom control.|