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 [email protected]
Download this presentation at:www.pixelsmashing.com/resources/designing4win8_v1.pptx