December 2011

Volume 26 Number 12

Windows Phone - How To Translate Common Design Principles To The Windows Phone

By Jeff E. Smith | December 2011

If I mention the words “smart phone,” many people think of the Apple iPhone. Since the release of the first iPhone, phone manufacturers have scrambled to get their products to market. This out-the-door-quickly attitude has left consumers with iPhone clones of questionable quality. Microsoft knew that to get its new phone operating system right, it needed to rethink the interface and the user’s experience. That effort resulted in Metro, Microsoft’s new design language for Windows Phone.

Metro’s design is based on street and airport signage and is meant to be clean, simple, and user friendly. Clutter is reduced, and ample negative space is provided so that the typography showcases the content.  Metro not only dictates a visual design standard, but it also has several navigation standards that developers need to grasp if they want to develop applications for Windows Phone.

Navigation Standards

Windows Phone navigation is in a class of its own. Unlike other smart phones, Windows Phone has a physical Back button, so there’s no need for a software-based Back button on the user interface. Windows Phone has also introduced the Application Bar, which holds the primary actions for the current page being viewed.  And Windows Phone has several built-in navigation controls that let users find their way. Let’s explore each of these navigation enhancements.

The Back Button

On the iPhone, the software-based Back button is in the upper left corner. I’ve found that on touch devices, it’s best to avoid primary actions at the top of the screen because the user’s hand covers the content while the user interacts with the button. I often see iPhone users hitting the back button, moving their hand to check whether they navigated to the correct page, and if they haven’t, returning their finger to the back button. Windows Phone users will never face this situation because the Back button, a hardware button, is located at the bottom of the device.

The Application Bar

The Application Bar in Windows Phone is essentially a dock for primary actions either at the side or the bottom of the screen, depending on orientation. Keeping primary actions in one place is not only useful, but it also dramatically increases user productivity. Let’s take a look at the Meal Snap application (available here) that we developed for Windows Phone. It illustrates the ideal way of using the Application Bar, as shown in Figure 1.

Figure 1 Application Bar in Meal Snap Application

As shown in Figure 1, the Application Bar allows three primary actions: Settings (the cog icon), Rating (the star icon) and Delete (the trashcan icon). These primary actions are placed at the bottom of the user interface, out of the way, so the user’s hand won’t cover the content. An ellipsis is used to suggest more actions are available. In this application, pressing the ellipsis causes the Application Bar to slide up, revealing the icon labels. But you could also add less commonly used tasks to the Application Bar menu and have them revealed when the ellipsis is tapped.

Built-in Navigation Controls

To deliver a proper Windows Phone experience, you need to master two main navigation controls: Panorama and Pivot. Typically, a user views the screen, absorbs the content, and then navigates elsewhere. With the Panorama control, Microsoft offers a way of using a long horizontal canvas that extends beyond the screen and allows the user to pan through various navigation items. The Pivot control works in a similar way, but instead of panning a horizontal canvas, the user navigates between items by swiping.

Figure 2 shows a Panorama control from the 911 Memorial application (available here) that we designed and developed.

Figure 2 Panorama Control in 911 Memorial Application

Metro Design Principles: A New Standard

Windows Phone has set a new standard for the direction and strategy at Microsoft. At its recent Build conference, Microsoft debuted Windows 8. This new OS is based on the Metro design principles used in Windows Phone. These design principles consist of visual design and navigation frameworks Microsoft has made available for developers. If you plan on developing for Windows-based platforms, you must understand Metro. By leveraging the key differences in Windows Phone (hardware Back button, Application Bar, and built-in navigation controls), you’ll be headed in the right direction for creating great—and visually exciting—applications.

Jeff E. Smith is a UX Visual Designer in the User Experience Group at Infragistics. Jeff can be contacted via email at smithj@infragistics.com.