1. Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris (@shanemo) Automatic Studio DEV221

2. a bit about me

3. 3

4. METRO DESIGN LANGUAGE4

5. design language principles PRIDE IN CRAFTSMANSHIP BE FAST AND FLUID AUTHENTICALLY DIGITAL DO MORE WITH LESS WIN AS ONE

7. visual designinteraction design Lack of controls Animation Live tiles Edge swipes Panoramic views information design Live tiles Semantic zoom Panoramic views characteristics

8. the secret LOOKS EASY, EH? BUT YOUR MISTAKES ARE EVEN MORE OBVIOUS LESS VISUAL DEVICES TO Direct attention Communicate grouping Delight Brand

9. Visual language Interaction style and structure Navigation style and structure Attitude

12. Conceptual Information Interaction Visual yesterday today

13. design.windows.com

14. Conceptual Information Interaction Visual

15. METRO DESIGN LANGUAGE15 Information design

17. NAVIGATION MODELS

18. content before chrome IN GENERAL, USE CONTENT FOR NAVIGATION Otherwise use App bar Exceptions:  Back button  Context menus in page header USE PANORAMA RATHER THAN NAVIGATION MENU Sematic zoom to provide an overview NAVIGATION METRO DESIGN LANGUAGE 18

19. WINDOWS PHONE NAVIGATION MODELS

20. navigation structure APPLICATION STRUCTURE AND NAVIGATION MODELS FOR WINDOWS PHONE http://msdn.microsoft.com/en-us/library/hh202909(v=vs.92).aspx> WINDOWS PHONE

21. typical navigation structure Panorama Pivot Page WINDOWS PHONE

22. WINDOWS 8 NAVIGATION MODELS

23. navigation structure HIERARCHICALFLAT METRO DESIGN LANGUAGE 23 WINDOWS 8

24. hierarchical navigation FLATTER, WIDER NAVIGATION Hub page Section page Detail page

25. example HIERARCHICAL NAVIGATION

26. flat navigation FLATTER, WIDER NAVIGATION

27. Back Button WINDOWS 8 Top left corner Key to hierarchical navigation  But other navigation is possible WINDOWS PHONE Hardware button No Back button (or other navigation) on screen. Can manipulate the ‘back stack’ to skip pages.  E.g. pressing back at the end of a wizard. Home button discouraged  Pinned Live tiles that link into the app don’t generally provide a Back (or other) path to the home screen. NAVIGATION MODELS

28. header menu ALLOWS HORIZONTAL NAVIGATION TO PEER TOPICS METRO DESIGN LANGUAGE 28 NAVIGATION MODELS

29. SBS

30. METRO DESIGN LANGUAGE30 Information design

31. INFORMATION IS BEAUTIFUL “a neutral and objective approach that emphasized rational planning and de- emphasized the subjective, or individual, expression” Britannica www.britannica.com/EBchecked/topic/ 1032864/graphic- design/242772/Graphic-design-1945-75 international style www.smashingmagazine.com/2009/07/17/lessons- from-swiss-style-graphic-design/

32. METRO DESIGN LANGUAGE32

33. Conceptual Information Interaction Visual

34. METRO DESIGN LANGUAGE34 Interaction design

36. content before chrome LET THE CONTENT BE THE INTERFACE Be trustworthy MOVE COMMANDS TO THE APP BAR

41. METRO DESIGN LANGUAGE41 Interaction design

43. Press and hold to learn Swipe to select Slide to drag Tap for primary action Pinch to zoom Rotate to rotate Swipe from edge for app and system UI

45. app bar COMMANDS THAT MANIPULATE SELECTION ON THE LEFT ‘OVERALL’ COMMANDS ON THE RIGHT ‘Commit’ before ‘Cancel’ as per traditional windows ‘New’ on the very right BARS TO GROUP RELATED COMMANDS HIDE COMMANDS WHEN THEY ARE NOT RELEVANT BUT MAINTAIN COMMAND POSITIONS …THESE GUIDELINES MAY NEED TO BE COMPROMISED FROM TIME TO TIME METRO DESIGN LANGUAGE 45 WINDOWS 8

46. app bar SOME COMMANDS DON’T GO IN THE APP BAR Commands that are required for a user to complete their task may be placed on the main screen. Cut, copy and paste go in context menus Consider other context menus  Particularly for items that are not necessary for the ‘core’ experience METRO DESIGN LANGUAGE 46 WINDOWS 8

47. app bar BUSY APP BARS App bar buttons can have context menus  Use context menus to group related items, particularly when you have a large number of controls  Context menus can contain other controls, as well as buttons Note that your app bar may appear on two lines in portrait view WINDOWS 8

48. app bar AN APP BAR CAN ALSO APPEAR SIMULTANEOUSLY FROM THE TOP OF THE SCREEN The app bar at the bottom must follow layout rules The app bar at the top can have any appropriate layout. METRO DESIGN LANGUAGE 48 WINDOWS 8

50. METRO DESIGN LANGUAGE50 Interaction design

52. Conceptual Information Interaction Visual

53. METRO DESIGN LANGUAGE53 Visual design

61. METRO DESIGN LANGUAGE61 Visual design

74. METRO DESIGN LANGUAGE74 Visual design

76. fonts WINDOWS 8 Segoe UI Controls and UI elements Reserve Segoe UI Light for >20pts Calibri read/write Cambria reading http://msdn.microsoft.com/en- us/library/windows/apps/hh700 394.aspx WINDOWS PHONE Segoe WP Segoe WP Light only for large text 76 TYPOGRAPHY

78. METRO DESIGN LANGUAGE78 Visual design

80. visual hierarchy size colour CASE alignment weight proximity colour proximity

82. METRO DESIGN LANGUAGE82

83. METRO DESIGN LANGUAGE83

84. METRO DESIGN LANGUAGE84 Visual design

85. animation MOTION DELIGHTS THE USER MOTION ADDS HINTS TOWARDS INTERACTION MOTION MASKS SLOW PERFORMANCE MOTION ADDS PERSONALITY MOTION ADDS CONSISTENCY MOTION ADDS ELEGANCE. msdn.microsoft.com/en- us/library/hh202871(v=vs.92).aspx USE MOTION TO DELIGHT THE USER REMEMBER THAT PACING IS IMPORTANT: THE MORE YOU USE IT, THE LESS SPECIAL IT BECOMES RESPECT STANDARD ANIMATIONS

86. METRO DESIGN LANGUAGE86

87. what metro is good for

88. METRO DESIGN LANGUAGE88

89. fluent UImetro 89 inputoutput input output

90. METRO DESIGN LANGUAGE90 recap

91. windows 8 / windows phone ux checklist ‘BEST APP’ STATEMENT MINIMUM NECESSARY FEATURES NAVIGATION MODEL CONTRACTS APP BAR PAGE LAYOUTS VISUAL DESIGN TEST AND REFINE CONTINUOUSLY! RECAP

92. METRO DESIGN LANGUAGE92 shane morris shane@automaticstudio.com.au @shanemo RESOURCES design.windows.com

93. Breakout Sessions DEV221 - Design and Layout for Windows 8 and Windows Phone Style Apps. Thursday 8:15am Meetings Rooms 5 & 6 Other Windows 8 DEV212 - What’s New for Windows 8 Developers Parts 1-3 Other Windows Phone WPH333 - Developing for Key Windows Phone Consumer Scenarios WPH332 - Sounds like a Windows Phone Application Find Me Later At… Speakers lounge after this talk and 11 am Thursday