More Related Content Similar to UXV certification - sessions 22 - mobile - metro (20) More from TAL FLORENTIN (19) UXV certification - sessions 22 - mobile - metro1. Windows 8 UX Design
Welcome to Metro | Windows 8 Design Language
All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
2. Where does Metro come from?
The origins of Windows8 design language
All 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 canvas
Windows 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 function
Windows 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 effects
Windows 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 response
Windows 8 UX Design Language 6
All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
7. The basics of the Metro-Style design
All 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 one
Windows 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 touch
Windows 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 app
All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
12. The basic concept of the canvas
That is your content canvas
This is the Screen
Windows 8 UX Design Language 12
All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
13. Using horizontal layout with visual cues
A B C D
Windows 8 UX Design Language 13
All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
14. The basic concept of the canvas
A B C D
Windows 8 UX Design Language 14
All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
15. Tiles
Tiles = application shortcuts
Windows 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 screen
Windows 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 screen
Windows 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 View
Windows 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 B
Windows 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 screen
Windows 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 5
Windows 8 UX Design Language 21
All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
22. Dialogs
Lightbox
Modal Dialog This is the screen
Windows 8 UX Design Language 22
All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
24. Navigation Basics
Hub page Section page Details Page
Windows 8 UX Design Language 24
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 Bar
Windows 8 UX Design Language 26
All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
27. Detailed Screen Layout
Header On Canvas Controls
Windows 8 UX Design Language 27
All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
28. Detailed Screen Layout
Header
Correct Grouping
Windows 8 UX Design Language 28
All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
30. Header top navigation
Header Navigation
Section A Section B Section C
Windows 8 UX Design Language 30
All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
32. Unit = 20px
Top header = 7 Units (140px)
6 Units
2.5 Units 6.5 Units
Windows 8 UX Design Language 32
All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
33. 2 Units
½ Unit
Windows 8 UX Design Language 33
All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
34. 1 Unit
½ Unit
Windows 8 UX Design Language 34
All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
35. 4 Unit
Windows 8 UX Design Language 35
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 Metro
Windows 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 typing
Windows 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 balance
Windows 8 UX Design Language 47
All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
48. Optimal Touch Areas
For Interaction
Windows 8 UX Design Language 48
All rights reserved | Tal Florentin, UX Vision Ltd. © 2012
49. Optimal Touch Areas
For Reading
Windows 8 UX Design Language 49
All rights reserved | Tal Florentin, UX Vision Ltd. © 2012