Table of contents
TOC
Collapse the table of content
Expand the table of content

Semantic zoom

Jim Walker|Last Updated: 5/4/2016
|
3 Contributors

The semantic zoom control enables the user to zoom between two different views of the same content so that they can quickly navigate through a large data set. The zoomed-in view is the main view of the content. You show the complete data set in this view. The zoomed-out view is a higher-level view of the same content. You typically show the group headers for a grouped data set in this view. For example, when viewing an address book, the user could zoom in on a letter and see the names associated with that letter.

Important APIs

Features:

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

Examples

A semantic zoom used in the Photos app.

A semantic zoom used in the Photos app

An address book is one example of a data set that can be much easier to navigate using a semantic zoom control. 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).

example of semantic zoom used in a contacts list

Recommendations

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

Samples (XAML)

Samples (DirectX)

© 2016 Microsoft