Guidelines for hub controls in Windows Store apps
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.
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.
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.
The hub template is the starting point. Here’s an example of the nature app using the Microsoft Visual Studio hub template.
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.
This design is defined by a modular layout with a bold pop of color and graphic cropping of images.
|Color 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 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 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 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.|
This design juxtaposes an edge-to-edge composition of vertical panes with organic elements to create an earthy yet modern aesthetic.
|Color An earthly color palette that consists of green, black, and brown complements the nature images.|
|Typograpy 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 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 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.|
This design employs a structured columnar layout with a soft color scheme and images to create a calming feel.
|Color A soft color palette that consists of light neutrals creates a calming feel.|
|Imagery Neutral or sepia-toned images complement the soft color scheme. Similarly toned images create cohesion across the layout and reduce visual noise.|
|Graphics Circular, transparent graphics playfully break up the otherwise linear composition.|
|Composition 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 Drawings or interesting types of media break up large blocks of text. The sketch here gives texture and personalization to the article.|
This variation features an angular motif to frame the imagery and create background interest.
|Color The app uses a light color palette with bold colors for the angular accent shapes.|
|Typography 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 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.|
- 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.
- For designers
- Command patterns
- Navigation patterns
- 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)