1. Designing metro style apps for Windows 8 A walkthrough some UI / UX best practices Lanny Geffen, Creative Director, Digiflare

2. Who am I ?

3. Agenda:  Metro style background & design principles  Layout and typography  Navigation design  Filters, pivots, sorts, and views  Command design  Touch design

4. Metro background & design principles

5. Three key influences  Modern design – Bauhaus  International typographic style – Swiss design  Motion design – Cinematography

14. Why Swiss design?  Focus on cleanliness, readability and beautiful graphic design.  The tools of Swiss design:  Typography  Grid  Bold flat color  Photography in place of illustration or drawings

15. Three key influences  Modern design – Bauhaus  International typographic style – Swiss design  Motion design – Cinematography

16. Three key influences  Modern design – Reduce to the essence  International typographic style – Clear, honest, and beautiful  Motion design – Bring it to life

17. Metro style design principles  Pride in craftsmanship  Be fast and fluid  Authentically digital  Do more with less  Win as one

18. Pride in craftsmanship  Sweat the details  Make it safe and reliable  Balance, symmetry, hierarchy  Align to the grid

19. Layout & typography

30. Navigation design

31. Be fast and fluid  Life is mobile  Delight with motion  Design for touch  Intuitive interaction  Be responsive and ready  Immersive and compelling

32. Hierarchical system Hierarchical system: Hub pages Section page Detail pages

33. Flat system Flat system:  Games  Browsers  Document Creation

35. Hub page and content sections

36. Semantic zoom

37. Nav bar navigation  Header and back button  Hub page  Content section or categories

38. Header menu

40. Filters, pivots, sorts and views

41. Give users control over the way they experience content  Use on-canvas controls for filtering, pivoting, or sorting when finding an item is a primary task  Controls should go into the app bar, if the focus of the app is on browsing for content (e.g. magazine, or shopping)

42. Filters, pivots, sorts and views Give users control over the way they experience content  Use on-canvas controls for filtering, pivoting, or sorting when finding an item is a primary task  Controls should go into the app bar, if the focus of the app is on browsing for content (e.g. magazine, or shopping)

48. Command design

49. command design  Use the canvas for all core scenarios  Use the charms to enable the most common app commands (search, share, devices, settings)  Use the app bar to display commands on-demand  Use context menus for clipboard actions, or commands that apply to content that cannot be selected (like an image)

50. command placements Step 1: organize commands  What commands should appear throughout the app?  What comands should show only on certain pages?  What commands should use charms or go in settings?

51. command placements Step 2: command sets  What commands should appear throughout the app?  What comands should show only on certain pages?  What commands should use charms or go in settings?

52. further simplify with menus Step 3: menus

53. command placements Goals:  Predictability  Ergonomics  Aesthetics

54. command placements 1. Place persistent commands on the right

55. command placements 2. Use the edges

56. command placements 3. show/hide disabled commands

57. command placements 4. Insert selection commands from left

58. command placements 4. Consider dependent command scenarios

59. consistent placement: new and delete

60. Design for touch

61. Use the Windows 8 touch language

62. 1. Use fingers for what they’re good at

63. 2. Browse content with touch

64. 3. Provide visual feedback

65. 4. Content follows finger… or not

66. 5. Keep interactions reversible

67. 6. Allow for any number of fingers

68. 7. Try to keep interactions untimed

69. Windows 8 touch language Press and hold to learn

70. Windows 8 touch language Tap for primary action

71. Windows 8 touch language Slide to pan

72. Windows 8 touch language Swipe to select and move

73. Windows 8 touch language Pinch and stretch to zoom

74. Windows 8 touch language Turn to rotate

75. Windows 8 touch language Swipe from edge for app commands

76. Windows 8 touch language Swipe from edge for system commands

77. Touch considerations

78. InteractionReading

79. Target touch size guidelines Recommended size: 40px Accuracy counts: 50px It just won’t fit: 30px

80. Live tiles Notification FlipView Text boxes Spell checking Thumbnails Flyouts Message dialogs Context menus Tooltips Buttons TimePickers DatePickers Check boxes Radio buttons Select control Sliders Toggle switches Rating controls Progress controls so much more…

81. Win as one  Fit into the UI model  Reduce redundancy  Work together to complete scenarios  Tool and templates are designed to scale

82. Do more with less  Be great at something  Focused and direct  Content before chrome  Inspire confidence

86. Resources Design assets: http://msdn.microsoft.com/library/windows/apps/hh700403 Windows 8 Dev Center: http://msdn.microsoft.com/en-us/windows/apps/ Build 2011: channel9.msdn.com/Events/BUILD/BUILD2011

87. Attribution This presentation leveraged materials and information from: “Designing Metro style: principles and personality” (2011) by Samual Moreau, Director UX Design and Research, Microsoft, watch it here: http://channel9.msdn.com/Events/BUILD/BUILD2011/APP-395T MSDN Windows 8 developer center, “User experience (UX) design patterns for Metro style apps”: http://msdn.microsoft.com/en-us/library/windows/apps/hh770552

88. Thank you @lgeffen lanny.geffen@digiflare.com Download this presentation at: www.pixelsmashing.com/resources/designing4win8_v1.pptx