WINDOWS 8 DESIGN HANDBOOK

Designing the Detail Page

The Detail Page is the deepest level of a Windows 8 application. It should contain more and sometimes new information from the page before. Keep in mind that detail pages are used to end a user's flow and complete a specific experience of your Windows 8 app.

detail page tablet

1. GUIDES & VISUAL RAIL

windows 8 visual rail dont

Whether you're using the standard Windows 8 visual rail or you’ve created your own that makes sense for you app, don’t stray from those guides in different pages of your app.

windows 8 visual rail do

Do maintain a consistent visual rail and set of guides throughout your app.

2. BACK BUTTON

windows 8 visual rail dont

Don’t neglect to include a way back for the user, or implement a non-native way of doing so.

font wrapping do

Do provide a back button in the top left corner of the page.

3. STICKY CONTENT

windows 8 visual rail dont

Avoid allowing the back button and header to scroll offscreen with the page’s content.

font wrapping do

Do design the header to remain persistent in the UI, if possible.

4. LOGO

windows 8 visual rail dont

Don’t try to maintain your app’s logo from the homepage if it means that the title of the detail page becomes can’t be positioned correctly.

font wrapping do

Do consider alternate ways of including your app’s logo, if maintaining it on every page of your app is important.

5. ADDITIONAL CONTENT

windows 8 visual rail dont

Don’t make the detail page a larger version of its parent page, with no additional content or information.

windows 8 visual rail dont

Do make the user’s investment of visiting a new page worthwhile by providing new information and content in addition to the information from the parent page.

6. NAVIGATION

windows 8 visual rail dont

Don’t include breadcrumbs or other navigation on the canvas.

windows 8 visual rail dont

Do consider placing navigation in the top app bar to avoid forcing users into a lot of clicks to navigate from the detail page.

7. HUB ORDER

windows 8 visual rail dont

Don’t ignore the order in which you choose to arrange the hubs on the detail page.

windows 8 visual rail dont

Do order the hubs based on their importance to the user.

8. VISUAL LOOK & FEEL

windows 8 visual rail dont

Don’t dramatically change the visual identity of your app between pages without good reason.

windows 8 visual rail dont

Do maintain a consistent design language when moving from page to page within your app.

9. OTHER CONSIDERATIONS

windows8 design terminology splash screen

Don’t disregard everything else that’s important to laying out a page in Windows 8, from Designing the Hub View

Do observe all the guidelines found in this handbook, including those that are applicable beyond the detail page specifically.