Pivot and Hub Controls: Design Guidelines
The pivot and hub (former panorama) controls are a little bit confusing for designers, especially those coming from other ecosystems. Each one of these controls has a specific purpose and knowing how and when to use each one makes the difference between a fluid and easy to use UI and a complicated and confusing one.
Regardless of which one of the two controls you decide to use, remember, they are very heavy on both memory and CPU: having many pivots/hubs in a single app and having the user constantly switch between them may cause memory leaks. So you should take this into consideration when designing your app. It is better to use simple pages whenever possible and use hubs/pivots only when they actually make sense (I know they are very attractive from a designer’s point of view).
How does one assert if it is better to use a simple page navigation or a pivot/hub?
Simply count the number of gestures the user needs to make in order to get to the information he requires: the fewer gestures, the better! (Just ignore the memory/CPU usage for now).
It is very tempting to just toss your entire application in a hub and let the user fend for himself. However, the more views a hub/pivot has, the more gestures the user needs to make to get to the data he needs. What if the user is only interested in the data displayed 4 views away and the rest is useless to him? Well, he needs to make 4 gestures to get there, and probably even more to actually get to the details. The sad truth is, most apps don’t need more than 3-4 views in a hub/pivot, if the design is correct.
Making efficient use of pivots and hubs.
The documentation available on these 2 controls is pretty helpful: use a pivot control when you can group information in such way it can be easily segregated while still having some common trait between groups. The purpose of a hub is to allow the user to discover stuff. You can take a look at apps already present on the phone. The former “hub” apps (music+video, photos, people) are great examples of how to use the hub control. Notice there is only minimum info and UI elements that redirect you to other pages which display the actual info.
So basically, the rule of thumb is as follows: group your info in such way it makes sense for the user, and provide shortcuts from your main hub view to pages (simple or pivots or even hubs, depending on the situation) so the user can get more details.
The case study is the music app: instead of displaying artists, albums, all songs, playlists, genres, podcasts, radio, now playing and recent items each in one view, it provides shortcuts so they can be accessed faster. This minimizes the amount of gestures the user needs to perform in order to get the data he needs, and also gives equal importance to all information (if the user doesn’t care about podcasts, he won’t have to scroll through the podcast view to get to the radio view). This way, the user is in control and he can decide which data is more important to him. If all information was presented in one hub, the developer decides which data is more important for the user, which may not always match reality.
The pivot control should be used to group information in a way it makes sense, and display headlines best describing said information. The music app, is, again, a very good example (although it is bordering on the limit of the pivot size): You can view the songs grouped by album, genre, artist, playlists and a final view with all songs. You obviously can’t show them all in one view, but you have to show them all regardless. All these views share something common: the user’s music library. But they data is grouped differently, in a way it makes sense and can provide easy access. Therefore, the best decision is to use a pivot. Of course, you can provide direct shortcuts to these as well from the main hub view and use simple pages if you so desire. Pivot controls can display large lists of objects.
It is ok to use pivots when your application resembles a tabbed windows application, and the user doesn’t need to do a lot of back and forth between the tabs. This is especially true for “fill in the form” type of applications.
Performance considerations
As mentioned earlier, the pivot and hub controls are very heavy on memory and CPU usage. The scrolling thing is responsible for this. The designers (and developers) need to take into account that a lot of information displayed on this controls, especially the hub control (the pivot is somewhat less demanding), may cause huge performance issues and memory leaks, which in turn might make your app unsuitable for publication. Here are some guidelines to improve performance:
· Avoid large lists of items in a hub control. Use a pivot or a simple page instead.
· Always use images sized accordingly: if your image control is 41x41, don’t squeeze a 400x400 image in there: not good for memory usage (this is valid for any application that might use images).
· Make sure you always use virtualized controls (ListView, GridView, LongList(Multi)Selector, VirtualizedStackPanel etc) when displaying lists of objects.
· Avoid navigating back and forth between hubs or pivots or both. This may cause memory leaks on some devices.
· Don’t use more than 6, at most 7 views in either one of these controls. If your app design demands this, then you probably didn’t design your app properly and you should consider providing shortcuts to simple pages displaying said info separately. This is both due to the heavy workload on the hardware and difficulty of user interaction. Exception to this rule: “fill in the form” type of app (you won’t see many of these on the marketplace, but for internal use, they are quite widespread).
· Regardless of pivot or hub, always make sure you display headlines, and not the entire information about an element: use a simple page for details view.
You will notice the pivot and hub controls always display some sort of animation: if the view is too heavy on graphical stuff, the controls will not animate properly anymore and you will notice drops in frames per second. If you can display your data and notice the animations performing properly, then you designed your app properly.
See Also
Another important place to find a huge amount of Windows Phone related articles is the TechNet Wiki itself. The best entry point is Windows Phone Resources on the TechNet Wiki.