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.

live tiles tablet

1. CONTENT LOADING

content loading dont

Don't add loading indicators on your hub page.

content loading do

Do show an extended splash screen with a loading indicator before showing the hub page.

2. PANNING DIRECTION

panning direction dont

Don't design hubs that pan vertically.

panning directon do

Do design hubs that are laid out horizontally.

3. SCROLLABLE AREAS

scrollable areas dont

Don't add scrolling areas within a scrolling page.

scrollable areas dont

Do present your content front and center. Don't hide it in scrollable areas.

4. READ MORE

read more dont

Don't use buttons or links like "read more" alongside your tiles or content.

read more do

Do make your hub titles large enough so they can be tapped easily. Optionally indicate the number of items in your hub.

5. ACTIONS

actions dont

Don't add buttons and command like 'edit', 'add', 'delete' on your hub page.

actions do

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

6. NAVIGATION

navigation dont

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

navigation do

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

7. SEARCH

search dont

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

search do

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

8. APP BAR

app bar dont

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

app bar do

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

max width dont

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

max width do

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

10. CONTENT OVERFLOW

content overflow do

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

content overflow dont

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

11. CONTENT SCROLLING

content overflow dont

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

content overflow do

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.