• Like
  • Save

UXV certification - sessions 22 - mobile - metro

  • 399 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
399
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Windows 8 UX Design Welcome to Metro | Windows 8 Design LanguageAll rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  • 2. Where does Metro come from? The origins of Windows8 design languageAll rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  • 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. 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. 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. 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. The basics of the Metro-Style designAll rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  • 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. :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. 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. Anatomy of the metro style appAll rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  • 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. 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. 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. Tiles Tiles = application shortcutsWindows 8 UX Design Language 15 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  • 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. 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. 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. 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. 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. 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. Dialogs Lightbox Modal Dialog This is the screenWindows 8 UX Design Language 22 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  • 23. Metro-style NavigationAll rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  • 24. Navigation BasicsHub page Section page Details PageWindows 8 UX Design Language 24 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  • 25. Wizard-oriented navigation modelWindows 8 UX Design Language 25 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  • 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. Detailed Screen Layout Header On Canvas ControlsWindows 8 UX Design Language 27 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  • 28. Detailed Screen Layout Header Correct GroupingWindows 8 UX Design Language 28 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  • 29. Navigation MapWindows 8 UX Design Language 29 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  • 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. Layout Grid StructureAll rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  • 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. 2 Units ½ UnitWindows 8 UX Design Language 33 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  • 34. 1 Unit ½ UnitWindows 8 UX Design Language 34 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  • 35. 4 UnitWindows 8 UX Design Language 35 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  • 36. Case StudyAll rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  • 37. General App NavigationWindows 8 UX Design Language 37 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  • 38. Date filtering (the iPad style)Windows 8 UX Design Language 38 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  • 39. Date filtering (the win8 style)Windows 8 UX Design Language 39 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  • 40. Skype Metro – What’s your guess?Windows 8 UX Design Language 40 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  • 41. Skype MetroWindows 8 UX Design Language 41 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  • 42. Windows 8 UX Design Language 42 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  • 43. Windows 8 UX Design Language 43 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  • 44. Windows 8 UX Design Language 44 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  • 45. How do people use the tablet?All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  • 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. 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. Optimal Touch Areas For InteractionWindows 8 UX Design Language 48 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  • 49. Optimal Touch Areas For ReadingWindows 8 UX Design Language 49 All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
  • 50. To be continued…All rights reserved | Tal Florentin, UX Vision Ltd. © 2012