Semantic zoom

Applies to Windows and Windows Phone

semantic zoom for Alley Oop app

Semantic zoom is a powerful navigation tool. It lets you zoom out of a view to show you a summary of an app’s content. Instead of a simple optical zoom, semantic zoom can group data alphabetically, by category, chronologically, or by other groupings. Based on the Microsoft design principle of fast and fluid, semantic zoom gives you a summary view of the content while providing an efficient means of navigation. You can also display additional information about each group, such as number of items, number of games played, results, or scores. While navigating content is possible through panning and scrolling alone, semantic zoom unlocks additional navigational and organizational capabilities.

Semantic zoom in Windows

semantic zoom for Bing Health and Fitness app

A user performs semantic zoom with the pinch and stretch gestures. Moving the fingers farther apart zooms in and moving them closer together zooms out. In Windows Store apps, you can also hold down the Ctrl key while you scroll the mouse or scroll wheel. Semantic zoom takes advantage of the authentically digital Microsoft design principle by providing a multitude of useful ways to view content. By giving users quick exposure to the groupings of data within your app, you can reduce complexity and facilitate navigation to specific areas.

Innovation with semantic zoom

Semantic zoom allows you to change the structure and presentation of information based on the zoom level. You can create engaging solutions that are optimized for your most common user scenarios. Take advantage of semantic zoom to reduce complexity and provide additional clarity around the organization of your app’s content.

Examples

My Zoo

The My Zoo app is an example of a creative and playful implementation of semantic zoom. Zooming out reveals an alphabetical arrangement of the content where the app’s personality and brand are extended to the individual letters of the alphabet. Each alphabet character is filled with illustrations of animals that begin with that letter. This visual treatment facilitates smooth and easy navigation while providing unexpected moments of delight and discovery.

semantic zoom in the My Zoo app

zoomed out view of My Zoo app

 

Zappos

The Zappos app uses semantic zoom to provide quick and easy shopping for its customers. The classic zoomed in view showcases categories and subcategories of products with filtering options, while the zoomed out view offers a simpler consolidated layout. The transition between both views is smooth and fluid, encouraging exploration of the extensive catalog that Zappos offers.

semantic zoom in Zappos app

 

Animal Planet

The Animal Planet app uses semantic zoom to reduce complexity by simplifying its categories with a clean, typographic treatment. The zoomed in view is rich with full color photography, illustrations, and rotating content carousels. The zoomed out view displays a quieter grid of content types and allows users to confidently navigate to their category of choice.

semantic zoom in Animal Planet app

 

TouchMail

TouchMail has taken a truly innovative approach to semantic zoom. In this app, changing the zoom level also changes the level of detail displayed within rich visualizations of the contents of your inbox. TouchMail optimizes its users’ ability to quickly keep their inbox clean and organized, and keeps important emails at their fingertips when they need them.

semantic zoom in TouchMail app

Related topics

Guidelines for semantic zoom

 

 

Show:
© 2014 Microsoft