Designing metro style apps for Windows 8 A walkthrough some UI / UX best practices

Lanny Geffen, Creative Director, Digiflare

Who am I ?

Agenda: Metro style background & design

principles Layout and typography Navigation design Filters, pivots, sorts, and views Command design Touch design

Metro background & design principles

Three key influences Modern design – Bauhaus

International typographic style – Swiss design

Motion design – Cinematography

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

Three key influences Modern design – Bauhaus

International typographic style – Swiss design

Motion design – Cinematography

Three key influences Modern design – Reduce to the essence

International typographic style – Clear, honest, and beautiful

Motion design – Bring it to life

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

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

Layout & typography

Navigation design

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

Hierarchical systemHierarchical system:Hub pagesSection pageDetail pages

Flat systemFlat system: Games Browsers Document Creation

Hub page and content sections

Semantic zoom

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

Header menu

Filters, pivots, sorts and views

Filters, pivots, sorts and viewsGive 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)

Filters, pivots, sorts and viewsGive 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)

Command design

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)

command placementsStep 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?

command placementsStep 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?

further simplify with menusStep 3: menus

command placementsGoals: Predictability Ergonomics Aesthetics

command placements1. Place persistent commands on the right

command placements2. Use the edges

command placements3. show/hide disabled commands

command placements4. Insert selection commands from left

command placements4. Consider dependent command scenarios

consistent placement: new and delete

Design for touch

Use the Windows 8 touch language

1. Use fingers for what they’re good at

2. Browse content with touch

3. Provide visual feedback

4. Content follows finger… or not

5. Keep interactions reversible

6. Allow for any number of fingers

7. Try to keep interactions untimed

Windows 8 touch languagePress and hold to learn

Windows 8 touch languageTap for primary action

Windows 8 touch languageSlide to pan

Windows 8 touch languageSwipe to select and move

Windows 8 touch languagePinch and stretch to zoom

Windows 8 touch languageTurn to rotate

Windows 8 touch languageSwipe from edge for app commands

Windows 8 touch languageSwipe from edge for system commands

Touch considerations

Touch considerationsInteraction Reading

Target touch size guidelinesRecommended size: 40px

Accuracy counts: 50px

It just won’t fit: 30px

Live tilesNotificationFlipViewText boxesSpell checkingThumbnailsFlyoutsMessage dialogsContext menusTooltips

ButtonsTimePickersDatePickersCheck boxesRadio buttonsSelect controlSlidersToggle switchesRating controlsProgress controls

so much more…

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

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

ResourcesDesign 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

AttributionThis 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

Thank you @lgeffen lanny.geffen@digiflare.com

Download this presentation at:www.pixelsmashing.com/resources/designing4win8_v1.pptx