App tabs (pivot control) (Windows Phone Store apps)

The App Tab pattern is used for multiple pages of UI that a user moves between often. This pattern is particularly useful if your app is based around a single theme (for example, movies, baseball, and so on). Each page would show the user something related to the overall data that is being presented throughout the app. The App Tab pattern might be what makes up your complete app, or it might also be used in a subarea of your app. For example, you might have the hub control as the main first level of your app (as described in previous topics), and then from there have the user navigate into a subsection of your app that uses the App Tab pattern (using the pivot control).

Imagine that you want an app that catalogs the movies you have in your home collection. You could use the App Tab pattern to provide several different filtered views of your movies. You might want one filtered view to show the movies marked as favorites of yours. Another filtered view might be just for action-type movies. Yet another filtering view could be those movies you've ranked in the order you'll be watching them when you have the time. You would, of course, also want a page to view the complete list of movies with no filtering.

The following figure helps you visualize this app structure. When the app is started, you end up on one of the filtered pages. From there you can horizontally scroll through each of the pages that act like tabs in your UI.

App tabs for Outlook Inbox

App tabs for Outlook Inbox

Each tab could basically be a different way to filter and view data that you want presented to the user. If the hardware Back button is pressed while on any of these filtered view pages, you would exit the app.

Use the App Tab pattern for apps that have a central data type that you present different filtered views around.

Using the pivot control as the App Tab implementation

You can use the pivot control to implement the App Tab pattern. This control allows the user to navigate right and left through each page (called a pivot item).

The Outlook client app from Microsoft uses the App Tab pattern because the app shows a single type of data: lists of emails with different filtering applied on each pivot item. When you look at your email Inbox with the Outlook app, you see three pivot items—all, unread, and urgent. This makes it easy for you to see only the urgent emails if that's what you want. That way, you don't have to scroll through the emails in the all pivot item to find the emails that are marked urgent.

Outlook client app

Outlook client app

Another existing app that uses the App Tab pattern is the Netflix app. Each pivot item shows lists of movies. The list on each pivot item is different because of the filtering that's applied. You can compare and see how each one is unique and useful. The instant pivot item shows movies you placed in that queue to be able to watch through your streaming device when you want. The home pivot item shows movies that Netflix thinks you might be interested in. The search pivot item shows movies that match your search keywords.

Pivot items are focused and efficient. Their primary focus is task-based action such as filtering, sorting, and showing related items. Hubs are expansive, aggregating, and exploratory. They're best used to promote and show recent relevant content. There are circumstances where one control is more appropriate than the other.

Netflix app

Netflix app

Tab-like functionality

Each pivot item is really a tab, and the tabs are listed across the top. As you can see from the Netflix app figure, the app is currently on the home pivot item and you can see that the genres pivot item is available to the right. To go to the genres pivot item, you just tap it, or pan to it.

Apps should minimize the number of pivot items they have. Users can become lost if they jump from pivot item to pivot item. Try to keep the number of pivot items to five or fewer. If you find you need more than that, then have one of the pivot controls contain a list control with links to tap to go to other pages or another level of navigation that is itself a pivot control. To understand if that's what you need, see List with details drilldown for Windows Phone.

Note  With the pivot control, you can move from item to item by tapping the item headers. This is something the hub control can't do.

Data filtering considerations

At the beginning of this topic, we said that the best use of the pivot control was to have each pivot item contain the same type of data, but just present a different filtering of that data. We also said that the hub control could be used to show sections with unrelated data on them. You could use the pivot control in this way too if the data was essentially different, but was still all associated with one type of subject matter. For example, if you had some info to present about New York City in an app for tourists, you might have a pivot control with a pivot item that contains interesting statistics such as location, population, and yearly tax revenue. Then you might have additional pivot items for info such as attractions to see and another pivot item for hotels to stay at.

The ESPN ScoreCenter app is an example of the App Tab navigation pattern where each pivot item contains heterogeneous data that's based around a central theme.

ESPN ScoreCenter app

ESPN ScoreCenter app

Combining the pivot control with a hub control

From the home page of a hub control, such as that of the Facebook app, you can tap a navigation item in the list and navigate into a pivot control. This is what happens with the profile selection from the Facebook home hub section. When the user taps the profile selection, they are brought to a pivot control that presents pivot items such as wall, info, photos of me, and so on. In this way, you can navigate from one control to the other.

Going from the main hub control to a pivot control inside the Facebook app

Going from the main hub control to a pivot control inside the Facebook app

You might be tempted to navigate from a hub home section selection to another hub. This isn't a good idea—you might confuse users because it's easy for them to forget what app they're currently in. The hub sometimes has a large stretched-out image in the background to keep a user anchored as to when they're at the top, and if they navigate to a subarea that is itself a hub with a different background, they will tend to get confused.

App bar in a pivot control

Since all of the data is of the same type, you can, in many cases, provide a bottom app bar which has buttons that relate to what is being shown. The Outlook app as shown in the following figure has an app bar which is always visible because it contains actions that the user needs that in some way affect what's being shown.

Outlook client app

Outlook client app

In the Outlook app, the app bar can allow the same actions no matter which pivot item you're on. You can see from the preceding figure that there are buttons to create a new email, reveal the selection boxes, switch folders, and re-sync your email. This, then, is another difference between the pivot control and the hub control, because you would probably never put an app bar along the bottom there.

Don't assume you can keep the same buttons at the bottom all of the time unless you carefully consider what's on each pivot item and it makes sense. Some uses of the pivot control might not keep exactly the same type of data on each pivot item.

"Home" pivot item

You can use the first pivot item to present a list of all the rest of the pivot items. This way, the user can tap one and jump directly to that pivot item instead of swiping to it. The list could also contain entries that start other apps.

You don't need to have the user land on the home pivot item if you don't want them to. In a movie-listing app, for example, instead of having the user land on the home pivot item, you could have them land on a pivot item that shows graphics from the latest, most popular movies. That way, the user opens to something a bit more eye-catching.

Related topics

Hub

Pivot

 

 

Show:
© 2015 Microsoft