In this post we will talk about all we need to know to design Panorama controls for Windows Phone apps.
Let’s start by demystifying the Panorama control. As we mentioned in a previous post, the Panorama control is a beautiful user interface metaphor and thus we tend to over use it. I recommend we leave Panorama(s) control(s) to the end in your design process. That’s because it is by the end of the information architecture definition process that you will know best what information to highlight in a Panorama and how to do it. This approach comes from understanding that a Panorama control is like a magazine cover, in the case of being the main hub in your app, or as a spread within a magazine, if a secondary or tertiary hub.
I recommend reading the Choosing Between Panoramas, Pivots or Pages post for more information about when to use Panoramas.
Panoramas are great for showing only those few pieces of information you want to highlight in your app. The one or two top featured recipes of the day. The latest 10 results of your top 5 sports teams. The top 6 pieces of news or stock trades you are interested in. Basically, only a few pieces of information.
The metaphor of a magazine cover applies to the way a Panorama looks and feels but also on the way the Panorama is designed - that is, the methodology. Studying how actual magazine covers are designed will take your Panorama design skills to the next level. Go to your nearest magazine stand and pick up a few of your favorite magazines. Pick some sports, fashion, architecture, music and news magazines. Study the composition, layout, typography, color. But also try to think the way a magazine editor would think when she chose that particular portrait photo of a popular singer or that particular wide angle shot of a the latest tallest skyscraper in Dubai. Why did they choose to align things to the left or use that particular set of colors? Or how many featured articles are being highlighted? You will have to go through a very similar decision process to design a Panorama control and the content in it.
Here is a great series on designing magazine covers by Tony Quinn: The secrets of magazine cover design. The Time Magazine cover archive is too good not to share J Very Metro.
Ok, so first some design tips and tricks. Things to keep in mind when designing a Panorama:
Leave Panoramas until the end
Design Panoramas after defining the information architecture for your app, preferably even after designing all other pivots and pages in your app. You might know from early in the IA process that you will “eventually” need a Panorama… but don’t design it just yet even if it’s tempting. Just draw a big rectangle with the word Panorama inside it but don’t design it… move on and work on Pivots and Pages. In many cases, many, you will find you don’t even need a Panorama control and despite common belief you do not need nor require, nor should include a Panorama control on every Windows Phone app. Look at the Twitter app, only Pivots and Pages. Why don’t I need a Panorama in the Twitter app? Well because they provide natively pure streams of tweets. There’s no concept of “my top tweets” or featured tweets etc… While there are sponsored tweets, Twitter is being kind enough not to put those in our face with a Panorama (thank you Twitter!). Does that mean you couldn’t create your own Twitter client where you feature some tweets? You certainly have the freedom to do that - I just think that by understanding the IA for Twitter which is basically lists of tweets, you basically end up with a great scenario for Pivot controls.
Think of Panoramas as magazine covers
But now look at the Facebook app. Facebook as an experience does have tons of things we’d like to see in a nicely featured area, things like top stories, newest friend photos, my status, notifications and more. So in Facebook the challenge becomes selecting only the few set of pieces of information we want to present in the Panorama.
Note: This is the previous version of the Facebook app but the new one emphasizes this magazine cover thinking even more…
Design Panoramas as full spreads, not in chunks
Even though Panoramas are made out of panels or sections, we should design them as single long spreads of content. Think of one of those two, three or even four page spreads in magazines. The ones that unfold, sometimes being the cover itself, and others being pages within the magazine for an advertisement or poster. By designing the Panorama as a single spread and not in chunks you will be able to sell the immersive experience that Panoramas offer in a much more compelling manner to users. You still have to remember that Panoramas will be “framed” within the screen for every swipe the user does to the right or left thus yes, you do have “steps” or “panels” - but the design process of a Panorama should first consider it as a whole spread. I like to have a fake Windows Phone hardware skin and move it over my Panorama to picture how the different sections of it will look like once they are inside the phone. That is because even though we design Panoramas in spreads, you still have to try out and test how Panorama panels (sections) will look once framed in by the screen.
Use 3 to 5 panels maximum in a Panorama
Keep Panoramas within 3 to 5 panels which equals to up to 4 swipe gestures. More swipes or panels can start making the user get lost. Panoramas flow right or left depending on the swipe and if you get to the last panel and swipe again, the control presents panel 1 again. It is a cyclical control. Users will depend on their memory to navigate through the Panorama control - and panels in a panorama are like steps. That’s why we need to keep them short.
The anchor point in a Panorama control
Usually the anchor point in users’ memory, while in a Panorama control, is either or both, panel one and panel two. Panel one tends to be devoted to host a navigation menu. Panel two tends to have the outmost featured or highlighted set of content. When users start swiping throughout a Panorama, the panel that welcomed them will be the one the will remember the most and thus will help as a memory anchor point. This means it is good to highlight this welcoming panel somehow to make it even easier for the user to remember. You could make the background of the panorama particularly visible on that panel, branding elements could be shown on that panel primarily, and other visual cues. This will help users clearly map the Panorama in their minds and identify the beginning/end of a cycle (since as mentioned above, Panoramas are cyclical).
When launching an app, you can welcome users on panel number two
Welcoming users to your beautiful panorama with a menu might not be the best experience. If your application flow and information architecture say users pretty much *have* to take a decision and select an option in the menu to move on in your app, then yes, welcome them with a main menu. But, if selecting a menu option is not critical for the user to move on within your app, then don’t welcome the user with a “main menu” - instead take them to panel two for some featured item(s)… welcoming a user with a main menu is like putting the table of contents on the magazine cover.
Using Tiles as Buttons… No. Unless…
Ah! I wanted to touch on this topic - Just like Panoramas, the other thing people love to use are Tiles And I’ve seen many apps using tiles for composing main menus in Panoramas. Tiles are used as buttons. I’d just say that tiles make sense if your menu options need more than just text to describe themselves. If you have an option called Set Meeting Point - is it clear enough? or do you still need an icon? I guess it’s clear enough. The icon could just add visual noise. The tile itself could add noise. ‘Set Meeting Point’ seems clear enough to me. Asides from an icon, the other thing we could need in a menu option is some sort of number, counter, notification or alert… That is the one other scenario where tile looking menu options could really be needed as the tile could help you bring visual unity between ‘Set Meeting Point’ and say, an alert or counter of replies to your meeting point.
Tiles have been misunderstood and overly used in my opinion. The Windows Phone team came up with the idea of tiles which is primarily used in the start screen of the phone. The concept of live tiles is awesome and a true contribution and innovation in the smart phone industry. The power of taking your app beyond your app and have it help users from the start screen is very compelling. Live tiles act as ambassadors of the apps, on the start screen, for the user. They allow the user to gain information about something relevant to them without a single tap - it’s just there. If you can identify a similar need within your app, and a live tile type of concept works in your scenario, then use tiles in your Panoramas. Otherwise, I would just stay away from them.
Use background images that help enhance the parallax effect
One of the most delightful features of a Panorama control is its parallax effect. This effect provides depth to the Panorama and makes it more immersive. It consists of displacing the background image of the panorama at a different (slower) rate than the floating objects on top of it. So the user interface elements move faster horizontally (scroll) compared to the background. This is an animation principle. Walt Disney Studios, Warner Bros. they all used this effect from the beginning. Do you remember Bugs Bunny walking down a nice forest path with a beautiful background with mountains? And the background moved slower than the foreground? That’s the parallax effect and it helps sell depth in a scene. It’s a visual trick.
Here are some cool websites that use this effect… study them and see why they look so… freakin’… gorgeous! - J try leveraging similar tools for Windows Phone Panoramas.
http://silverbackapp.com/ - Rumor has it, this was the site that made this effect popular on the web (although the animation principle has been around for decades…) - Resize the browser and look at the leaves on the top.
http://www.nikebetterworld.com/about Why does Nike always rock on the web? Because they care J
So, using images that help sell this effect will make your Panorama work better. Note it is not mandatory that you use a background image, only if it makes sense to your brand and experience. Like Facebook, they don’t use a background image. Now, the good thing is you might only need a very subtle background to increase the effect, and it doesn’t necessarily have to be a super complex, full sized background image. Here are some examples:
Four ways of using background images in Panoramas
You can use Panorama background images in different ways. Here are four different techniques I’ve found being used:
Use app bars and mini app bars at your discretion
The guideline here is simple: It is ok to use different app bar modes between Panorama panels or no app bar at all. You can have a mini app bar with X, Y, Z, options on panel one. Then on panel two you only have option Z. Then panel three you have a full app bar with option W, X, Y and Z plus 3 icon buttons for delete, search and edit. So in a nutshell, you can make the app bar adapt to specific panel needs. App bars consume real state - valuable pixels - so be picky when designing them. Best not to need an app bar at all, if needed then start thinking of it as a mini app bar and only if deserves it, promote it upwards to become a full app bar.
You can change the out-of-the-box template… really!
One of the most common questions I’ve heard is how do we integrate our brand to a Panorama. Here are some examples of apps showing how they’ve taken over a Panorama control and made it their own. By default, Expression Blend and Visual Studio give you a Panorama template that doesn’t include specific place holders for branding elements so we tend to think there’s no place for branding. We also see the Panorama title in big font size using Segoe Semilight. A lot of us might think we can simply get away by writing the name of our app in there. The reality is that the Panorama title in the template is there as a place holder. While it might be enough for some apps and certainly for Windows Phone out-of-the-box services to use only a big Panorama title, for the majority of 3rd party apps (like yours) the Panorama template title is just not enough… it doesn’t help differentiate your app from another. The template exposes this title more as a place holder - something you can substitute for not only text but a graphic like the logo of the brand. You can make it smaller, you can make it a logo floating there on top of the Panorama background or even an image that spans several or all of the Panorama panels.
In the next post we will talk about how to compose Panorama panels using the Windows Phone design grid and other tips and tricks…