Guidelines for hub controls in Windows Phone Store apps

Applies to Windows Phone only

Parts of the hub control (hub header, hub section header, and so on)

Description

The hub control—on the phone, intended to be used in portrait orientation only—displays a series of sections that can be panned side to side. It's a full-screen container and navigation model for an app.

Hub (formerly panoramic) experiences are a part of the native Windows Phone look and feel. Unlike an app designed to fit within the confines of the phone screen, a hub app offers a unique way to view controls, data, and services by using a wide, virtual canvas which extends horizontally beyond the confines of the screen. On Windows Phone, these inherently dynamic views use layered animations and content so that layers smoothly pan at different speeds, similar to parallax effects.

Sections in a hub app serve as the starting point for more detailed experiences. Your goal should be to give users a visually rich content presentation.

Examples

Windows Phone app: a hub control

The user interface consists of layers, which move independently: a background color or image, a hub header, hub section headers, and hub sections.

If set, a background image is the lowest layer and is meant to give the hub its rich, magazine-like feel. Usually a full-bleed image, the background image is potentially the most visual part of the app.

The hub header identifies the app and it should be visible no matter how the user enters the app.

Hub sections are the component of the hub app that contain other controls and content. Hub sections move at the same rate as the touch pan or flick. A hub section header is optional for any given hub section.

Thumbnails can be an important element, linking to content or media on other pages.

Hub control with thumbnails

Usage guidance

Based on the requirements of the app, you can add several hub sections to the hub control—each one offering a distinct functional purpose. For example, one section might contain a series of links and controls, while another is a repository for thumbnail images. A user can pan back and forth through these sections using the gesture support built into the hub control.

Design guidelines

  • The hub control's behavior and rendering is supported in portrait orientation only.
  • A hub control can be themed, and you can override the default colors, and so on.
  • Use the wrap effect of the hub control for Windows Phone to wrap from the last section to the first section and vice versa. A hub that contains 1 or 2 sections will not wrap. A hub that contains 3 or more sections will wrap.
  • On Windows Phone, if you use an app bar in your hub, set the app bar’s mode to minimized. This mode is designed specifically to maximize screen space on a hub page. For more info, see App bar for Windows Phone.
  • Show a progress bar in the System Tray, or a full-screen “loading” indicator while your hub control is launching.
  • Show a progress bar in the System Tray when a section of a hub control is being updated or refreshed but isn’t blocking user interaction.
  • First visit: the first section shown should have the hub header correctly aligned on the left. There is no standard guidance for which section is the default; it depends on the content being presented.
  • For subsequent visits to the same hub control, take the user back to the section where they left off.
  • Don't create more than five sections in a hub control. This is for performance reasons and also to limit the number of areas that the user has to navigate through. Use fewer sections when the contents are more complex. Don’t overwhelm the user with lots of sections. With just four or five sections, users can get their bearings as to where they are and what’s to the left and right.
  • Don’t use a pivot control inside a hub control or vice versa. You can, however, link an item in a hub section to a different page containing a pivot control.
  • Don’t use controls that can pan or scroll inside a hub control. For example, putting a map control inside a hub section can make it difficult to use the hub control. The gesture input gets confused. For example, if you have a slider and try to slide it left and you’re in a section of a hub control, it’s unclear whether you want to scroll the section or move the slider. The solution for a control that needs gesture input is to put it in its own page and navigate to that. You can place a gesture-disabled control in a hub section—perhaps a map. You could overlay a button that activates the map. Pressing the button would navigate to a different page containing just the map. The user could then press the Back button to go back to the hub section.
  • For more guidance about when to use a hub control versus a pivot control, review the following topics:

Hub headers:

  • Use either plain text or images, such as a logo. You can also use multiple elements, such as a logo and text (or other UI elements).
  • Ensure that the font or image color for the header makes it clearly visible across the entire background image (because the two move independently). Use system fonts and styles unless there’s a need for a specific branded experience that uses a different font, size, or color.
  • Avoid animating the header, or dynamically changing its size.
  • For the sake of consistency, make the hub header match the launch Tile in Start.
  • When laying out your hub control, and designing the headers, avoid occlusion problems with the System Tray or other elements.

Hub section headers:

  • Use either plain text or images, such as a logo. You can also use multiple elements, such as a logo and text (or other UI elements).
  • Ensure that the font or image color for the header makes it clearly visible across the entire background image (because the two move independently). Use system fonts and styles unless there’s a need for a specific branded experience that uses a different font, size, or color.
  • Avoid animating the header, or dynamically changing its size.

Hub sections:

  • Keep the beauty of the hub control experience intact by being selective about the text and images included in section content so that the hub doesn’t become overwhelming and busy.
  • Take into account orientation if you use vertical scrolling. Vertical scrolling in a hub section is acceptable as long as the section’s width is greater than the screen width.
  • Consider hiding hub sections until they have content to display.

Background art

  • A dark, soft, and low-contrast background is best. Single-color, or gradient.
  • A subtle, unobtrusive photo in the background can make a hub control look visually compelling. Photos with lots of bright colors are to be avoided, though, because they can make the sections hard to read. One practical technique is to use a semi-transparent black or white filter (a rectangle) on top of the photo. You can do that in a bitmap editing tool, and then flatten the image.
  • A background image should span the entire hub control. That means its aspect ratio should match that of the hub control, and its size should consider the most common device resolution, the largest device resolution, and performance. The JPEG format is recommended to keep file sizes small.
  • You can switch from one background image to another, even while your app is running, but only one image can be displayed at a time.

Thumbnails

  • Use cropped images that highlight an identifiable subject rather than scaling down an entire image. If the image isn't identifiable without text, up to two lines of text can be used to identify the content.

Related topics

For designers
Command patterns
Navigation patterns
Layout
Guidelines for back buttons
Guidelines for app bars
For developers (XAML)
Windows.UI.Xaml.Controls Hub class
Windows.UI.Xaml.Controls HubSection class
Panorama control for Windows Phone
How to create a panorama app for Windows Phone

 

 

Show:
© 2014 Microsoft