Central app hub with panel sections (hub control) (Windows Phone Store apps)

The model presented in this topic is similar to the model described in Central app hub with home page menu (hub or pivot control) for Windows Phone. Just as in the previous case, you have different areas of functionality to expose to the user. The difference here is that you can present all your main UI at the top level with no need for a home page menu.

Central app hub UI for soccer team management

Central app hub UI for soccer team management

If your app doesn't have subareas to navigate into, all of your UI can be in one set of horizontally accessible sections. You can still use the hub control, but in this case you don't need to have a home section. Such is the case with the People Hub on the Windows Phone. The following figure shows that the basic layout of the hub is still the same.

The People Hub

The People Hub

With the People Hub, each section holds its own unique UI and presents an area of functionality. The difference between this model of design and the one described in Central app hub with home page menu (hub or pivot control) for Windows Phone is that you aren't just resurfacing lower areas of the app in the hub. In the previous model, the sections to the right of the home section give you a quick look at content that you would access through navigation with the menu. With the model described here, your sections don't resurface areas found somewhere else.

A section for each area

For your design, you determine which section to be selected when the app launches. One option is to select the section that the user was at when he or she last exited the app. You may also decide to always select the first section. The first section is the one with the background image flush to the left with the hub title's leftmost edge visible above it.

You can decide how many sections to the right to have, but we recommend that you have no more than four sections in total. If you have more than four sections, users have a difficult time keeping track of where they are.

You can put any UI you like in each of the sections. If you have four main feature areas, you can put one area in each of the four sections. The first section can be designed with the content that you think users are most likely to want to see when the app starts. The preceding figure shows this type of use of the hub as a central application hub.

Each section of the hub holds items to click that take you to the details for that item. For example, the People Hub has a what's new section with items to tap. The items are presented in a vertically scrolling list and might represent posts to Facebook. Clicking one of them navigates away from the hub and into the details of that post. There are multiple hit targets for each entry in the what's new section. One takes you to the post to see responses to the post. The other hit target is the person's name. Tapping this navigates you to a pivot control for that person, where you can see several pivot items of information about them.

Another example

Each section can be its own distinct area and not necessarily relate to the other sections. Navigation away from the main hub still occurs as users tap content in the individual sections. The navigation is into the details of what you tapped and not into a completely new subarea as from a home section menu.

The Samsung Now app has three sections in its use of the hub control as a central app hub. The theme of this app is to show users info that they might want quick access to in the morning and throughout the day—weather, news, and stock market info.

Samsung Now app

Samsung Now app

The user can still navigate away from the hub. For example, clicking a stock symbol in the stocks section takes you to a single page with details about that company.

Advice

Both the Central app hub with home page menu (hub or pivot control) for Windows Phone topic and this topic use the hub control, and a lot of the same advice and cautions mentioned there apply to its use here.

Related topics

Hub

Pivot

 

 

Show:
© 2015 Microsoft