User Interface Guidelines (Windows Phone 7)

A new UI paradigm

Microsoft’s Windows Phone 7 uses a novel user interface called Metro. It sets itself apart with its clean and simple design and emphasis on color and typography.

In contrast with the application-focused design of the iPhone, WP7 uses an information-centric design. Instead of an array of application icons, the start screen of a Windows Phone consists of dynamic tiles that display critical information at a glance to the user. The tiles themselves are dynamic, in that they continuously portray the up-to-date status of the application. For example, they can show you the next appointment on your calendar, or the number of new emails waiting for your attention. Users can personalize their phone by pinning the tiles that they care most about.

WP7 introduces a new paradigm called "hubs". Hubs bring related information together. There are six hubs, namely, People, Pictures, Music + Videos, Marketplace, Office, and Games. The People hub, in the instance shown below, aggregates your address book contacts and Facebook friends.

Designing the Application Interface:

While the design of the Windows Phone 7 user interface is different from that of the iPhone, the core design principles are very similar. Like the iPhone, WP7 developers have to keep in mind the compact screen, lower CPU and limited memory while designing the applications. Users use one application at a time, with just one screen visible.

Similar Application Design Goals

Usability and UI design are not afterthoughts, but are the primary goals behind applications on both the iPhone and WP7. Applications need to be simple and focus on key scenarios that most users care about.

Visual Elements and Direct Manipulation

Like the iPhone, visual elements and direct manipulation of objects by touch are the key characteristics of the WP7 application. WP7 provides a complete set of UI controls designed for the phone. It utilizes the same set of core multi-touch gestures as the iPhone with similar semantics – these include tap, double tap, pan, flick, touch and hold, and pinch and stretch.

Implications of the similarities for the developers:

For the most part, your application planning process will be similar on both platforms. While designing your WP7 application, you will focus on the same information that is critical to the user. Your key design principles from the iPhone application will get carried over: metaphors, direct manipulation with multi-touch, the need for immediate feedback and aesthetic appeal, will still remain the same.

Application User Interface Design

While there are similarities in the design principles of the applications on both platforms, pay close attention to the user interface of the application for the WP7. It is best to take advantage of the unique features and strengths of WP7 platform.

For the interface to provide a consistent experience across applications, applications on WP7 need to adopt the new Metro design guidelines.

Controls and the Application Interface

The WP7 development tools and SDK include a rich collection of Silverlight controls designed specifically for usability and aesthetics. While you can create your own controls, it is best to use the standard controls where possible. These controls respond to theme changes and provide the consistent user interface.

The following table shows the mapping between WP7 Silverlight controls and corresponding iPhone controls.

iPhone control: WP7 control: Notes:
Text field	Text box
Label	Textblock
Search bar	Textbox + button
Rounded Rectangle Button	Button
Segmented control	Radio Button
Activity indicator	Progress indicator
Slider	Slider
Progress View	Progress bar
-	Multi-scale image	Image with zoom capability
-	Panorama	Panorama to display related
		content that spans display
-	Pivot	To provide different views on the
		data
-	Grid	To arrange other controls in a
		tabular form
-	Ink presenter	Surface for inking
Page indicator	-
UISwitch	ToggleSwitch control	Available on Codeplex*
Date and time pickers	Datepicker / Timepicker	Available on Codeplex *
Picker	-	Use Silverlight WP7 template

* ToggleSwith and Datepicker/Timepicker control are part of the Silverlight for Windows Phone Toolkit available on Codeplex: http://silverlight.codeplex.com/releases/view/55034

As you can see above, WP7 offers controls that correspond to almost all of the iPhone controls. While the look and feel is different, they provide similar functionality.

New Controls

Windows Phone 7 introduces a few novel controls that have no counterpart on the iPhone. A multi-scale image, with image data at various resolutions, is appropriate for allowing the user when zooming into a photo. Panorama control is a multi-screen page and allows a page to span horizontally beyond the width of the phone. The people hub, shown above, is a great example of this control. It allows a large amount of related information to be presented. Pivot control, another novel control shown below, is useful to manage views and display information that is logically divided in sections.

Notifications

Both iPhone and WP7 have notification services, but notifications play a key role in WP7. The tile notifications are what make the tiles come alive. They are used to display non-critical information without disrupting what the user is doing. If you are using an application badge on the icon in an iPhone, you can use a tile notification as a replacement. However, tiles have the ability to provide far more information, such as photos (see above).

The notification service can also display toast notifications that provide time sensitive information such as an SMS. The toast notifications are shown for about 10 seconds, but the user may choose to ignore them. These are different from the iPhone alerts, which a user must respond to.

iPhone	Functionality	Windows Phone 7
Icon badges	Non-critical information that	Tile notifications
	user may not respond to
-	Time sensitive data that user	Toast Notifications
	may not respond to
Alerts	Modal alerts that user must	Application notifications
	respond to

Tool and Tab bar vs. Application bar

As opposed to separate tool bar and tab bar, WP7 only sports an application bar. The application bar can include up to 4 of the most common views or application tasks. You can also use application bar menus for additional context-sensitive tasks. If you are using action sheets in your iPhone application, application bar menus will provide you with similar functionality.

	Status bar	Information about device	Status bar
	Navigation bar	Navigation, Title, Buttons for	Back button for back navigation
		views or actions	Page title
			View and actions on
			Application bar
Tab bar		Alternate views	Application bar
Tool bar		Actions in the current	Application bar
		context
	Action sheets	Context sensitive menus	Application bar menus

Comparing WP7 and iPhone Navigation

WP7 application is a collection of multiple pages. Like on the iPhone, the user navigates through different pages using widgets such as buttons and links. However, the two platforms differ in their back navigation.

On the iPhone, developers need to implement the back functionality using the navigation controls on the navigation bar. On WP7, the hardware back button allows the user to navigate back between pages within an application, or across applications. It behaves much like the Back button in a browser. The Back button also closes menus and dialogs. As a developer, you should consider what the Back button means to your user and plan to override it appropriately. For example, you may decide to pause a game using the Back button.

The other two hardware buttons on the WP7 phone, namely, Search and Home, have fixed behavior.

WP7 Frame and Page Structure

Each WP7 application has a single frame, and it includes areas for:

1. a page where application content is rendered. This is the content where widgets or graphics are rendered.

2. a reserved space for the system tray and application bar. It also exposes certain properties such as orientation to the application.

System Tray and Application Bar

On WP7, the system tray includes indicators for various system-level status information. The application bar includes the area for the most common application menus, which may include various data views or tasks.

Page Structure of WP7 Application

The following diagram shows the structure of a typical WP7 data-bound application, which resembles a navigation-based iPhone application.

When the user first starts the application, he or she would be presented with a splash screen, designed to welcome the user, as well as to create the perception of fast response. Splash screens are usually an image file, of the size of the display.

Usually the application starts with the home page; the main navigation page, with links for search, and other page widgets. Consider an application that shows information about the baseball teams and their players. The primary content page, marked "widgets" page above, will have the content of interest; e.g., a list of all baseball teams. In many cases, the home page will also be the primary content page.

The user can click on one of the team links to visit the team details page ("widget details page") which can provide multiple views. The page may employ a pivot control or panorama to display different views such as the team summary and the list of all players ("list of gadgets") from that team. Selecting one of the baseball players will take the user to the page with player statistics ("Gadget Details page"). Such a page may use controls such as textblocks, multi-scale images, or other multimedia using a MediaElement control.

Users may also use the search widget to search and directly access the team page ("widget details") or the player page ("gadget details")

Application Templates

As you know, XCode provides different templates for various iPhone applications. The following table shows the mapping between XCode application types and Visual Studio application templates.

Navigation-based	For information drilldown apps	Databound application
View based	For utility apps e.g. bubble level	Windows Phone application

OpenGL-ES based	For Games	WP7 Game (XNA) application
Window-based	Flexible template to design any	Windows Phone application
	application

You can choose the Windows Phone application template to either create an application with functionality similar to the view-based or the window-based iPhone application type. Lastly, the XNA based games application template will give you functionality similar to the OpenGL-ES application.

Summary

In this topic, we looked at the WP7 user interface guidelines. We showed the parallels between the application design goals of the iPhone platform and the WP7 platform. When you plan your WP7 application, you should be able to leverage your existing work on iPhone applications.

Revisit the application interface design to make sure you are taking advantage of the WP7 metro design that uses Windows Phone 7 interface guidelines. You will find that the WP7 tools offer a large library of controls and gestures that have close counterparts on the iPhone. Investigate the use of innovative controls like panorama, and explore the use of live tiles to build an engaging WP7 experience.