WINDOWS 8 DESIGN HANDBOOK

Designing a Hub Page

The home view is the top level of a Windows 8 app where all of the app's main content hubs are shown. It is sometimes referred to as "Hub View" or "Hub Page." When designing the home view of your app, there are some important things to consider, both in terms of usability and technical limitations of Windows 8.

5. ACTIONS

Do place these commands in the app bar. Only place essential commands on your page.

6. NAVIGATION

Don't place navigation items on your hub page that are not accompanied by content.

Do always accompany hub titles with content. Use semantic zoom to quickly navigate between hubs.

7. SEARCH

Don't place a search field on your hub page.

Do integrate your app with the built-in search charm.

8. APP BAR

Don't leave out an app bar on your hub page.

Do try to find a use for an app bar on your hub page. Windows 8 users expect this behavior.

9. MAX WIDTH OF HUB

Don't make users guess whether there are more hubs past the edge of the screen.

Do let the next hub show so that users know there is more content to see.

10. CONTENT OVERFLOW

Don't try to fit all your content in the viewport.

Do flow your content outside of the viewport and make sure it looks cut off to indicate panning.

11. CONTENT SCROLLING

Don't crop scrolling content at the left or right of the screen.

Do allow scrolling content to flow beyond the edge of the screen naturally.

CONTENT OVER CHROME.

Showcase content on your hub page instead of burying it deep. Avoid chrome - things like buttons, panels, navigation items, etc. As much as possible, add actions like 'add,' 'edit,' or 'delete,' in filters in the bottom or top App Bar.