Design and Layout for Windows 8 and Windows Phone Style Apps Shane Morris Automatic Studio DEV221

a bit about me

3

METRO DESIGN LANGUAGE4

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

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

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

Visual language Interaction style and structure Navigation style and structure Attitude

Conceptual Information Interaction Visual yesterday today

design.windows.com

Conceptual Information Interaction Visual

METRO DESIGN LANGUAGE15 Information design

NAVIGATION MODELS

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

WINDOWS PHONE NAVIGATION MODELS

navigation structure APPLICATION STRUCTURE AND NAVIGATION MODELS FOR WINDOWS PHONE WINDOWS PHONE

typical navigation structure Panorama Pivot Page WINDOWS PHONE

WINDOWS 8 NAVIGATION MODELS

navigation structure HIERARCHICALFLAT METRO DESIGN LANGUAGE 23 WINDOWS 8

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

example HIERARCHICAL NAVIGATION

flat navigation FLATTER, WIDER NAVIGATION

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

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

SBS

METRO DESIGN LANGUAGE30 Information design

INFORMATION IS BEAUTIFUL “a neutral and objective approach that emphasized rational planning and de- emphasized the subjective, or individual, expression” Britannica /graphic- design/242772/Graphic-design international style from-swiss-style-graphic-design/

METRO DESIGN LANGUAGE32

Conceptual Information Interaction Visual

METRO DESIGN LANGUAGE34 Interaction design

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

METRO DESIGN LANGUAGE41 Interaction design

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

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

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

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

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

METRO DESIGN LANGUAGE50 Interaction design

Conceptual Information Interaction Visual

METRO DESIGN LANGUAGE53 Visual design

METRO DESIGN LANGUAGE61 Visual design

METRO DESIGN LANGUAGE74 Visual design

fonts WINDOWS 8 Segoe UI Controls and UI elements Reserve Segoe UI Light for >20pts Calibri read/write Cambria reading us/library/windows/apps/hh aspx WINDOWS PHONE Segoe WP Segoe WP Light only for large text 76 TYPOGRAPHY

METRO DESIGN LANGUAGE78 Visual design

visual hierarchy size colour CASE alignment weight proximity colour proximity

METRO DESIGN LANGUAGE82

METRO DESIGN LANGUAGE83

METRO DESIGN LANGUAGE84 Visual design

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

METRO DESIGN LANGUAGE86

what metro is good for

METRO DESIGN LANGUAGE88

fluent UImetro 89 inputoutput input output

METRO DESIGN LANGUAGE90 recap

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

METRO DESIGN LANGUAGE92 shane RESOURCES design.windows.com

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