WIndows Phone 7 UX

3,306 views

Published on

Slides from Windows Phone 7 Workshop in Melbourne, October 2011

Published in: Design, Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,306
On SlideShare
0
From Embeds
0
Number of Embeds
108
Actions
Shares
0
Downloads
62
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

WIndows Phone 7 UX

  1. 1. Shane Morris<br />Automatic Studio<br />Windows Phone 7 User Experience<br />1<br />
  2. 2. Windows Phone 7 UserExperience<br />Attributes<br />Elements<br />2<br />WINDOWS PHONE 7 UX - METRO<br />
  3. 3. Thanks MIX10!<br />http://channel9.msdn.com/Events/MIX/MIX10/CL14<br />3<br />WINDOWS PHONE 7 UX - METRO<br />
  4. 4.
  5. 5. Windows Phone 7 User Experience<br />Design language (codenamed Metro)<br />Designing delightful applications for Windows Phone<br />Shane Morris – Automatic Studio<br />WINDOWS PHONE 7 UX - METRO<br />5<br />
  6. 6. Designing Windows Phone 7 Series<br />http://channel9.msdn.com/Events/MIX/MIX10/CL14<br />Albert Shum – That Dude<br />Michael Smuga – Studio Director<br />Chad Roberts – UX Design Lead<br />6<br />
  7. 7. Story of Metro<br />WINDOWS PHONE 7 UX - METRO<br />7<br />
  8. 8. WINDOWS PHONE 7 UX - METRO<br />8<br />
  9. 9. Metro<br />WINDOWS PHONE 7 UX - METRO<br />9<br />
  10. 10.
  11. 11. WINDOWS PHONE 7 UX - METRO<br />11<br />
  12. 12. WINDOWS PHONE 7 UX - METRO<br />12<br />
  13. 13. WINDOWS PHONE 7 UX - METRO<br />13<br />
  14. 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.<br />ETRO<br />WINDOWS PHONE 7 UX - METRO<br />14<br />
  15. 15. Metro Principles<br />WINDOWS PHONE 7 UX - METRO<br />15<br />
  16. 16. Principle: Clean, Light, Open, Fast<br />Feels Fast and Responsive<br />Focus on Primary Tasks<br />Do a Lot with Very Little<br />Fierce Reduction of Unnecessary Elements<br />Delightful Use of Whitespace<br />Full Bleed Canvas<br />WINDOWS PHONE 7 UX - METRO<br />16<br />
  17. 17. Principle: Celebrate Typography<br />Type is Beautiful, Not Just Legible<br />Clear, Straightforward Information Design<br />Uncompromising Sensitivity to Weight, Balance and Scale<br />WINDOWS PHONE 7 UX - METRO<br />17<br />
  18. 18. Principle: Alive in Motion<br />Feels Responsive and Alive<br />Creates a System<br />Gives Context to Improve Usability<br />Transition Between UI is as Important as the Design of the UI<br />Adds Dimension and Depth<br />WINDOWS PHONE 7 UX - METRO<br />18<br />
  19. 19. Principle: Content, Not Chrome<br />Delight through Content Instead of Decoration<br />Reduce Visuals that are Not Content<br />Contents is the UI<br />Direct interaction with the Content Directly<br />WINDOWS PHONE 7 UX - METRO<br />19<br />
  20. 20. Principle: Authentically Digital<br />Design for the Form Factor<br />Don’t Try to be What It’s NOT<br />Be Direct<br />WINDOWS PHONE 7 UX - METRO<br />20<br />
  21. 21. Principles<br />Clean, Light, Open, Fast<br />Celebrate Typography<br />Alive in Motion<br />Content, Not Chrome<br />Authentically Digital<br />WINDOWS PHONE 7 UX - METRO<br />21<br />
  22. 22. WINDOWS PHONE 7 UX - METRO<br />22<br />
  23. 23. Metro User Experience<br />Focuses on the individual and their tasks<br />Helps organize information and applications<br />WINDOWS PHONE 7 UX - METRO<br />23<br />
  24. 24. Start<br />Glance & Go<br />Get Me There<br />WINDOWS PHONE 7 UX - METRO<br />24<br />
  25. 25. WINDOWS PHONE 7 UX - METRO<br />25<br />
  26. 26. Metro<br />WINDOWS PHONE 7 UX - METRO<br />26<br />
  27. 27. Building Great Windows PhoneApplications<br />Focus on designing the experience<br />Build delightful experiences<br />Build experiences that are easy to use<br />Michael Smuga – Studio Director<br />WINDOWS PHONE 7 UX - METRO<br />27<br />
  28. 28. Who we design for: Anna + Miles<br />Anna<br />Part time PR professional and busy mom<br />“My life is a balancing act between work,<br />family, friends, and my own personal needs.”<br />Miles<br />Growing his own architectural biz<br />“I love running my life real-time so I can take<br />advantage of whatever is inspiring me…whether<br />it’s a new project, a pick up game or a stolen<br />moment with Anna.”<br />WINDOWS PHONE 7 UX - METRO<br />28<br />
  29. 29. RED THREADS.<br />THESE ARE<br />THE PRINCIPLESTHAT GUIDE THE EXPERIENCES<br />WINDOWS PHONE 7 UX - METRO<br />29<br />
  30. 30. Weather<br />Personal<br />Weather surfaced on the live tile in Start<br />Relevant<br />Weather updated based on your location<br />Connected<br />Weather for your contacts<br />WINDOWS PHONE 7 UX - METRO<br />30<br />
  31. 31. Build delightful experience<br />Be inspired by Metro<br />…but look for balance between the Metro<br />principles and your own style <br />WINDOWS PHONE 7 UX - METRO<br />31<br />
  32. 32. WINDOWS PHONE 7 UX - METRO<br />32<br />
  33. 33. Color<br />Use color to delight the user<br />Use color to personalize experience<br />Use color to emphasize hierarchy<br />WINDOWS PHONE 7 UX - METRO<br />33<br />
  34. 34. WINDOWS PHONE 7 UX - METRO<br />34<br />
  35. 35. WINDOWS PHONE 7 UX - METRO<br />35<br />
  36. 36. Typography<br />Make words feel welcome<br />Pay attention to balance, <br />weight & scale<br />WINDOWS PHONE 7 UX - METRO<br />36<br />
  37. 37. WINDOWS PHONE 7 UX - METRO<br />37<br />
  38. 38. Motion<br />Use motion to delight the user<br />Remember that pacing is important: the more you use it, the less special it becomes<br />WINDOWS PHONE 7 UX - METRO<br />38<br />
  39. 39. Make It Easy to Use<br />Familiar = Easy to use<br />Provide consistent and predictable experience<br />WINDOWS PHONE 7 UX - METRO<br />39<br />
  40. 40. Hardware Implications<br />Hardware buttons<br />Optional landscape<br />keyboards<br />Design for one hand usage<br />whenever possible<br />WINDOWS PHONE 7 UX - METRO<br />40<br />
  41. 41. Gestures<br />WINDOWS PHONE 7 UX - METRO<br />41<br />
  42. 42. Touch<br />Recommended touch target size is 9mm<br />Minimum touch target size is 7mm<br />Minimum spacing between<br />elements is 2mm<br />Visual size is 60-100% of the touch<br />target size<br />WINDOWS PHONE 7 UX - METRO<br />42<br />
  43. 43. Common controls<br />WINDOWS PHONE 7 UX - METRO<br />43<br />
  44. 44. Application Bar + Menu<br />Up to 4 icons<br />Don’t fill all 4 slots if not needed<br />Swipe up the bar to bring up<br />the menu<br />Trigger<br />WINDOWS PHONE 7 UX - METRO<br />44<br />
  45. 45. Pivots (Tabs)<br />Separate multiple tasks<br />Tap or flick tabs to change them<br />Trigger<br />WINDOWS PHONE 7 UX - METRO<br />45<br />
  46. 46. Panoramas (Hubs)<br />Rich experience<br />Aggregate multiple sources<br />WINDOWS PHONE 7 UX - METRO<br />46<br />
  47. 47. Hubs vs. Single-Page Apps<br />WINDOWS PHONE 7 UX - METRO<br />47<br />
  48. 48. Iconography<br />Icons in the application menu <br />should be consistent<br />Test icons with users<br />(pay attention to context)<br />WINDOWS PHONE 7 UX - METRO<br />48<br />
  49. 49. Call to Action<br />Familiarize yourself with Metro<br />Stay Connected & Get Informed<br />Download & Start Creating<br />Chad Roberts – UX Design Lead<br />WINDOWS PHONE 7 UX - METRO<br />49<br />
  50. 50. Summary<br />Metro<br />Personas<br />Red Threads<br />Focus on designing the experience<br />Make applications delightful and easy to use<br />WINDOWS PHONE 7 UX - METRO<br />50<br />
  51. 51. Stay Connected & Be Informed<br />Attend “An Introduction to Developing Applications for Microsoft Silverlight”. <br />Watch “Authoring for Microsoft Silverlight 4 with Microsoft Expression Blend.<br />Read about design on Christian Schormann’s blog.<br />http://electricbeach.org<br />WINDOWS PHONE 7 UX - METRO<br />51<br />
  52. 52. Download & Start Creating<br />Get the Windows Phone Developer Tools<br />Download the UI Design and Interaction Guide<br />Interact with the design tools when Available<br />http://developer.windowsphone.com<br />WINDOWS PHONE 7 UX - METRO<br />52<br />
  53. 53. Thank you!<br />Albert Shum – That Dude<br />Michael Smuga – Studio Director<br />Chad Roberts – UX Design Lead<br />WINDOWS PHONE 7 UX - METRO<br />53<br />
  54. 54. Expression Blend<br />Design tool for XAML platform (for now)<br />WYSIWYG<br />Designer friendly<br />WINDOWS PHONE 7 UX - METRO<br />54<br />
  55. 55. Expression BlendSketchFlow<br />Prototyping for XAML applications<br />wp7sketchflow.codeplex.com/<br />55<br />WINDOWS PHONE 7 UX - METRO<br />
  56. 56. Resources<br />User Experience Design Guidelines for Windows Phone<br />MSDN<br />http://msdn.microsoft.com/en-us/library/hh202915(v=VS.92).aspx<br />User Experience and User Interface<br />AppHub<br />http://create.msdn.com/en-US/education/basics/ux_ui<br />Windows Phone Expression Blend and SketchFlow Tutorials<br />Microsoft .toolbox<br />http://www.microsoft.com/design/toolbox/school/tutorials.aspx<br />Silverlight TV 81: Four Great Windows Phone UX Tips<br />http://www.silverlightshow.net/news/Silverlight-TV-81-Four-Great-Windows-Phone-UX-Tips.aspx<br />Designing for Windows Phone<br />Icons<br />Templarian<br />http://templarian.com/2011/08/14/wp_icons_up_to_105/<br />Windows Phone 7 Design Templates<br />Photoshop<br />http://wp7designtemplates.codeplex.com/<br />56<br />WINDOWS PHONE 7 UX - METRO<br />
  57. 57. Thank you<br />Shane MorrisAutomatic Studio<br />shane@automaticstudio.com.auTwitter/shanemo<br />57<br />WINDOWS PHONE 7 UX - METRO<br />

×