Windows apps
Collapse the table of content
Expand the table of content

Semantic zoom

[This documentation is preliminary and is subject to change.]

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

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.

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 grid view or a list view, containing the items or the group keys as appropriate.

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.

:  

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.

:  

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

Examples

A screenshot that illustrates the standard semantic zoom control

Related APIs

WinJS.UI.SemanticZoom object

SemanticZoom class

 

 

Show:
© 2017 Microsoft