This document summarizes Shane Morris' presentation on the Windows Phone 7 user experience and Metro design language. The presentation discusses Metro principles of clean, minimalist design focused on typography, motion, and content over chrome. It provides examples of the weather and contacts apps to illustrate these principles. The document concludes by encouraging developers to focus on designing delightful experiences for Windows Phone 7 that are easy to use and aligned with Metro design guidelines.

1. Shane Morris Automatic Studio Windows Phone 7 User Experience 1

2. Windows Phone 7 UserExperience Attributes Elements 2 WINDOWS PHONE 7 UX - METRO

3. Thanks MIX10! http://channel9.msdn.com/Events/MIX/MIX10/CL14 3 WINDOWS PHONE 7 UX - METRO

5. Windows Phone 7 User Experience Design language (codenamed Metro) Designing delightful applications for Windows Phone Shane Morris – Automatic Studio WINDOWS PHONE 7 UX - METRO 5

6. Designing Windows Phone 7 Series http://channel9.msdn.com/Events/MIX/MIX10/CL14 Albert Shum – That Dude Michael Smuga – Studio Director Chad Roberts – UX Design Lead 6

7. Story of Metro WINDOWS PHONE 7 UX - METRO 7

8. WINDOWS PHONE 7 UX - METRO 8

9. Metro WINDOWS PHONE 7 UX - METRO 9

11. WINDOWS PHONE 7 UX - METRO 11

12. WINDOWS PHONE 7 UX - METRO 12

13. WINDOWS PHONE 7 UX - METRO 13

14. METRO IS OUR DESIGN LANGUAGE. WE CALL IT METRO BECAUSE IT’S MODERN AND CLEAN. IT’S FAST AND IN MOTION. IT’S ABOUT CONTENT AND TYPOGRAPHY. AND IT’S ENTIRELY AUTHENTIC. ETRO WINDOWS PHONE 7 UX - METRO 14

15. Metro Principles WINDOWS PHONE 7 UX - METRO 15

16. Principle: Clean, Light, Open, Fast Feels Fast and Responsive Focus on Primary Tasks Do a Lot with Very Little Fierce Reduction of Unnecessary Elements Delightful Use of Whitespace Full Bleed Canvas WINDOWS PHONE 7 UX - METRO 16

17. Principle: Celebrate Typography Type is Beautiful, Not Just Legible Clear, Straightforward Information Design Uncompromising Sensitivity to Weight, Balance and Scale WINDOWS PHONE 7 UX - METRO 17

18. Principle: Alive in Motion Feels Responsive and Alive Creates a System Gives Context to Improve Usability Transition Between UI is as Important as the Design of the UI Adds Dimension and Depth WINDOWS PHONE 7 UX - METRO 18

19. Principle: Content, Not Chrome Delight through Content Instead of Decoration Reduce Visuals that are Not Content Contents is the UI Direct interaction with the Content Directly WINDOWS PHONE 7 UX - METRO 19

20. Principle: Authentically Digital Design for the Form Factor Don’t Try to be What It’s NOT Be Direct WINDOWS PHONE 7 UX - METRO 20

21. Principles Clean, Light, Open, Fast Celebrate Typography Alive in Motion Content, Not Chrome Authentically Digital WINDOWS PHONE 7 UX - METRO 21

22. WINDOWS PHONE 7 UX - METRO 22

23. Metro User Experience Focuses on the individual and their tasks Helps organize information and applications WINDOWS PHONE 7 UX - METRO 23

24. Start Glance & Go Get Me There WINDOWS PHONE 7 UX - METRO 24

25. WINDOWS PHONE 7 UX - METRO 25

26. Metro WINDOWS PHONE 7 UX - METRO 26

27. Building Great Windows PhoneApplications Focus on designing the experience Build delightful experiences Build experiences that are easy to use Michael Smuga – Studio Director WINDOWS PHONE 7 UX - METRO 27

28. Who we design for: Anna + Miles Anna Part time PR professional and busy mom “My life is a balancing act between work, family, friends, and my own personal needs.” Miles Growing his own architectural biz “I love running my life real-time so I can take advantage of whatever is inspiring me…whether it’s a new project, a pick up game or a stolen moment with Anna.” WINDOWS PHONE 7 UX - METRO 28

29. RED THREADS. THESE ARE THE PRINCIPLESTHAT GUIDE THE EXPERIENCES WINDOWS PHONE 7 UX - METRO 29

30. Weather Personal Weather surfaced on the live tile in Start Relevant Weather updated based on your location Connected Weather for your contacts WINDOWS PHONE 7 UX - METRO 30

31. Build delightful experience Be inspired by Metro …but look for balance between the Metro principles and your own style WINDOWS PHONE 7 UX - METRO 31

32. WINDOWS PHONE 7 UX - METRO 32

33. Color Use color to delight the user Use color to personalize experience Use color to emphasize hierarchy WINDOWS PHONE 7 UX - METRO 33

34. WINDOWS PHONE 7 UX - METRO 34

35. WINDOWS PHONE 7 UX - METRO 35

36. Typography Make words feel welcome Pay attention to balance, weight & scale WINDOWS PHONE 7 UX - METRO 36

37. WINDOWS PHONE 7 UX - METRO 37

38. Motion Use motion to delight the user Remember that pacing is important: the more you use it, the less special it becomes WINDOWS PHONE 7 UX - METRO 38

39. Make It Easy to Use Familiar = Easy to use Provide consistent and predictable experience WINDOWS PHONE 7 UX - METRO 39

40. Hardware Implications Hardware buttons Optional landscape keyboards Design for one hand usage whenever possible WINDOWS PHONE 7 UX - METRO 40

41. Gestures WINDOWS PHONE 7 UX - METRO 41

42. Touch Recommended touch target size is 9mm Minimum touch target size is 7mm Minimum spacing between elements is 2mm Visual size is 60-100% of the touch target size WINDOWS PHONE 7 UX - METRO 42

43. Common controls WINDOWS PHONE 7 UX - METRO 43

44. Application Bar + Menu Up to 4 icons Don’t fill all 4 slots if not needed Swipe up the bar to bring up the menu Trigger WINDOWS PHONE 7 UX - METRO 44

45. Pivots (Tabs) Separate multiple tasks Tap or flick tabs to change them Trigger WINDOWS PHONE 7 UX - METRO 45

46. Panoramas (Hubs) Rich experience Aggregate multiple sources WINDOWS PHONE 7 UX - METRO 46

47. Hubs vs. Single-Page Apps WINDOWS PHONE 7 UX - METRO 47

48. Iconography Icons in the application menu should be consistent Test icons with users (pay attention to context) WINDOWS PHONE 7 UX - METRO 48

49. Call to Action Familiarize yourself with Metro Stay Connected & Get Informed Download & Start Creating Chad Roberts – UX Design Lead WINDOWS PHONE 7 UX - METRO 49

50. Summary Metro Personas Red Threads Focus on designing the experience Make applications delightful and easy to use WINDOWS PHONE 7 UX - METRO 50

51. Stay Connected & Be Informed Attend “An Introduction to Developing Applications for Microsoft Silverlight”. Watch “Authoring for Microsoft Silverlight 4 with Microsoft Expression Blend. Read about design on Christian Schormann’s blog. http://electricbeach.org WINDOWS PHONE 7 UX - METRO 51

52. Download & Start Creating Get the Windows Phone Developer Tools Download the UI Design and Interaction Guide Interact with the design tools when Available http://developer.windowsphone.com WINDOWS PHONE 7 UX - METRO 52

53. Thank you! Albert Shum – That Dude Michael Smuga – Studio Director Chad Roberts – UX Design Lead WINDOWS PHONE 7 UX - METRO 53

54. Expression Blend Design tool for XAML platform (for now) WYSIWYG Designer friendly WINDOWS PHONE 7 UX - METRO 54

55. Expression BlendSketchFlow Prototyping for XAML applications wp7sketchflow.codeplex.com/ 55 WINDOWS PHONE 7 UX - METRO

56. Resources User Experience Design Guidelines for Windows Phone MSDN http://msdn.microsoft.com/en-us/library/hh202915(v=VS.92).aspx User Experience and User Interface AppHub http://create.msdn.com/en-US/education/basics/ux_ui Windows Phone Expression Blend and SketchFlow Tutorials Microsoft .toolbox http://www.microsoft.com/design/toolbox/school/tutorials.aspx Silverlight TV 81: Four Great Windows Phone UX Tips http://www.silverlightshow.net/news/Silverlight-TV-81-Four-Great-Windows-Phone-UX-Tips.aspx Designing for Windows Phone Icons Templarian http://templarian.com/2011/08/14/wp_icons_up_to_105/ Windows Phone 7 Design Templates Photoshop http://wp7designtemplates.codeplex.com/ 56 WINDOWS PHONE 7 UX - METRO

57. Thank you Shane MorrisAutomatic Studio shane@automaticstudio.com.auTwitter/shanemo 57 WINDOWS PHONE 7 UX - METRO