UXV certification - sessions 22 - mobile - metro

622 views
560 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
622
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

UXV certification - sessions 22 - mobile - metro

  1. 1. Windows 8 UX Design Welcome to Metro | Windows 8 Design LanguageAll rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  2. 2. Where does Metro come from? The origins of Windows8 design languageAll rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  3. 3. Metro – Sleek, quick and modern • Consolidating groups of common tasks to speed up usage (Gestalt) • Large hubs over small buttons • Animation, movement and transitions for live response and continuity • Scrolling canvasWindows 8 UX Design Language 3 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  4. 4. The origins of Metro: Bauhouse • Bauhaus - a German modernist school of design • Extreme Reductionism (Minimalism) • Reducing design to its functionWindows 8 UX Design Language 4 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  5. 5. The origins of Metro: International Typography Our lives are constantly in motion, so we need to have to be able to glance at these kind of signs, get the information and keep going • Swiss Typography Movement: • Minimal & simple 2D 1-color icons • Good typography • Large text that catches the eye • Segeo font family • No capitals • No bolds • No rounded corners • No shadows and 3D effectsWindows 8 UX Design Language 5 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  6. 6. The origins of Metro: Emotional Impact Through Motion • The power of kinetic typography • Movement brings the text and shapes to life • Creating an emotional responseWindows 8 UX Design Language 6 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  7. 7. The basics of the Metro-Style designAll rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  8. 8. 5 Leading Principles Used to help you choose throughout the way • Show pride in craftsmanship (‫)אמנות‬ • Be fast and fluid • Be authentically digital • Do more with less • Win as oneWindows 8 UX Design Language 8 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  9. 9. :Leading Guidelines Focus: • Be great at one thing • Let people interact with content. Put the content in the front • Do more with less - Reduce your design to its essentials Interaction, Usability and Experience • Design for intuitive interaction - take advantage of what people already know: Remember, People come to see the content, not to interact with the app • Bring life to the app by creating a sense of continuity and telling a story • Delight your users with motion and use it to create meaningful transitions • Design for touchWindows 8 UX Design Language 9 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  10. 10. Leading Guidelines Visual Design: • Sweet the details • Use balance, symmetry and hierarchy to foster trust and sense of integrity • Use typography beautifully, • Use bold, vibrant colors • Align the app layout to the grid • Promote consistency Technology • Connect to the cloud and to other apps and platforms (task continuity, social sharing, etc.)Windows 8 UX Design Language 10 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  11. 11. Anatomy of the metro style appAll rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  12. 12. The basic concept of the canvas That is your content canvas This is the ScreenWindows 8 UX Design Language 12 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  13. 13. Using horizontal layout with visual cues A B C DWindows 8 UX Design Language 13 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  14. 14. The basic concept of the canvas A B C DWindows 8 UX Design Language 14 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  15. 15. Tiles Tiles = application shortcutsWindows 8 UX Design Language 15 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  16. 16. Single Canvas Things move in and out with motion rather than pop up in layers This is the screenWindows 8 UX Design Language 16 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  17. 17. Single Canvas Things move in and out with motion rather than pop up in layers This is the screenWindows 8 UX Design Language 17 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  18. 18. View States 3 main application view states Full Screen View Snapped View Fill ViewWindows 8 UX Design Language 18 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  19. 19. App modes to fit view states Full Screen View Snapped View Fill View A A A B C Other Other C B C BWindows 8 UX Design Language 19 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  20. 20. Bars This is the screen This is the screen Application Bar Application Bar: Charms Bar: Views and actions Standard options available from every app: - Cross app search - Share app content - Connect to devices - App settings - Start - back to main Start screenWindows 8 UX Design Language 20 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  21. 21. Context Menus Up to 5 items Option 1 Option 2 Option 3 Option 4 Option 5Windows 8 UX Design Language 21 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  22. 22. Dialogs Lightbox Modal Dialog This is the screenWindows 8 UX Design Language 22 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  23. 23. Metro-style NavigationAll rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  24. 24. Navigation BasicsHub page Section page Details PageWindows 8 UX Design Language 24 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  25. 25. Wizard-oriented navigation modelWindows 8 UX Design Language 25 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  26. 26. Detailed Screen Layout Back Header Nav Bar Header Menu Home Home Link Display Modes Actions: Filter, sort, new…. App BarWindows 8 UX Design Language 26 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  27. 27. Detailed Screen Layout Header On Canvas ControlsWindows 8 UX Design Language 27 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  28. 28. Detailed Screen Layout Header Correct GroupingWindows 8 UX Design Language 28 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  29. 29. Navigation MapWindows 8 UX Design Language 29 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  30. 30. Header top navigation Header Navigation Section A Section B Section CWindows 8 UX Design Language 30 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  31. 31. Layout Grid StructureAll rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  32. 32. Unit = 20px Top header = 7 Units (140px) 6 Units 2.5 Units 6.5 UnitsWindows 8 UX Design Language 32 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  33. 33. 2 Units ½ UnitWindows 8 UX Design Language 33 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  34. 34. 1 Unit ½ UnitWindows 8 UX Design Language 34 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  35. 35. 4 UnitWindows 8 UX Design Language 35 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  36. 36. Case StudyAll rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  37. 37. General App NavigationWindows 8 UX Design Language 37 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  38. 38. Date filtering (the iPad style)Windows 8 UX Design Language 38 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  39. 39. Date filtering (the win8 style)Windows 8 UX Design Language 39 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  40. 40. Skype Metro – What’s your guess?Windows 8 UX Design Language 40 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  41. 41. Skype MetroWindows 8 UX Design Language 41 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  42. 42. Windows 8 UX Design Language 42 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  43. 43. Windows 8 UX Design Language 43 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  44. 44. Windows 8 UX Design Language 44 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  45. 45. How do people use the tablet?All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  46. 46. Most Common Tablet Grips • 1 hand holding, • 2 hand holding, 1 hand interacting 2 thumbs interacting • right/bottom areas best for interaction • Right/left bottom areas best for interaction • Low right corner hidden • Anchored thumbs – better accuracy • Minimal Reach – better • Touch middle of the screen requires • Read/browse, Light typing alternative position • Gaming, Read/browse, Light typingWindows 8 UX Design Language 46 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  47. 47. Most Common Tablet Grips • Device rests on table/legs • Device rests on table, 2 hands fully interactive Interaction from a distance • bottom area best for interaction • bottom area best for interaction • Lower corners covered by hands • Touching upper areas may move device off • Reduce need for reaching higher areas balanceWindows 8 UX Design Language 47 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  48. 48. Optimal Touch Areas For InteractionWindows 8 UX Design Language 48 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  49. 49. Optimal Touch Areas For ReadingWindows 8 UX Design Language 49 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  50. 50. To be continued…All rights reserved | Tal Florentin, UX Vision Ltd. © 2012

×