The user is shown multiple views of the same item side by side using the Pivot control. The buttons on the Application Bar remain consistent across Pivot pages.

Example: E-mail (all, unread, urgent, flagged); Appointment (details, attendees)

(video)

The July 2010 release of the UI Design and Interaction Guide for Windows Phone 7 is a document that all designers and developers of Windows Phone 7 applications need to become thoroughly familiar with.  It is a beautifully laid out 101-page document that discussed the phone’s capabilities, controls, and interactions.  As I read the guide, I took notes that I could refer to quickly as needed.  The result is a 10-page summary of the UI Design & Interaction Guide for Windows Phone 7.  I hope others find it useful.

Windows Phone 7 introduces concepts such as live tiles, an application bar with buttons and menus, and panoramic applications.  The UI templates should take those things into account as well as the WVGA display that can show 800×480 pixels in either portrait or landscape orientation:

When an application is pinned to the Start screen, the application tile is shown:

Applications can receive notifications to let the user know of important updates even when the application is not running.  One type is the tile notification which can update a pinned tile with a background image, text, and a counter:

An application can choose to include an Application Bar which appears at the bottom of the screen in portrait orientation and vertically on the side when in landscape.  The Application Bar should be limited to a few important buttons that can easily be represented by images.  Other actions should be put in the menu.  The Windows Phone Development Programming Guide encourages the use of no more than 5 menu items as it will force the user to scroll:

One type of application that can be developed for the Windows Phone 7 is a Panorama application which spreads the UI across multiple screens with a slight overlap to tease the users on to the next screen:

When creating the 5 UI templates for Windows Phone 7, I made sure the above concepts were included.

The first two templates include a WVGA screen inside a phone device chrome.  When printed the phone image is roughly the size of an iPhone or Nexus One.  The template includes two tiles to be used for the application tile and the updated tile based on notification.  Three Application Bar images have been included for 2, 3, or 4 buttons.  As well as a place to write up to 5 menu items.

The next two templates display 6 screens per page in either portrait or landscape orientation:

The final template is for Panorama applications and allows for 5 portrait screens side by side with a slight overlap.  The template uses alternating red & blue borders to show each screen’s full width.  The two grid spaces between red & blue lines is the tease overlap for the next screen:

The templates are available for download as a PowerPoint file.

Have you already started designing Winodws Phone 7 Series applications?  Do you find these templates useful?  What changes would you like to see in these templates?  Would you be willing to share some of your designs with others?