WINDOWS 8 DESIGN HANDBOOK

Utilizing Semantic Zoom

Semantic zoom allows you to quickly see an abbreviation of all the content on a page. Think of semantic zoom as a smart scrollbar that lets you quickly jump between content sections.

splash screen tablet

1. WHEN TO USE SEMANTIC ZOOM

background image dont

Don't use semantic zoom if you can see all of your content without scrolling.

background image do

Do use semantic zoom when the page requires a lot of horizontal scrolling.

2. LAYOUT AND SCROLLING

background texture dont

Do not allow vertical scrolling in semantic zoom.

background texture do

Do allow horizontal scrolling in semantic zoom.

3. MAINTAINING CONTEXT

logo position dont

Don't create a completely new design in semantic zoom.

logo position do

Do maintain a similar visual style in semantic zoom.

4. FUNCTIONALITY

background image dont

Don’t include so much additional functionality and navigation inside semantic zoom that important aspects of your app can’t be used without it.

background image dont

Do keep semantic zoom free of other functionality.

5. APP BAR

login screen dont

Do not show the app bar during semantic zoom.

login screen do

Do keep semantic zoom free of other functionality.

6. BACK BUTTON

website url dont

Don’t show a back button in semantic zoom.

website url do

Do use the default behavior of exiting semantic zoom (pinch-zoom out or scroll using the mouse wheel with CTRL pressed).

7. MULTIPLE LEVELS

advertisements dont

Don't allow multiple levels of semantic zoom.

advertisements do

Do keep semantic zoom constrained to one level away from your content.

8. TITLES

loader dont

Don't change titles in semantic zoom

loader do

Do use the same titles as your content uses.

9. REMEMBER POSITION OF CONTENT

version data do

Don’t move the page to a different position in semantic zoom.

version data do

Do maintain the user’s position on the underlying page in semantic zoom.

10. DATA IN SEMANTIC ZOOM

branding dont

Don't show data in semantic zoom that isn't available on the underlying page.

branding dont

Do consider visualizing your data in a different way.