Guidelines for hub controls in Windows Store apps

Applies to Windows only

wireframe of a hierarchical Food with Friends app

Description

The hub control uses a hierarchical navigation pattern to support Windows Store apps that require a relational information architecture.

This navigation pattern is most useful when app content can be organized into distinct, yet related, sections or categories with varying levels of detail that should be traversed in a preferred sequence or order.

This control is a starting point for designing a visually stunning app. It gives you a framework and the flexibility to customize your app to fit your brand. The hub page should have visual variety and draw users into the app, from the landing page, to the section pages and detail pages.

You can use a hero image or content section for the first group.

horizontally panning hub template with hero tilevertically panning hub template with hero tile

Use a large image for the hero that may be cropped both vertically and horizontally without losing the center of interest.

Here is an example of a single hero image and how that image may be cropped for landscape, portrait, and narrow width.

hero image cropped for different window sizes

Examples

The hub provides a great deal of design flexibility. This lets you design apps that have a wide variety of compelling and visually rich experiences. The following sections show a nature app that illustrates a range of design and style possibilities, through the use of the color, typography, images, graphics, and composition.

Bing News app demonstrating the standard hub control

The hub template

The hub template is the starting point. Here’s an example of the nature app using the Microsoft Visual Studio hub template.

Landing page:

example nature app with basic hub template

Detail page:

example nature app with basic hub template, detail page

The content is clean and organized but is not differentiated from all the other apps that also use the same template. You should use the template only as the base of your app, and build upon it to create a truly unique experience.

Variation 1 - Modular

This design is defined by a modular layout with a bold pop of color and graphic cropping of images.

variation 1 of example nature app

Landing page:

variation 1 of example nature app, landing page

Detail page:

variation 1 of example nature app, detail page
color palette for variation 1 of example nature appColor   The graphical impact of color enhances the content and creates visual structure to an overall layout. In this example, the color palette consists of cool grays with a punch of bold and vibrant color. The landing page uses bright red as a background color of one section to complement a similar shade of red in an image. The bold colors appear balanced by the neutral use of gray. They are designed to complement the content, not compete.
imagery for variation 1 of example nature appImagery   Photography is a large focus of this design. The images were carefully chosen for bold colors and graphic crops. The images are full-bleed or placed at the app edges to make the experience feel very immersive. Images help present content in a way that makes it visible and reveals context and meaning. If a hero image is primary, then surrounding imagery can support that effect and not compete.
composition for variation 1 of example nature appComposition   Hero imagery tends to come to the fore due to its size and strong graphical impact. Each group to the right of the hero image includes a distinct composition containing text and images. The composition and visual direction takes into account a layout that best represents the different requirements per group. The order of groups supports the overall content hierarchy and horizontal structure of the app.
typography for variation 1 of example nature appTypography   In this example, the use of type size and color support the content hierarchy and the structure of the interface. Size, position, and spacing are logical to the hierarchy of the information presented. In the same sense that the hero image is an exception in size and presentation, the type for the hero can be an exception, depending on the language requirements. The data-driven models, reflected in the three groups to the right of the hero, are tied together through a consistent title treatment and alignment to the underlying grid.

 

Variation 2 - Edge-to-edge vertical panes

This design juxtaposes an edge-to-edge composition of vertical panes with organic elements to create an earthy yet modern aesthetic.

variation 2, edge-to-edge vertical panes, of an example nature app

Landing page:

variation 2, edge-to-edge vertical panes, of an example nature app, landing page

Detail page:

variation 2, edge-to-edge vertical panes, of an example nature app, detail page
color palette for variation 2 of example nature appColor   An earthly color palette that consists of green, black, and brown complements the nature images.
typography for variation 2 of example nature appTypograpy   This design uses Segoe UI in light and regular weights and in a variety of sizes. Scale and transparency of the type is used to provide graphic interest in the hero section, group titles, and points of interest on the map.
graphics for variation 2 of example nature appGraphics   A contour map graphic in the hub hero section reinforces the nature theme and provides visual contrast to the grid organization of the app.
composition for variation 2 of example nature appComposition   The app is composed of colored vertical panes of text and images. Elements such as circular accent images, group headers, and pull quotes bridge across the vertical panes to add interest to the composition and draw the eye to key content areas.

 

Variation 3 - Structured columns

This design employs a structured columnar layout with a soft color scheme and images to create a calming feel.

variation 3, structured columns, of example natrue app

Landing page:

variation 3, structured columns, of example nature app; landing page

Detail page:

variation 3, structured columns, of example nature app; detail page
color palette for variation 3 of example nature appColor   A soft color palette that consists of light neutrals creates a calming feel.
imagery for variation 3 of example nature appImagery   Neutral or sepia-toned images complement the soft color scheme. Similarly toned images create cohesion across the layout and reduce visual noise.
graphics for variation 3 of example nature appGraphics   Circular, transparent graphics playfully break up the otherwise linear composition.
composition for variation 3 of example nature appComposition   Delicate 1px gray lines separate different groups within the hub. Small typography composed against liberal amounts of whitespace further reinforce the calm aesthetic of this app.
illustration for variation 3 of example nature appIllustration   Drawings or interesting types of media break up large blocks of text. The sketch here gives texture and personalization to the article.

 

Variation 4 - Angular

This variation features an angular motif to frame the imagery and create background interest.

variation 4, angular, of example nature app

Landing page:

variation 4, angular, of example nature app; landing page

Detail page:

variation 4, angular, of example nature app; detail page
color palette for variation 4 of example nature appColor   The app uses a light color palette with bold colors for the angular accent shapes.
typography for variation 4 of example nature appTypography   The design uses Segoe UI for the body text but contrasts it with Bebas Neue for the title and group header text. Using a different typeface is a quick and effective way to create a unique feel to your app.
graphics for variation 4 of example nature appGraphics   This app uses a standard hub composition of a hero image followed by separate groups containing lists. However, the addition of angular graphic elements both in the hero and as background images makes this design feel dynamic and distinct.

 

Dos and don'ts

  • Use interactive headers and place the chevron glyph (>) at the end of the header text to indicate that there is more content. For more information, see the Hub section of Controls (XAML with C#/C++/VB) or the Hub section of Controls (HTML with JavaScript).
  • Do not create a hub within a hub. Use interactive headers to navigate to another section or page instead.
  • Dynamically reflow the content in groups to accommodate different window sizes. For more info, see Guidelines for window sizes.
  • If you have a lot of sections, consider adding semantic zoom to the hub. This also makes it easier to find sections when the app is resized to a narrow width.
  • Make a thoughtful choice of imagery for the main app content that works well with overlaid text.
  • Use the hub template as a starting point and customize the layout to best reflect what your app is great at. You can customize the following aspects of the hub control:
    • Number of sections
    • Type of content in each section
    • Placement and order of sections
    • Size of sections
    • Spacing between sections
    • Spacing between a section and the top or bottom of the hub
    • Text style and size in headers and content
    • Color of the background, sections, section headers, and section content
  • Avoid using vertically panning sections within a horizontally panning hub. Swipe selection and mouse scrolling will not work as expected. For more info, see Guidelines for panning.

Related topics

For designers
Command patterns
Navigation patterns
Layout
Guidelines for back buttons
Guidelines for app bars
Making the app bar accessible
Hub control for Windows Phone apps
For developers (HTML)
Hierarchical navigation, start to finish
WinJS.UI.Hub object
WinJS.UI.AppBar object
WinJS.UI.NavBar object
WinJS.UI.BackButton object
HTML Hub control sample
HTML AppBar control sample
HTML NavBar control sample
Navigation and navigation history sample
Your first app - Part 3: PageControl objects and navigation
Adding app bars (HTML)
Adding nav bars (HTML)
Navigating between pages (HTML)
Using a hub control for layout and navigation
Navigating between pages
For developers (XAML)
Hierarchical navigation, start to finish
Windows.UI.Xaml.Controls Hub class
Windows.UI.Xaml.Controls AppBar class
Windows.UI.Xaml.Controls CommandBar class
XAML Hub control sample
XAML AppBar control sample
XAML Navigation sample
Your first app - Part 3: Navigation, layout, and views
Your first app - Add navigation and views in a C++ Windows Store app (tutorial 3 of 4)
Adding app bars (XAML)
Navigating between pages (XAML)
Using a hub
For developers (Windows Runtime apps using DirectX with C++)
Creating an app bar or Setting (DirectX)

 

 

Show:
© 2014 Microsoft