Partager via

Central app hub with home page menu (Panorama or Pivot control) for Windows Phone

  • Article

[ This article is for Windows Phone 8 developers. If you’re developing for Windows 10, see the latest documentation. ]

You may be designing an app that has a lot of features in it. When you look at the features, you may decide that you can organize them into distinct areas. These areas will end up being separate parts of the app that the user will want to visit. You’ll need to design an easy way for the user to navigate around these UI areas. This type of app needs a central application hub from which the user launches into each subarea of the app.

Imagine designing an app for managing a soccer team, for example. This app would require several areas of functionality—one for calendaring of games and practices, another for team roster info, another for scores and player stats, and yet another for video footage from past games. You would want to provide a means for the user to navigate to each of these different UI areas. You can do this by implementing a central application hub with a home page that is displayed when the app starts.

Central application hub UI for soccer team management

From the central UI hub, the user can navigate to any area in the application. Once they are taken to a subarea, you present them with whatever UI is necessary at that point. For example, in the soccer team app, the user can go from the central application hub page to the page that lets them see player stats for a given match. When the user is done with a given subarea of the app and they want to go to a different subarea, they would return to the central application hub first. The user cannot go directly from Scores and Stats to Calendaring. He or she would have to first go back to the central application hub.

Tip

Using a central application hub with a home page for navigating to different areas of your app is a great design that enables users to interact efficiently with your app.

There are several ways to visually present the application hub to the user. We recommend that you use the Windows Phone Panorama control. This topic describes this design and then shows you variations that you might also consider.

This topic contains the following sections.

Using the panorama control as the application hub

Microsoft provides a UI control called the Panorama control that can be used as the central application hub. This control allows the user to navigate into all of the areas of functionality in the app. The Panorama control is structured as follows—a Panorama background image that is behind the whole control as its background, a home panel where you land when the app starts, and additional panels that segment your UI at the top level of the app.

Music + videos hub

The Panorama control presents the user with a canvas surface that stretches out larger than the screen area. The user moves across the canvas horizontally, panel by panel, by flicking across them. When the app starts, the user is taken to the first panel of the panorama. There are variations of usage from here depending on how you want the navigation to work. Each of the variations is explained.

Home panel

This first panel at the far left can be used as the home location as a starting point to navigate into subareas of the app. This panel presents the menu of areas for the user to select from. In the Music + Videos Hub app shown in the preceding figure, a finger tap on radio takes you to the radio page that is really a subapplication inside the Music + Videos Hub app. The panorama UI is completely replaced and the user is presented with the radio UI. If the user now wants to go to the podcast area, the user would back navigate to the panorama home panel using the hardware Back button and then tap the podcast entry in the menu list. A scroll view can be used in the home panel if the list of subareas is longer than can fit on the display.

Radio page of the Music + Videos Hub app for Windows Phone 7

The list of locations to navigate to in the Home panel could contain entries that launch you into a completely new app. For example, the Music + Videos Hub app home page has an entry to take you to the Windows Phone Store. Tapping this launches you into the Store music subarea that is itself a Panorama control.

Panels to the right

The panels to the right of the home panel contain UI that you want to be easily accessible for the user. It’s up to you how to use them. Don’t confuse the user by having subareas that are accessed in different ways. Instead, use these panels to the right to contain some type of summary info that pertains to what’s in the subareas. For example, in the case of the Music + Videos app, there are two additional panels that show recently accessed media.

The history panel in the Music + Videos app is a convenient way to not have to navigate down to a subarea and gives you quick access to what you recently listened to or viewed. If you went into the subarea of music and listened to a certain song, that song now shows up in the history panel for quick access. So in this case the panels give quick access to content you visited in the subareas.

The Facebook app is another example of an app that uses the Panorama control to provide the user with an easy way to navigate around its functionality. It again has the same home panel that presents a list of areas that the user can navigate to. For example, a tap on the friends entry takes the user to the UI that manages the list of his or her friends.

At the top-level Panorama control, the panels to the right are basically used to provide quicker access to what the designers thought would be the most useful views to surface at the top level. The most recent panel in the panorama is actually UI from a subarea. To get to it from the home panel, tap news feed; then in the Pivot control you are taken to this subarea, which is actually a Pivot control. The news feed subarea Pivot control has these pages: most recent, photos, links, and videos. The designers thought that instead of having a user navigate down into news feeds and then over to most recent, they would also expose it as a panel in the top Panorama control. A similar thing is going on with the photos and events panels in the top Panorama control.

Central application hub UI for the Facebook app

Using an image grid

Instead of displaying a list of areas to navigate to from your home page, you might want to display a grid of images to select from. The same thing is being accomplished; it just looks a bit different. With images, you get a visual iconography that might make it easier to determine where that selection takes you. Each image could have text overlaid on top of it to give more info about that app area and its activity.

If you had a 3 x 3 grid, you could have up to nine images to select from if needed. From the home panel that hosts this image grid, the user can click any images to navigate into different feature areas that the app offers.

This home panel can actually be an area that spans more than one displayable panel width. For example, you could have the home panel of images extend horizontally to the right to take up a bit more room if you needed it. The Kelley Blue Book app has the grid span to the right, as seen in the following figure. To get to the rest of the images, you just flick to horizontally pan over. The Panorama control home panel in this case is a double-wide panel.

Application hub UI for the Kelley Blue Book app

Don’t create a grid of images that scrolls vertically, because it’s too confusing to the user.

Not starting on the home panel

Even if you use the Panorama control and have a Home panel that acts like a menu or hub to navigate into feature areas of your app, you don’t need to make this the beginning landing spot when your app is opened. The reason you might choose to have some other panel shown first is just for the impact you can make. For example, if you had an app that displayed movies and show times, you might have a home panel that has a list of selections for app sub-areas. Instead of having the user land here on something that’s not so interesting, you could have a panel that shows graphics from the latest, most popular movies. That way, the user opens to something a bit more eye catching.

When you open the eBay app, you don’t start out on the Home panel. Instead, this design starts users in the panel that has the featured deals of the moment. Flicking to the right, you get to the application hub home panel with images to click to navigate to the app subareas of Watching, Selling, Buying, and Messages. Note also the use of the Search text box at the top. This is also a useful UI element to place at the top to quickly find things from.

Application hub UI for the eBay app

Customized menu of UI feature areas

There are alternatives to using the Microsoft-provided Panorama control. The panorama gives you the ability to have multiple panels at the top level. You might not need these panels, though. You instead could have a simple list on a single page as shown in the following figure. This would be the page the user is shown when the app opens. This app uses an icon to the left of a text title and description for each subarea to navigate to.

Application hub UI for the easy diary app

You may decide that you want a unique interaction experience presented to the user where you use some graphic background with the navigable subareas presented in some unique artistic way. You may want to do to this to establish a branding for yourself. This is more applicable for some types of entertainment apps. The following is an example of a visually engaging home page.

Mycomic app

Combine like applications into one

As already mentioned, your app might have enough distinct areas of functionality that you might have thought about splitting up these features into separate apps in and of themselves. You don’t need to do this; you can still have a single app. The main screen that’s displayed when the app opens acts as a starting location to access the actual subapplications that make up your single app. This main application hub page will be the page that’s displayed when users click your app icon and start your app.

We recommend that you avoid creating a separate Windows Phone application for each unique area that you have features for. The problem with this is that the user must exit one of your apps and then start another one. Imagine having nine different applications for the user to interact with. Instead, we recommend that you create a single application for users to start, and from this single starting point access the different areas of your app. You as the app designer want your users to be drawn in to your central hub and be able to see all that you offer on one central screen.

Levels of navigation

The difficult decision to make is how you split up your apps functionality and what levels of navigation you want the user to be able to go through. If you’re using the Panorama control with a home panel, you need to decide what UI is displayed when the user taps a selection from the list. A selection will navigate you away from the Panorama Application Hub and into a new UI control such as a single page or perhaps a Pivot control. We’lll use the Music + Videos Hub app home page as shown below to illustrate this.

Application hub for music+videos

In the case of the Music + Videos Hub app, the radio selection is a single UI page that lets you change the radio station you are listening to. In this subarea, there is no further use of list, Panorama, or Pivot controls to navigate in further. The music selection from the home page, however, presents different views of the songs you have. The following figure shows a portion of the UI tree to navigate through for the music selection.

Navigation tree for the music in the Music + Videos app

When you’re in the music area, a horizontally scrollable Pivot control is displayed. The pivot page you always land on first under “music” is the artists pivot page. From there you can traverse left or right through the different pivot pages. Each pivot page gives you a different way to view the songs you have to choose from.

When the user has navigated to the area they want in the app, you present to them whatever UI is necessary at that point. From any given app subarea, users actually accomplish their intended interaction. At this second level, it isn’t advisable to show them yet another list of areas to navigate into. It’s best to keep only the main page Panorama control and a second level of detail. From this second level, the user would return to the home page before going into another area of the app. The hardware Back button is what’s used to go back.

Using a background image

The Panorama control allows you to display an image that stretches across all of the panels. You can always have the same image, or you can programmatically change it from time to time to alter your theme. You can display an image that relates to the interests of the users in their use of your app. Use an image that isn’t too cluttered and won’t interfere with the UI content on top of it.

Background image

Multiple home panels

You might need more than one panel that has a list of subareas to navigate to. You might have a reason to separate out two different lists of areas of navigation. In this case, you would have two panels that both act as home panels.

Main launch screens

Your app may not be able to go directly to the Central Application Hub when it’s launched. The reason is that you might need to present some type of logon or password unlock to the user first before the user is allowed access to the app. You might also want to present some branding launch page to show users before they enter your app.

Login page UI for the easy diary app

See Also

Other Resources

Panorama control for Windows Phone 8

How to create a panorama app for Windows Phone 8

Pivot control for Windows Phone 8

How to create a pivot app for Windows Phone 8