Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Introduction To Designing For Windows Phone 7 And Metro

Microsoft’s new mobile operating system, Windows Phone 7 (WP7), introduces a fresh approach to content organization and a different UX, based on the Metro design language and principles that will be incorporated into Windows 8. It also targets a different market than its predecessor: instead of being designed mainly for business and technology workers, WP7 is targeted at active people with a busy life, both offline and online, and who use social networks every day, whatever their background.

Why Should Designers Care? Link

First, it’s a new interface, so you have space to create and develop some new ideas for it. We are still at the beginning of its growing curve, so it’s an interesting challenge. When I saw a WP7 presentation for the first time, I thought, “I want to design something for this.” Exploring is a great way to learn how to build a new exciting experience for users.

Further Reading on SmashingMag: Link

Secondly, Metro design is a market reality that we can’t ignore. This is a new user experience that will be a part of Microsoft’s future OS, Windows 8, that will bring consistency across devices and that will put a strong emphasis on the Metro design. Instead of having a different interface for each device — phone, tablet and desktop — users will have the same experience everywhere, with only slight differences due to the nature and specificities of the device. Since the new version was released in late September (WP7.5, better known as Mango) and the release of the first WP7-based phones from Nokia (with its huge marketing firepower), it has become clear that Metro design devices will play a big role in the market.

A New Approach To Design Link

The Windows Phone team was inspired by the typography in way-finding design. By clearing the interface of all unnecessary elements and using the content as the design core, the team has been able to distinguish this OS from more traditional UIs: the interface disappears, and the content itself becomes the interface. The interface shows the actual content and is not just the means to get to the content. Reducing the visuals on the phone promotes direct interaction with the content.

Grid Systems5
Grid Systems in Graphic Design, by Josef Müller-Brockman

WP7’s graphic style is typographic and follows in the footsteps of pioneering graphic designer Josef Müller-Brockman6: pure typography on a basic canvas, plain color and squared angles. Icons are only for actions with content and don’t play a main role as they do on traditional devices. They are more an aid to orientate the user while navigating the content.

Clean design and typography, example from Cocktail Flow and Fuse7
Clean design and typography, as exemplified by Cocktail Flow8 and Fuse9.

All of these things together give the user an experience reminiscent of cartography. The need to give a direction is expressed in the look and feel of a map, where the text is clear because the user has to follow labels and names in order to find places, and there is no space for visual elements.

A New Content Grid Link

Metro design requires a more rigid organization. Think of subway maps. In the context of mobile apps, this requires that the information architecture be stronger. With the main graphical layout elements removed, the content grid is built using just the content itself. So, as the user scans the layout, they are already reading the content. The absence of a physical grid leaves room for negative space. Elements seem lighter, so the designer has to choose a few strong elements on which to build the content path. Choosing the wrong elements means that the user will not understand how to reach the content they need.

Subway Map10
Milano subway map (Image: Wikipedia11)

Content has to be structured in a hierarchy according to importance and be based on what you want to push to users. For this reason, you have to identify the application’s target user very carefully, because building an application that fits all users is not possible.

Flipboard13 emphasizes content as the interface.

The goal of the Metro UI is to emphasize important content in a way that helps the user determine whether to dive into it or keep doing what they’re doing. To make all of this possible, Microsoft has introduced the concept of the hub, whose role is to concentrate all of the information onto one screen, like a dashboard. A better analogy might be the cover of a digital magazine, such as Flipboard.

UI Elements For Organizing Content Link

The hub is the central point of access to content, and it includes specific UI elements with new paradigms of navigation and content organization. The concept of the hub is manifested as two new paradigms of navigation, each with its own meaning and function: “panorama” and “pivot.” The difference between the two is subtle at first glance.

Choosing one or the other depends on the application’s purpose and on how you want to introduce the user to the contents. The live tile is another powerful hub element that gives a view of the application’s content directly on the home screen. And while not strictly a new UI control, accent color is another important element; it helps to pinpoint the important bits of information on the screen.

Panorama Link

When the user enters the application, they land in the panorama, which pulls information from different areas of the application onto the same screen. It gives the user a bird’s-eye view of all available information.

Example of Panorama, FeedTso14
FeedTso15, an example of panorama.

Panorama uses text and images to create a path through blocks of content. This visual communication gives the user an immediate sensory link to information.

Pivot Link

Pivot orders the elements logically, splitting the information into categories and listing the elements available in each category. It is an analytical list used to show different aspects of the same content.

Example of Pivot as tabs, 4th and Mayor16
4th & Mayor17, an example of pivot as tabs.

For example, you can use it to show multiple views of a single concept (like tabs), as in the screenshot of 4th & Mayor, a popular Foursquare client. You can also use it to show folders such as those in an email client (“Read,” “Sent,” “Important,” “Drafts” and so on).

Live Tiles Link

The strong hierarchical content structure, which starts from the content brief and goes deeper in detail level after level, is brought to the extreme with live tiles, the new feature introduced with Mango. In the first release of WP7, the tile was at best an application icon with a static overlay, like the badges in iOS and Android. Now a new communication model has been introduced. The home screen shows a brief notification, with the most important information in the application, similar to abstracts in a magazine. Think of this space as a way to provide meaningful content that is immediately usable.

In the example below, live tiles are used to show current weather conditions. The user doesn’t even need to open the application if they just want to check the weather, because all of the basic information is already there. But if they want to see a five-day forecast or other details, they can open the application.

The live tile can also be designed to rotate information, so you can creatively use multiple tiles in the space of one tile.

Example of live tiles and accent color, AccuWeather and AppFlow18
AccuWeather19 and AppFlow20, examples of live tiles and accent color.

Accent Color Link

Of course, there is more to content than hierarchically organizing it in the application. You will also want to make content stand out on a page. The WP7 guidelines21 suggest a special way to emphasize content: by using the accent color. This is a system-wide color that the user can customize and that you can use to better highlight header information, such as titles and headings, as well as other important content. It’s a standard element of the UI, but it is extremely important because it is set by users themselves at the system level, so all applications on the phone will adopt it.

Design Tips Link

The clean interface, without the usual icons, means that users interact differently with the content. So, when building a WP7 application (or a Metro app in general), you will also have to think differently about how they use standard UI elements.

Clickable Text Link

The first difference in the interactive model is that text is an active element in WP7, meaning that it is tappable. This changes the concept of the tap-safe area for buttons and other elements: here it applies to text as well. The margin space gets a new role, then, as does the text size.

Animation Link

Animation is one of the most important features of WP7. I’ve been a designer for more than 10 years, and I used to think that using animation after an action was strictly to give subtle feedback to the user and that animation could be used “creatively” only in specific circumstances.

With WP7, this is changing. Animation and transitions are fundamental elements that are deeply rooted in the original UI concept. You can use them not only to give feedback on what is going on (as with a “toast” notification), but to keep the user’s attention on what is happening and to prepare them for a different experience (for example, when switching from a panorama screen to a textual news screen).

Flickr for Windows 7 and WP722, an example of how animation can enhance the UX without being overwhelming.

Icons Link

WP7 has very specific guidelines about icons, and I suggest reading them carefully before designing an application. The only place to put icons is in the application bar, which hosts the icons for all of the main actions for interacting with the content.

The application bar of Pictures Lab, with four icons and the More button23
The application bar for Pictures Lab24, with four icons and the “more” button.

Text Wrapping Link

Another difference from the usual way of designing is how header text wraps. In WP7, headers wider than the screen don’t wrap onto the next line but instead are clipped on the right margin. This of course doesn’t apply to main content (such as the body of an email), but if the text is not of vital importance (for example, the name of the sender), then this text clipping is common.

The Color Theme Link

WP7 is different from other mobile OS’ in that the user can choose a system-wide color theme that is dark or light. This changes not only the background color, but also the foreground.

You will have to adapt to the changing colors (remember also that the accent color can change) by using an adaptive palette and respecting the decision of the user. You can also use a background image, but in this case you would need one for the dark theme and another for the light theme.

Only if the branding in your application is so strong that you don’t want to change the colors could you fix the palette. But make sure not to mix the two approaches, because that might lead to unreadable combinations. This is one of the most common causes of an application failing the Marketplace certification process.

The Design Tools Link

To design a WP7 application, you can use your usual tools, such as Balsamiq, Adobe Illustrator, Fireworks, Photoshop and so on. Keep in mind that the application needs to be developed using Expression Blend25. Depending on the project’s structure and the designer’s role on the team, you should know how Expression Blend works in order to design effective interaction models. The better you understand the application, the more nuanced your designs will be. Obviously, understanding Expression Blend will also add value to your work and make it easier to talk with developers.

Example of paper prototyping for WP726
Example27 of paper prototyping for WP7.

Conclusion Link

With Metro, Windows Phone 7 is an exciting new addition to devices and operating systems for designers. It represents a completely new direction from Apple and Google in its interface for devices. For the first time in Microsoft’s history, the interface is strictly linked to the hardware, so carriers and manufacturers have very little room for customization. This gives us standards on which to base our work and to expand on in future applications.

This article is just a starting point in designing for this platform. Below are some additional resources to continue learning.

Resources Link

(al) (fi)

Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31

↑ Back to top Tweet itShare on Facebook

Daniela Panfili is a user experience designer, living and working in Brussels. She specializes in RIA and mobile experience design, and lately the WP7 platform. She writes about UX and UI design on her blog:

  1. 1

    Francis Thibault

    December 20, 2011 8:34 am

    Thanks! I am learning coding for WP7 and as a Windows Phone 7 owner I am glad we get some exposure. I never understood why graphic designers were all over Apple and iPhones when a phone with such nice look and graphic design thought was left behind…

  2. 2

    Surprised to see this here, but I hope this is a sign of good things to come. Glad to see the design community showing a tiny bit of interest in anything Microsoft related :-)

  3. 3

    I just bought a LG Optimus 7. I own a bunch of iPhones and Android phones already but wanted this one so I could speak intelligently about it.

    This thing blows mind. This is such a 180 for MS I am amazed. All the things people bash about MS, I really can’t see them in WP7.

    I have more faith in stability and performance with this thing then I do with my iPhone 4 and my Sony Tablet S.

    I really hope they stick to it and bigger developers start recognizing this system more. It’s a complete refresh to a mobile OS and I want people to know about it, even though I will still be an Android guy forever.

    Even though this is app development it has given me more ideas for small screen or mobile layouts also.. just from exploring this OS.

  4. 4

    I’m using a WP7 device (Samsung Omnia 7) for 9 months now, and I still enjoy using this amazing product every day. Seriously! The Metro UI is such a beautiful UI! Everything is easy, fast, smooth, elegant, modern,… it is the most exciting and innovative OS on the market today, in my opinion. It is totally different from an Android or an iPhone.

    Everyone should try those phones. Just try to forget everything you know about the “old” Microsoft, and play with a Windows Phone. I’m sure you’ll enjoy that new and fresh experience, and you’ll probably change your mind about Microsoft too.

  5. 5

    I love the paper + form for designing the UI. You should have PDFs available that we can download and print for designing for smart phones.

  6. 6

    Great resources :)
    Looking forward to swapping out my iphone for the Nokia Lumia 800…

  7. 7

    Good overview of the main design elements for Windows Phone. I love my Windows Phone and the design. It makes me feel as if my iPad was made using comic sans. iOS so cartooney compared to the sleek industrial look of WP7.

  8. 8

    Fantastic article!

    I love the Metro UI—it just oozes sleek and sexy.

  9. 9

    Nice to see this here.

    What about start publishing articles about WinJS?. Seems to be like a very proweful and promissing library but frankly, the documentation on Windows Forums are pretty lame and most of the time, confussing when not incomplete. That would be awesome from you.

    • 10

      WinJS is a library to develop apps for Win8, but it is still in development and is more a matter of coding then the user experience.

  10. 11

    Live tiles were introduced in WP7 (before Mango) and the applications were free to get benefit of them.

    But yes, in Mango it’s much simpler to implement and the flip part was added (double-sided tiles)

    • 12

      Indeed, it was made easier to implement, so people started using it even more and Live Tile became an important element for visualizing the information, a “living” element, something that really adds value to the content

  11. 13

    Jonathan Búcaro

    December 21, 2011 5:58 pm

    Most of this guidelines are valid for Windows 8
    I really appreciate this kind of post :) keep them coming!

  12. 14

    Very nice framework, thank you for sharing!

  13. 15

    Nice to finally see WP7 getting some Smashing Love :)

  14. 16

    I am so glad to see this here. I also agree with others that it is good to see the design community (altho small!) start to take some interest in this product. I can’t wait to do a Windows Phone & Windows 8 app.

    • 17

      Leon de Rijke August 15th, 2011 6:06 am Good to see a new scioetn devoted to UX Design! I’m looking forward to in-depth background articles and best practices.

  15. 18

    Brett Jankord

    January 1, 2012 9:58 am

    I really like the animations in WP7. I’d like to experiment with creating some of those effects with CSS3.

  16. 19

    Justin Salvato

    January 2, 2012 5:16 pm

    Thanks for breaking down the design elements that goes into Microsoft’s metro UI.

    I was first exposed to it on Windows Media Center, then impressed when I seen how it evolved on the Zune HD. The introduction of the Live Tiles is just plain awesome!

  17. 20

    Marit A. Breland

    January 2, 2012 11:51 pm

    Thank you for this one! A really good article!!!

  18. 21

    Arkadiusz Janicki

    February 3, 2012 5:52 am

    It’s interesting to see this game-changing framework coming in. It’s the first time when Microsoft has proposed a new design solution on such scale (without following the ideas of the competitors) and I must say, that I like it!

  19. 22

    Interaction plays an major role in the wide and you can cerate a database of your prospective customers on here. Thanks a lot for given up here.

  20. 23

    Good to see WIndows Phone 7 being addressed on Smashing. Metro has been overlooked for too long. I think WP7 is the most attractive OS currently available for any smartphone at the moment.

  21. 24

    Great article!

  22. 25

    A very, very reader friendly article which explains a lot in plain language about Metro :)


↑ Back to top