mcgill university - 2012-05-10 - designing a metro style app
DESCRIPTION
TRANSCRIPT
Designing a Metro Style AppFrédéric HarperTechnical Evangelist @ Microsoft Canada
@fharper | outofcomfortzone.net
8 Traits of a Metro-Styled App
1. Metro style design2. Fast and fluid3. Snap and scale beautifully4. Use the right contracts5. Invest in a great Tile6. Feel connected & alive7. Roam to the cloud8. Embrace Metro principles
Metro Style Design
Content Before Chrome
Content Before Chrome
Content comes first. Immerse users in the things they loveLeave only the most relevant elements on screen to minimize distractions
Traditionally chrome is added for:1. Layout2. Interactions3. Navigation
Layout
Layout
Give content breathing room
Intentional space frames the content and allows your eyes to focus on the right thingRemove lines and boxes as a way to group and organize content
Layout Use Typography to create a sense of structure and hierarchy in your contentFixed set of sizes, weights and colors convey information on a piece of content’s importanceUse the default stylesheet to get the styling in a pre-defined type ramp
42pt20pt
11pt
9pt
Layout
Let content flow from edge to edgePan only on a single axis to create a sense of stability and to support the selection model (more on that later)Keep ergonomics in mindPan along the long edge of the viewHorizontal in landscape and portraitVertical in snapped
Layout Create visual alignment, structure, and clarity with the Metro-styled silhouetteAlign elements on a grid to create a structured and consistent layoutEstablish consistent anchorsUse a stable railCreate a focal point
Use the Visual Studio template to get the layout
Interactions
Interaction
Integrate commands into the contentLeverage the edgeProvide commands contextually
ClearanceSale
Gifts forKids
Holiday Shopping
Home & Garden
Everything For Winter
ClearanceSale
Gifts forKids
Holiday Shopping
Home & Garden
Everything For Winter
Interaction
Integrate commands into the contentLeverage the edgeProvide commands contextually
Using the EdgeApp bar
http://msdn.microsoft.com/en-us/library/windows/apps/hh465302(v=VS.85).aspx
Use App bar to bring up commands on demand through a swipe from the top or bottom edgeUse the Charms as entry points into Search, Share, Settings, and Devices contracts
Interaction
Integrate commands into the contentLeverage the edgeProvide commands contextually
App BarMost apps will use a transient app barBottom app bar is for commandingGlobal commands on right, contextual commands on leftCan be programmatically invoked when an item is selected for contextual commands (Ex: Demo Start)If there is a single, frequently used command, it can be placed on canvasMenu Flyout can be used to show groups of related commands (Ex: Demo PaintPlay)Top app bar is for navigation in immersive views (Ex: Back button & title)
Flyout
http://msdn.microsoft.com/en-us/library/windows/apps/hh465341(v=VS.85).aspx
Collecting information Confirmations or warnings
Use Flyout as a lightweight way of showing transient, contextual UI
Errors
Show errors inline when possible
Navigation
Navigating ContentViews are about where you are, not where you might goUse Hub & Spokes model for information hierarchy:Hub: Usually landing page containing top level sections, drill down into spokesSpoke: Shows content for one of the sections, drill down to see the details an item
Avoid persistent navigational chrome such as tabsLeverage Semantic zoom to jump between groups
within a list within flattened hierarchy
Contoso Travel Featured destinations Last minute deals My Trips
Hu
bSpoke
sD
eta
ilsContoso Travel Featured destinations Last minute deals
7 night Alaska Cruise
Last Minute Deals
Featured destinations Barcelona, Spain
Last Minute Deals 7 Night Alaska Cruise
Ocean View Cabins
Upgrade from an inside cabin and save $43/night/person!Picture windows with ocean and port viewsFrom $2,099 — only $150/night/person based on double occupancy
Suites
Upgrade from an inside cabin and save $43/night/person!Picture windows with ocean and port viewFrom $2,099 — only $150/night/person do
My Trips Weather
7 days
Chicago (3/11 – 3/19)Today54/43 Mostly Sunny
Today54/43 Mostly Sunny
Today54/43 Mostly Sunny
Today54/43 Mostly Sunny
Today54/43 Mostly Sunny
Attractions
My Trips
Featured Destinations Top Destinations for 2012
Barcelona, Spain
My Trips City Guide City Guide
Hu
bSpoke
sD
eta
ilsContoso Travel Featured destinations Last minute deals My Trips
7 night Alaska Cruise
Last Minute Deals
Featured destinations Barcelona, Spain
Last Minute Deals 7 Night Alaska Cruise
Ocean View Cabins
Upgrade from an inside cabin and save $43/night/person!Picture windows with ocean and port viewsFrom $2,099 — only $150/night/person based on double occupancy
Suites
Upgrade from an inside cabin and save $43/night/person!Picture windows with ocean and port viewFrom $2,099 — only $150/night/person do
My Trips Weather
7 daysChicago (3/11 – 3/19)
Today54/43 Mostly Sunny
Today54/43 Mostly Sunny
Today54/43 Mostly Sunny
Today54/43 Mostly Sunny
Today54/43 Mostly Sunny
Attractions
My Trips
Featured Destinations
Top Destinations for 2012
Barcelona, Spain
Semantic Zoom
http://msdn.microsoft.com/en-us/library/windows/apps/hh465319(v=VS.85).aspx
Design zoomed-out view to show richer, meta information on your groupsTry to fit content within 1-3 pages Linear layout, use a grid for large content sets
You can enable operations on groups in the zoomed out view (select or rearrange)Ex: News app: Select a news source and pin to Start or rearrange news source order
When transitioning zooming in & out, the scope of content should stay the sameSemantic zoom is not for navigating different levels of a hierarchy
DemoSemantic Zoom
Fast and Fluid
Purposeful Animations
See BUILD talk APP-206T or APP-494T on Animations for more examples
Animations bring life to the Metro style apps and make the experience feel crafted and polishedAnimations used purposefully create a sense of continuity and help build users’ confidence in the UIUse built-in controls to get the animations for free!Use the Animation Library to get pre-designed, scenario-based animationAnimation is purposeful, not for visual adornment
Animations demo
Design for touch first
Press and hold to learn
Tap for primary action Slide to pan Swipe to select
Turn to rotateSwipe from edge for app commandsPinch to zoom
Swipe from edge for system commands
Follow the Windows 8 touch language and use only the prescribed gesture set
Design for Touch FirstProvide instant visual feedback on touch down, commit on touch upActions should be reversible so users can safely exploreThink beyond tap and take advantage of sliding interactions. Content should always directly follow your fingersPan in 1 axis only. This allows for selection and provide a more stable rail
Design for Touch FirstDesign with hands and fingers in mindHit targets should be sized and spaced for touch, your finger is not a pointerDesign with comfort, ergonomics and occlusion in mind
Snap and Scale Beautifully
Design for Multiple Views
Widescreen (1366x768+) Snap view (required)Minimum (1024x768)
Portrait
People multi-task. An application can be displayed any one of these layouts:
Scaling
Watch BUILD talk APP-207T/847T Reach your customers’ devices with one beautiful HTML5/XAML user interface
PCs will have a wide range of screen sizes and resolution
Use fluid layout (e.g. -ms-grid control, ListView control) to take advantage of screen real estateScale to fit (e.g. viewbox control) for fixed layoutsUse the VS simulator to see how your app will look on different machinesSystem-provides automatic scaling based on resolutionUse scalable vector graphics, or Provide 3 sizes of assets (100%, 140%, 180%) and use resource loading for bitmap format images
Screen sizes
10” 1024x76813” 1400x105020” 1920x108030” 2560x160011.6” 1366x768
SnapSnapping is a built-in Windows 8 scenarioBuilding a great snapped view keeps your app on screenDesign a purposeful snapped statePan vertically in snapped for ergonomics and to avoid conflict with the edge and snap gutterMaintain state and continuity across snapping and unsnappingIt is trivially easy to snap and unsnap. Don’t blow away the user’s work when this happens
demoSnapped
Use the Right Contracts
Windows 8 Contracts
http://msdn.microsoft.com/en-us/library/windows/apps/hh464906(v=VS.85).aspx
1+1=3. Leverage other apps to complete scenariosCharms provide a consistent invocation model that users can always confidently rely onStart with the VS Item Template (available for Search, Share, File Picker extension)
Share
http://msdn.microsoft.com/en-us/library/windows/apps/hh465251(v=VS.85).aspx
Share Source Share a link to online contentShare a copy of the actual content
Share Target Keep interactions simple Use inline controls for errors or progress
Lorem IpsumLorem Ipsum dolor sit amet
Search
http://msdn.microsoft.com/en-us/library/windows/apps/hh465233(v=VS.85).aspx
Leverage search so users can search your content from anywhere in WindowsSearch vs FindSearch (use the contract)
Scope is across your app’s content setResult is usually a list of items containing the search term. From the search results page, you can then navigate to the view the item
Find (use in-app UI)Scope is within the current view (ex: Ctrl+F in IE or Word)Result is usually already on the page you are viewing. You just need help locating it
File Picker ExtensionLeverage the File Picker extension so users can access your content from anywhereYour app will be hosted within the File PickerSystem provides navigation and selection UIYou have control over the presentation of the content (use a ListView and style appropriately)
Start with the File Picker item template to get the ListView, Selection, Viewstate support for free
http://msdn.microsoft.com/en-us/library/windows/apps/hh465192(v=VS.85).aspx
System provided navigation
System provided selection basket
SettingsPlace all app settings under one roof where users will always expect to find them
Do not create additional entry points into Settings on the app canvas
When users invoke Settings charm, they will see your app’s basic info, and settings commands as specified by your app
Common settings commands: your settings categories, Help, About, Terms of use…
Once users choose a settings command, the settings pane will be brought up. Your app controls the UI within the settings pane
Keep it simple, minimize the number of settings
Account
Invest in a Great Tile
TilesTiles are the “front door” to your app.Treat it as an extension of your appSecondary tiles let users promote interesting content from within your app on their Start screenProvide a way to “deep link” to interesting, frequently updated sub-sections of your appAlbums in a photo app, People in a social app, News source from a feed app, etcProvide Pin command in the app bar when content in focus is pinnableUse runtime call to invoke system UI for pinning flyout. Ex: Weather
Connected and Alive
Live TileLive tiles to draw users to your appProvide fresh, personalized content to help users feel connected to your content, motivate launchUse badges to show simple numeric or glyph informationLive updates should be accessible from the home screen of your app
You can opt in to cycle through last 5 updates:Good example – A news app wants to send five stories per day or one story and supplementary images per dayBad example – A shopping app sends a new notification per day for daily deals (last 4 days’ will still cycle but be outdated)
Both default & content tiles, small & large, support live. Watch BUILD talk APP-396T
Notifications
NotificationsToast notifications deliver transient messages outside the context of the appShow toast when your app is in the backgroundUse it for real-time, personal content such as IM, Call, or MailProvides quick navigation to contextually relevant location in your appUse this only for information that must be interruptive Raise notifications only if they are truly time sensitive and relevant, or users will turn off your appCoalesce notifications if there are multiple updates occurring within a short period of timeDo not use notification to raise error or warnings.Use where neededLive tile is the place where users will want to see fresh content at their leisure
Roam to the Cloud
Roam
http://msdn.microsoft.com/en-us/library/windows/apps/hh465094(v=VS.85).aspx
Leverage roaming to maintain state and preferences across machines
Roam preferences that users are likely to set on each device anyway:Favorite sports team (sports app)Favorite movie genre (media app)
Let users continue a task across devices by roaming app data:Composing a to-do listComposing emailRoaming is best for user preferences, links, and small data files
Embrace Metro Principles
Metro Style Design PrinciplesPride in craftsmanshipSweat the details. Pixels matter
Do more with lessContent before chrome
Be fast and fluidPurposeful motions and direct interactions
Authentically digitalGo beyond real world metaphors and material
Win as oneLeverage the ecosystem
Recap
8 Traits of a Metro-Styled App
1. Metro style design2. Fast and fluid3. Snap and scale beautifully4. Use the right contracts5. Invest in a great Tile6. Feel connected & alive7. Roam to the cloud8. Embrace Metro principles
Resources
Design resourceshttp://design.windows.com
Touch, Navigation, Commanding design patterns
Detailed UX guidelines
Photoshop templates
And more to come…
Questions
Frédéric Harper
Technical Evangelist @ [email protected]@fharper
http://webnotwar.cahttp://outofcomfortzone.net