Skip navigation

First impression I got once I saw a demo about Windows Phone 7 for the first time, was that, “this is most original user experience we got ever since the first demo for Apple iPhone”. This user interface is built on a UI philosophy called Metro.   The Metro design principles center on a look that type to echo the visual language of airport and metro system. Your homepage is full of shortcuts for applications, your favorite applications. Not just that, but also every shortcut, known as Tile is informative and update-able. For example, application of Messages will have the popular conversion icon, plus the number of new unread messages.

All this Metro stuff is focusing on doing more with less through the phone home screen. Yet our focus for this post would be for the applications themselves. There is mainly three common interfaces you will find in most Winows Phone 7 applications:

  • Panorama UI
  • Pivot UI
  • Free-style UI

Free-style UI is all what you have used to do or design in the previous age! Our focus today would be on two new interfaces Panorama and Pivot.


If your application got too much content to show to the user, this style would be your optimal choice. If the application will show too much non-structured content (like group of images and videos) to the user, it is much more lovely and user friendly to subdivided it to small groups of similar items. These groups would be spread widely throught the application interface, so user will navigate between virtual pages (divisions) right and left, which is far better than tracking items comparing to up-to-down style. Check next example:


If your application is dealing with well-structured data like tweets from your friends on Twitter, or send(receive) messages from your Exchange Server like Outlook, this is the required UI style. Check next example:


  • You are totally free to use any of those two styles, for your own application.
  • you also free to combine both styles in the same application.

In next development post we will try to make sample application for Panorama and Pivot UI styles.

Some of the materials in this blog was based on “UI Design and Interaction Guide for Windows Phone 7 Series” documentation. You can download this documentation from here.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: