Guidelines and checklist for SemanticZoom controls (Windows Runtime apps)
[ This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation ]
Follow these guidelines for using the SemanticZoom control. For info and code showing how to create a SemanticZoom, see Quickstart: Adding SemanticZoom controls.
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++
Is this the right control?
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.
Note Don't confuse semantic zooming with optical zooming. Although they share the same interaction and basic behavior (displaying more or less detail based on a zoom factor), optical zooming refers to the adjustment of magnification for a content area or an object such as a photograph.
Semantic zooming and panning
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.
Designing semantic views
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.
.png)
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.
Handling input
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 and dont's
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.
- Use the group names for items in a grouped collection.
- Use sort ordering (such 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.
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.