8 of 10 - Understanding Pivots and Panoramic view controls

8 of 10 - Understanding Pivots and Panoramic view controls

  • Comments 3
  • Likes

Two signature components of the WP7 platform are the panoramic control and the pivot control, with them we can create experiences that engage and delight the user. Although both may look like they serve the same purpose they were built to serve very different ones.

Unlike standard applications that are designed to fit within the boundaries of the phone screen, the applications using panoramic view or the pivot control offer a unique way to view content by using a long horizontal canvas that extends beyond the confines of the screen. That is where the similarity ends. Understanding the differences in these controls will help you design a better application.

Explore, Panorama
A panorama evokes interest—it provides featured content, occasionally dynamic, attracting user attention. A panorama is also great at aggregating information from multiple sources. Similar to a magazine cover, panoramas allows users to explore content that highlights what is more relevant for them, serving as an entry point to further action. Panoramas should not provide the standalone interaction of an application—it should entice further navigation to task specific features, completing the whole user experience. Imagine a cookbook app, the panorama may showcase the recipe of the week, what your friends are cooking, what’s featured on your local market and other relevant, enticing content. The recipe step by step, your notes or how to connect with friends could be accessed from the panoramic view but the task oriented tasks shouldn’t, that’s when pivots are for.

panorama

Focus and filter, Pivots
If it is important to filter sort or organize content within your application, then your application should use a pivot. The pivot titles should be natural categories of the data that you are presenting. The left to right navigational affordance will help users efficiently find the information that they seek.

In our imaginary cookbook pivots will be used to navigate the top sections of the app like Recipes, reviews, my favorites, and what my friends are cooking.

pivots

Recommendations for Pivots
Unlike tabs that are all visible on one screen, pivot titles will be hidden as they fall beyond the boundaries of the screen. Pivots facilitate browsing and exploring. Therefore you should try to keep the number of pivots to about 6 or 7 categories at a maximum. If you have to filter or navigate more than six sections the use of pivots would not be efficient as the user will not be able to remember those sections or would be an exhausting task to browse many pivots until finding the right one. If the number of categories you want to use exceeds 6 or 7, then we recommend that you split them using an item list first (figure below) Indeed there are some scenarios where it may make sense to use a pivot even when you have more than 6 or 7 categories, for example months of the year. In this case there would be 12 pivots, and the chance of a user’s getting lost in the categories is pretty low. However, even this example can lead to some really bad scenarios … you don’t want your pivots to itemize sequential days of the year, because they’ll go on forever (seemingly)!

MORE-THAN-SIX-PIVOTS-small

You can download Photoshop templates for pivot and panorama controls here.

I hope this will help you to fully leverage the pivot and panoramic controls for your app.

- Alfred Astort
Follow the Windows Phone Design Team on Twitter: @WPdesignteam

3 Comments
You must be logged in to comment. Sign in or Join Now
  • How wide should each panel of a panorama view be? i see that the screen size is 480x800 and I am assuming each panel should be less than that since in the panorama view, the user should see a little bit of the next panel. Is there a protocol for how wide each section of the panorama should be? Thanks.

  • cdcragg
    1 Posts

    You can change the title font.  Its just harder than it should be.  You have to access the title template.  Example:

    <controls:Panorama Name="Panorama1" Title="EOOSExec" >

               <controls:Panorama.TitleTemplate>

                   <DataTemplate>

                       <TextBlock Text="{Binding Content, RelativeSource={RelativeSource TemplatedParent}}" FontSize="100" Margin="0,50,0,0" />

                   </DataTemplate>

  • Pivot & panorama controls are great. The main menu of my game - TouchMeQuick is simply one big panorama control.

    I just wish they were more customizable - for example, when you change the font of the title across the top of a panorama, it does nothing.