General design principles for Windows Phone

[This documentation is preliminary and is subject to change.]

July 25, 2012

It’s important to highlight how Windows® Phone applications differ from traditional desktop and browser-based applications. To begin with, user interaction within a phone application is challenging because of a phone’s smaller screen size. There are also interesting input mechanisms, such as displays that support finger gestures. Proper care must be taken to understand the form factor of Windows Phone and design your applications in such a way that they present the very best experience to the user. Another factor to consider is that the user is most likely “on the go” when using a phone application, meaning that he or she is not at the office desk or at home. You should not view these differences as constraints, but as opportunities to leverage and use the phone for what it is best suited for—applications for the digitally connected mobile lifestyle.

The Windows Phone design system internally code named as “Metro” is Microsoft® Corporation’s name for the Windows Phone design look and feel. It is typified by clean, uncluttered application screens that operate quickly, minimize typing, and surface new information automatically. Interactions should happen directly with content, and visual elements should appear to be of high quality.

The principles in this section are meant to help you visualize your unique contributions to the platform, so that your application can extend the usefulness of Windows Phone while staying consistent with other applications on the platform. Consistency is vital to your innovations; it makes your application easy to learn and obvious to operate. If you encounter a usability challenge, look at how other applications in Windows Phone Marketplace have solved similar problems, or consult the Windows Phone Forums at App Hub. The “Be” principles of good “Metro” style design are now presented.

Be Modern

Modern design in a touch application is undecorated, free of chrome elements, and minimally designed. In Windows Phone, the content is the interface: users expect to be able to directly manipulate almost any words, objects, and media on the screen. People generally learn new touch applications by tapping around. Cluttered screens and elaborate designs make your application harder to learn and will impede users repeatedly. Design simply, and make ample use of empty space, which can be conducive to clarity. The MSN Money application, seen in the following screenshot, is a good example of clear, modern design.

The MSN Money application

Be “On the Go” Capable

Phone applications need to be focused on simple, quick-use scenarios. Since phones are used while users are “on the go,” you need to consider that in many cases users will have just a few spare moments to do what they need to do. Imagine the person waiting at the bus stop, grocery line, or airport terminal, or any of the thousands of breaks that we experience in life. Think of the scenarios where someone needs instant information, such as flight status, the nearest gas station, or the best Mexican restaurant within 15 miles of where they currently are.

Applications should surface new information without taps and make use of proper notifications. Tasks should flow swiftly through to completion; think about how the design or placement of controls can expedite the most common operations. Remember that clear words and typography are vital prompts in a well-designed application: the eye “reads” them by shape, size, and color as well as meaning.

Keyboard entry on the phone is not as easy as with a full computer keyboard, so you need to do everything you can to limit the number of keystrokes necessary. Place a minimal amount of data entry on any form that you require. Use predictive text fields, custom and system controls, and voice commands wherever appropriate.

Once users have opened your application, you need to be sure that they can quickly navigate to the feature area that they are interested in. For example, a media player that lists downloaded podcasts should have the ability to filter by category to help users find what they are interested in. There should be views to see the favorites and most-listened-to material. The most recently played podcast should be prominently displayed so that the user can jump right back in to where they left off. Think about what you can do to help the user get to their experience as quickly as possible. The Amazon Kindle application has on its main screen the most recently read or searched-for books. The user can click a book and be taken to the page they left off reading at.

The recently read books in the Kindle application

People can still be considered “on the go” even while they are at home. It’s common for people to multitask while eating, watching television, and interacting with friends and family. People sit on the couch watching television while texting and using their mobile applications at the same time. The experience is mostly about what they can do in a few spare moments while they have lost interest in what is going on around them or there is a break in what is going on.

Be Clean

On a touch device, screen sizes are fairly small and mis-taps are frustrating. Your application should make provisions for clumsy fingers. Use space around controls and content and make labels succinct. Where appropriate, try to use controls that respond to touch gestures, which require less careful input to operate. Generally, the best touch applications don’t test the user’s capacity for making frequent, precise taps. The Project Emporia application shown in the following figure presents four clearly summarized and easily clickable stories per page, rather than a long list of headlines.

The Project Emporia application

Making your Windows Phone application intuitive to use is extremely important. Phone applications should require little or no training to be used. Your goal should be to design your Windows Phone application to be so simple to use that no User Guide is necessary. Users should be able to figure out how to use all of your application’s features easily by just playing around with it. Frustrated users may stop using your application and decide to look elsewhere for the same functionality.

Be in Motion

Mobile touch applications should aspire to the simple, familiar sensation of physical manipulation. On Windows Phone, create the impression of tangibility by making on-screen objects flexible and interactive; screens should feel light to the touch and animations should subtly inform the user about navigation and operations. Keep the user moving by making the necessary course of action clear, and making it obvious what is “tappable” and what is static. In the Messages application, new messages appear automatically and present multimedia in-line. (To learn about notifications, see Essential graphics, visual indicators, and notifications for Windows Phone.) Users can tap the thumbnail to swiftly move to a full-screen view of the image.

A series of images showing the animation that happens when the user launches the email app. The page makes a “leaf blowing” turn.

Be Simple, Readable, and Minimalistic

Consistency and simplicity of the interactive experience is essential. You should strive to keep each screen as focused as possible and eliminate any extra clutter. Present to the user only what is absolutely necessary. The eBay application on Windows Phone has a very streamlined and minimalistic UI compared to its website counterpart.

The eBay application

How you display information to the user is critical. The obvious size limitations of the screen need to be taken into account so that you can place the layout of UI elements to be easily readable and split across pages in a way that the user can keep their context. You don’t want the user to get lost in a hierarchy of screens and not know what they are looking at or where to go from there. Think about what the elegant display of information would look like. Think simplicity.

Don’t be tempted into thinking that more information on a screen is better. Clutter is never good and leads to confused users. Minimize the number of controls in the UI and make sure they are intuitive and clearly labeled. The screen real estate on a Windows Phone needs to be respected. Decide what is most important on the main UI areas and leave the rest out. Data that is left out can be accessed in some subarea of the UI that separates it out and keeps it scoped to its topic. Imagine a news-reporting application that puts every story in the UI at once. Users don’t have time to scroll through pages and pages of stories. Just picking a single top story would be better, or having just a few top categories with stories under them would work. If possible, you can provide settings that the user can chose from to decide what they want displayed.

If you have complex multi-dimensional data, you need to come up with a way to slice through what the data is and display only one dimension of it. Complex data editing applications are not the types of applications users will be using on a Windows Phone.

Be Consistent

One reason for Microsoft Corporation having a guide like this one is to put forth the standard for how user interaction is to be accomplished on the Windows Phone. For the overall phone experience to be pleasant, the manner of interaction needs to be consistent within and across applications. Make your application consistent in how users interact with it for things like navigating, changing settings, performing list deletions, and other interactions.

The consumers of your application will appreciate all you can do to make your interaction model consistent. Users will already have been trained on the interaction models available on the phone and, by the time your application comes along, they will be up to speed and be productive. This leads to increased satisfaction for everyone. This is especially important for earning good customer feedback and lots of downloads of your application.

Be Authentic

Build complete Silverlight or XNA applications, and avoid relying on WebBrowser controls to show web-hosted views inside your application. Windows Phone applications should make full use of the phone’s sensors, hardware, Silverlight animations, controls, and multi-touch gestures to create an experience that feels richer than the mobile web.

Use vocal, effective branding. While remaining clean and modern, your application should also employ its own color scheme and high-quality visual elements that showcase its functionality and distinguish it from other applications.

Be Innovative

Don’t necessarily think that you are creating an application that is a simplified version of some larger website application that you might have. Phone applications can be just as powerful if not more so. The capabilities of the phone are such that its applications can stand on their own. If you have an existing web application, you may find that a mobile version can contain all of the same features and that over time many people will switch to using only the Windows Phone version. For example, the Twitter application on Windows Phone is just as capable as the website version.

The Twitter application

There are cases where applications can exist solely on the phone because of the hardware capabilities that exist there. The hardware support with mechanisms such as the GPS, accelerometer, cell phone, touch screen, compass, FM radio, and camera can be leveraged to make some very compelling applications. For example, a location-aware application makes more sense on a Windows Phone device than on a desktop computer. A gas station finder application makes more sense to use on your phone because you are more likely to need it when you are mobile and need to make use of the location services.

There are cases where you do not want your Windows Phone application to do everything that its web counterpart can do. Your phone application would serve as a view into what some larger web application does. This would be the case, for example, with an application like an online tax accounting site. A fully functioning tax accounting application requires a larger, more complicated UI that can fit only on a large computer screen. The phone application could do things like track the status of an accounting process and receive alerts when something changes that needs your approval.

The best advice is to take a fresh look at the design of your Windows Phone application. This means that if you have an existing desktop or website and want to port it to the Windows Phone, you should not try to duplicate the UI. Design principles between the two platforms are drastically different, and you should use the appropriate principles for each.