design and layout for windows 8 and windows phone style apps shane morris (@shanemo) automatic...

Design and Layout for Windows 8 and Windows Phone Style AppsShane Morris (@shanemo)Automatic Studio

DEV221

a bit about me

3

a bit about me

METRO DESIGN LANGUAGE

YESTERDAY

design language principlesPRIDE IN CRAFTSMANSHIPBE FAST AND FLUIDAUTHENTICALLY DIGITALDO MORE WITH LESSWIN AS ONE

Inspiration and influences

BauhausInternational StyleMotion designWayfinding signage

visual design

Flat colourTypographyWhitespacePanoramic view

interaction design

Lack of controlsAnimationLive tilesEdge swipes Panoramic views

information design

Live tilesSemantic zoom Panoramic views

characteristics

the secretLOOKS EASY, EH?BUT YOUR MISTAKES ARE EVEN MORE OBVIOUSLESS VISUAL DEVICES TO

Direct attentionCommunicate groupingDelightBrand

more than just a visual style

Visual languageInteraction style and structureNavigation style and structureAttitude

like all good design, designing for Windows 8 or Windows Phone does not start with visuals

planning windows 8 apps

Decide what your user experience goals areDecide what activities, or flows, you want to enable for your usersDecide what app features and Windows features you can use to enable your flowsDecide how to monetize your appPlan the layout of your appMake a good first impressionPrototype and validate your design against guidelines, user impressions, and requirements

planning windows 8 apps

Decide what your user experience goals areDecide what activities, or flows, you want to enable for your usersDecide what app features and Windows features you can use to enable your flowsDecide how to monetize your appPlan the layout of your appMake a good first impressionPrototype and validate your design against guidelines, user impressions, and requirements

4 layers of design

Conceptual

Visual

yesterday

today

Rules and guidelines

design.windows.com

4 layers of design

Conceptual

Visual

Information designNavigationDesign to reveal structure

METRO DESIGN LANGUAGE

NAVIGATIONInformation design

flatter, wider navigation

Fewer orientation cues

(Breadcrumbs)Leverage Hub / Panorama

Spatial memorySearch plus Browse

Be true to platform

NAVIGATION MODELS

content before chromeIN GENERAL, USE CONTENT FOR NAVIGATIONOtherwise use App barExceptions: Back button Context menus in page header

USE PANORAMA RATHER THAN NAVIGATION MENUSematic zoom to provide an overview

NAVIGATION

METRO DESIGN LANGUAGE

18

WINDOWS PHONENAVIGATION MODELS

navigation structureAPPLICATION STRUCTURE AND NAVIGATION MODELS FOR WINDOWS PHONEhttp://msdn.microsoft.com/en-us/library/hh202909(v=vs.92).aspx>

WINDOWS PHONE

typical navigation structure

Panorama Pivot

Page

WINDOWS PHONE

WINDOWS 8NAVIGATION MODELS

navigation structureHIERARCHICAL FLAT

METRO DESIGN LANGUAGE

23

WINDOWS 8

hierarchical navigationFLATTER, WIDER NAVIGATION

Hub page

Section page

Detail page

exampleHIERARCHICAL NAVIGATION

flat navigationFLATTER, WIDER NAVIGATION

Back ButtonWINDOWS 8Top left cornerKey to hierarchical navigation But other navigation is possible

WINDOWS PHONEHardware buttonNo 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 menuALLOWS HORIZONTAL NAVIGATION TO PEER TOPICS

METRO DESIGN LANGUAGE

28

NAVIGATION MODELS

SBS

METRO DESIGN LANGUAGE

DESIGN TO REVEAL STRUCTURE

Information design

INFORMATION IS BEAUTIFUL“a neutral and objective approach that emphasized rational planning and de-emphasized the subjective, or individual, expression”Britannicawww.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/

METRO DESIGN LANGUAGE

EXAMPLE OF AN APP

4 layers of design

Conceptual

Visual

Interaction designContent before chromeConsistency

GesturesControlsApp Bar

Design for touch

METRO DESIGN LANGUAGE

CONTENT BEFORE CHROMEInteraction design

Direct manipulation

Content before chrome means the content must be the user interfaceManipulate with gestures

content before chromeLET THE CONTENT BE THE INTERFACE

Be trustworthyMOVE COMMANDS TO THE APP BAR

METRO DESIGN LANGUAGE

CONSISTENCYInteraction design

Consistency for predictability

standard gesturesstandard interaction models

App barCharms bar

standard controls

Standard gestures

Press and hold to learn

Swipe to selectSlide to dragTap for primary action

Pinch to zoom Rotate to rotateSwipe from edge forapp and system UI

Standard interaction models

App bar

Buttons belong in App bar

Charms bar

Certain interactions belong here

SearchShareSettings

HelpSign in / outContactAbout / terms / privacy

app barCOMMANDS 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 barSOME COMMANDS DON’T GO IN THE APP BARCommands that are required for a user to complete their task may be placed on the main screen.Cut, copy and paste go in context menusConsider other context menus Particularly for items that are not necessary for the ‘core’ experience

METRO DESIGN LANGUAGE

46

WINDOWS 8

app barBUSY APP BARSApp 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 buttonsNote that your app bar may appear on two lines in portrait view

WINDOWS 8

app barAN APP BAR CAN ALSO APPEAR SIMULTANEOUSLY FROM THE TOP OF THE SCREENThe app bar at the bottom must follow layout rulesThe app bar at the top can have any appropriate layout.

METRO DESIGN LANGUAGE

48

WINDOWS 8

Controls

METRO DESIGN LANGUAGE

DESIGN FOR TOUCHInteraction design

design for touch

be fast and fluid

4 layers of design

Conceptual

Visual

Visual designSilhouettesTemplatesTypographyVisual HierarchyAnimation

METRO DESIGN LANGUAGE

SILHOUETTESVisual design

METRO DESIGN LANGUAGE

TEMPLATESVisual design

METRO DESIGN LANGUAGE

TYPOGRAPHYVisual design

text vs icons

A picture can say a thousand words

… but notice we don’t talk in pictures?

Icons are usefulcompactrecognisablescannable

But even most icons are learnt through their labels

76

fonts

WINDOWS 8Segoe UI

Controls and UI elementsReserve Segoe UI Light for >20pts

Calibriread/write

Cambriareading

http://msdn.microsoft.com/en-us/library/windows/apps/hh700394.aspx

WINDOWS PHONESegoe WPSegoe WP Light only for large text

TYPOGRAPHY

type sizes (windows 8)

METRO DESIGN LANGUAGE

VISUAL HIERARCHYVisual design

visual hierarchy

Sparse visual style compresses options for creating a visual hierarchymain devices

alignment typographywhite space

visual hierarchy

size

colour

CASE

alignment alignmentweight

proximitycolour

proximity

METRO DESIGN LANGUAGE

ANIMATIONVisual design

animation

MOTION DELIGHTS THE USERMOTION ADDS HINTS TOWARDS INTERACTIONMOTION MASKS SLOW PERFORMANCEMOTION ADDS PERSONALITYMOTION ADDS CONSISTENCYMOTION ADDS ELEGANCE.

msdn.microsoft.com/en-us/library/hh202871(v=vs.92).aspx

USE MOTION TO DELIGHT THE USERREMEMBER THAT PACING IS IMPORTANT: THE MORE YOU USE IT, THE LESS SPECIAL IT BECOMESRESPECT STANDARD ANIMATIONS

METRO DESIGN LANGUAGE

RECAP

what metro is good for

METRO DESIGN LANGUAGE

UX CHECKLISTrecap

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 LANGUAGE

THANK YOU

shane morrisshane@automaticstudio.com.au@shanemo

RESOURCESdesign.windows.com

Related Content

Breakout SessionsDEV221 - Design and Layout for Windows 8 and Windows Phone Style Apps. Thursday 8:15am Meetings Rooms 5 & 6Other Windows 8• DEV212 - What’s New for Windows 8 Developers Parts 1-3Other 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

© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the

part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.