Windows Phone 7- The Metro design

Editor's Notes

1. Windows Phone 7 Series targets consumers that have a private life and a business life. This means that Windows Phone 7 Series needs to target the consumer market.To be successful in that market it is important to understand the target audience / customer.Metro, as a new design language, helped with this and made it easier to take a fresh start when designing Windows Phone 7 Series.
2. This is what the device looked like in 2008. The big question is if this is what consumers want from a phone. This design was building upon earlier Windows Mobile versions, and was more or less a copy of a desktop user interface on a small screen.
3. In the beginning of 2009 a new approach was taken. How did this transition from the previous slide to this slide happen?During designing Windows Phone 7 Series, the designers did not exclusively have phones in mind, even though a great phone experience is important for the end result. However, finding information fast and easy in a beautiful environment was more important for the design of the Windows Phone 7 Series.This is where Metro came in. Metro as a design language is based on a foundation (or set of principals).
4. Designing Windows Phone 7 Series did not start by not looking at phones, PCs or other devices. It started by looking at what people do, strongly inspired by transportation graphics (icons, use of colors, use of very clear fonts). This also explains the code name Metro for the design language.Travelers in an underground station, a railway station or at an airport need to know where to go. Transportation graphics are used to guide travelers. These graphics are well designed for travelers to easily find their way. They are simple, elegant and universal and thus very powerful.The Windows Phone 7 Series User Interface should be as powerful to allow its users to easily find their way on the device.However, the designers were looking for more than just this. They looked internally at Microsoft what other things could be used on Windows Phone 7 Series.
5. Metro is a modern design language. It is a fresh start for designing User Interfaces.Metro is a breakaway from conventional thinking on what a User Interface should be to what it needs to be.Metro is inspired by transportation graphics.It is all about the use of typography, motion, strong iconic graphics and color.In the next few slides we will focus on the fundamental principles that define Metro.
6. Designing a User Interface is an act. In fact, design itself is a verb. As a Metro Principle, you need to reduce a User Interface to only what you need (= editing).Good User Interface: Look at all the things you can do and strip away what you don’t need. This is what we call Fierce Reduction.Use other elements of the design (including the use of whitespace) to bring up what is relevant.This Metro Principle makes experiences simpler, more open and ultimately more intuitive.
7. This Metro Principle is perhaps a bit more controversial.We bring type to the foreground, use it in a new way to pull an audience in.Using type you can be expressive, for instance to say who you are. People still read and will continue to do so. A lot of money is invested towards type on Windows Phone 7 Series – Type on the device should just be as good as type on a printed page.
8. Motion tends to be used a lot these daysDevelopers / Designers have powerful tools available to create motion (Expression Blend)Allow users to understand, not just that something is going on, but also understand where they are in a UI scenarioUse live tiles as a way to tease the user and to help bring up contentUse motion in contextTell users where they are coming from and where they are going toTransitions are very important for the user experienceUse motion to tease users about what is next to comeUse motion to engage the users and pull them into the overall experienceUse motion to help people navigate through a user interface
9. Windows Phone 7 Series is a personal device (assume that the user is always on the go)The goal should be that users can easily do the things they want to doLet them use their personalized content to navigate (e.g. use their collection of pictures to identify contacts)Don’t show visuals that are not content. This is important for richer, panoramic experiences where the device is a ‘window’ over a large amount of contentShow what you need to show, nothing more. Make the UI very focused. It becomes very clear what each element in the UI does.
10. Windows Phone 7 Series is authentic.It takes good design principles from Xbox, from Media Center and from Zune HD.It is a re-definition of Mobile, but just a start.As a developer, keep true to who you are. If your image is ‘fun and dynamic’, translate that to your application’s User Interface. At the same time, keep the Metro principles in mind.
11. This is the first fresh end result of the Windows Phone 7 Series User Interface.Design is a process
12. The Metro design language is grounded in a structure (analogous to a movie):Just having great elements and great characters is not enoughYou also need a great plotThe User Experience for Windows Phone 7 is grounded on two key areasThe individual and how they do they do all the things they need to get done (Start experience)How is the individual organized or in other words, how do they find the information they want on their phone? (Panoramic experience)
13. The Start ExperienceIt is not about having a cool start screen with lots of fireworks going onStart is about getting things done:Getting the user where they want to beHelping the user finding the application you developedShould be as simple as possible, but start should still:Be personal (see the left picture, start is the fast lane, glance and go, to the user’s life on the phone)Be relevantBe connected (large tiles where applications can show live content)Should be easy to navigateUsing a simple list of installed applications (see right picture)Navigation is very fastTouch gives the user an immediate sense of where they are
14. This is an example to align to the Red Threads.The ‘simple’ weather application is an example that is both:Personal; it has a live tile available (if weather is important to the user they can add the tile to their start experience)Relevant; instead of asking the user for a location, retrieve the weather at the current location of the userConnected: perhaps the user is also interested in the weather their friends are currently having at their location
15. The Panoramic ExperienceWindows Phone 7 ‘broke’ out of its frameMost current screens display a canvas in a frame (the real estate is limited to the canvas)Windows Phone 7 gives you a panoramic frameworkA bit more work to create for application developersGives the end user a very rich experienceThe canvas is much bigger than the frameWorks great to get users engaged, combine client information in your application with services
16. The Panoramic ExperienceWindows Phone 7 ‘broke’ out of its frameMost current screens display a canvas in a frame (the real estate is limited to the canvas)Windows Phone 7 gives you a panoramic frameworkA bit more work to create for application developersGives the end user a very rich experienceThe canvas is much bigger than the frameWorks great to get users engaged, combine client information in your application with services
17. It is tempting to start thinking that maybe every experience in your own applications should be a hub. However, that is not true as this example shows:The sailing application gets its information from multiple sources (weather info, mapping info, destination trivia etc.). This makes the application a candidate for a hub experience.The different pieces of information are simple to reach, even though they might be obtained in completely different ways. For the user, the information is still very nicely grouped together inside one single application.The weather application gets its information from one single source. There is not too much data to be displayed. This makes the application a candidate for a single-page experience.Both are great experiences for end users, so think about which one works best for the type of application you are developing.
18. How do you build delightful experiences?A delightful experience is one that is pleasant for a user to use (surprising, perhaps make the smile)Not easy to buildBe inspired by Metro but don’t blindly follow all of Metro’s principles. You might need to fit the application into your own company branding as wellTry to apply your own visual style together with Metro principles (all applications do not completely have to look the same, there is always a possibility to add something special to your own applications)
19. The left hand side shows the application with the Metro design principles exclusively applied to it:CleanNot crowdedThe right hand side shows a similar application with Metro design principles combined with company branding (including the tile):Use of gradientsControls with rounded cornersMore information visible on the screen
20. The use of color allows a bit more personalized experiences and can make applications a bit more pleasant to use
21. The user can select theme colors (personalization)Color is also used as a secondary element to highlight hierarchyIn case of contacts: phone numbers are highlighted in different colorsIn case of calendar: the current date is highlightedAll theme API’s are available to all developers, allowing developers to fit their applications into the theme that users select.
22. Don’t look at fonts and the way you use them as just a means to show information to the user, but try to add something to it.Windows Phone 7 has its own custom font, optimized for use on small screens.
23. Typography appears in a number of different areas (see the samples on this slide):Pay attention to the height of a fontPay attention to the weight of a fontCommunicate what is going on with an application through typographyWords being cut off on the display means there is more information availableFonts and formatting can make your application distinguish itself in a positive way from other applications
24. Motion is another way to delight a user, but be careful:Motion can easily be overdone, resulting in actually annoying users.Motion can be easily added to applications through Expression Blend, increasing the risk of overdoing it.Compare this to a movie that contains action only for the full duration of the movie. Typically, such a movie would be a tiring, uninteresting experience.
25. It is important to make your applications easy to use.Earlier, when talking about making applications delightful, it became clear that you can and should find your own style and combine that with the Metro design principle to make your application special to the user.However, don’t try to find too much of your own style in trying to make your application easy to use. Users expect consistency amongst applications on a Windows Phone 7 (no learning curve)
26. The application bar contains icons.Make sure that you are using the same icons for similar operations across the device, because that makes the device easier to use.Creating your own icons is very hard. If you need to do so, iterate and test often with users.A number of icons are available to use inside your own applications: http://www.microsoft.com/downloads/details.aspx?FamilyID=369b20f7-9d30-4cff-8a1b-f80901b2da93&displaylang=en.
27. The application bar contains icons.Make sure that you are using the same icons for similar operations across the device, because that makes the device easier to use.Creating your own icons is very hard. If you need to do so, iterate and test often with users.A number of icons are available to use inside your own applications: http://www.microsoft.com/downloads/details.aspx?FamilyID=369b20f7-9d30-4cff-8a1b-f80901b2da93&displaylang=en.