Guidelines for Semantic Zoom

Article
09/17/2013

This topic describes the new Windows UI for Semantic Zoom and provides user experience guidelines that should be considered when using this new interaction mechanism in your Windows Store apps.

See this feature in action as part of our App features, start to finish series: User interaction: Touch input... and beyond

Overview of Semantic Zoom

Semantic Zoom is a touch-optimized technique used by Windows Store apps in Windows 8 for presenting and navigating large sets of related data or content within a single view (such as a photo album, app list, or address book).

Note

This functionality is analogous to panning and scrolling (which can be used in conjunction with Semantic Zoom) within a single view.

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.

Note

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.

Screen shot showing the original semantic view.

Zoomed out, the entire content can be a touch target.

Screen shot showing a tap gesture on a section of the original semantic view.

A tap on a section of the content.

Screen shot showing the new semantic view at the tap target.

Zoomed in and panned to the tapped area.

Transitions

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.

Do's and Don'ts

The following do's and don'ts will ensure a successful Semantic Zoom experience for your customers.

Do's

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'ts

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 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 or out, the child control's borders are scaled along with the content and won't look good. Set a border only on the SemanticZoom control.

Hands-on labs for Windows 8

If you’d like to try working with Semantic Zoom and other key Windows 8 features, download the hands-on labs for Windows 8. These labs provide a modular, step-by-step introduction to creating a sample Windows Store app in the programming language of your choice (JavaScript and HTML or C# and XAML).

Conceptual

Guidelines for common user interactions

Touch interaction design

Adding SemanticZoom controls

Tutorial (Windows Store apps using JavaScript)

Quickstart: adding a SemanticZoom

Quickstart: Pointers

Quickstart: DOM gestures and manipulations

Quickstart: Static gestures

Quickstart: Manipulation gestures

Tutorial (Windows Store apps using C#/VB/C++ and XAML)

Quickstart: Touch input