Sign in
Table of contents
Table of contents +
TOC
Collapse the table of content
Expand the table of content

Semantic zoom

David Hale|Last Updated: 2/25/2016
|
1 Contributor

    [ Updated for UWP apps on Windows 10. For Windows 8.x articles, see the archive ]

    A semantic zoom control enables the user to toggle between two different views of the same data set. It changes the parameters and layout of a graphical representation and modifies the display of the structure and selection of data.

    Important APIs

    Features:

    • An app can contain only one semantic zoom control.
    • 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

    An address book is one example of a data set that can be much easier to navigate using a semantic zoom control. In this example, the semantic zoom makes use of a jump list. 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.

    [This article contains information that is specific to Universal Windows Platform (UWP) apps and Windows 10. For Windows 8.1 guidance, please download the Windows 8.1 guidelines PDF.]

    Samples (XAML)

    Samples (DirectX)