Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

Guidelines for semantic zoom

Applies to Windows and Windows Phone

Windows app: zoomed-in and zoomed-out views of a semantic zoom control

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

Windows Phone app: zoomed-out and zoomed-in views of a semantic zoom control

Description

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.

Examples

A screenshot that illustrates the standard semantic zoom control

Dos and don'ts

  • 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.

Additional usage guidance

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 inZoomed out
    Example of a zoomed-out layoutExample of a zoomed-in layout
    Example of a zoomed-out layoutExample of a zoomed-in layout
    Example of a zoomed-out layoutExample of a zoomed-in layout
    Example of a zoomed-out layoutExample of a zoomed-in layout

     

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.

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).

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.

  • Applies to Windows

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.

  • Applies to Windows Phone

Windows Phone: When zoomed-in, tapping a group key header zooms out.

Related topics

For designers
Guidelines for common user interactions
Touch interactions
For developers (Windows Runtime apps using JavaScript and HTML)
Adding SemanticZoom controls
Quickstart: adding a SemanticZoom
Quickstart: Pointers
Quickstart: DOM gestures and manipulations
Quickstart: Static gestures
Quickstart: Manipulation gestures
SemanticZoom
Windows.UI.Input
For developers (Windows Runtime apps using C#/VB/C++ and XAML)
Quickstart: Touch input
Quickstart: Handling pointer input
Windows.UI.Xaml.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: Manipulations and gestures (JavaScript) sample
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

 

 

Show:
© 2014 Microsoft. All rights reserved.