designing metro style apps for windows 8 a walkthrough some ui / ux best practices lanny geffen,...
TRANSCRIPT
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 system
Hierarchical system:Hub pagesSection pageDetail pages
Flat system
Flat 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 views
Give 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 views
Give 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 placements
Step 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 placements
Step 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 menus
Step 3: menus
command placements
Goals: Predictability Ergonomics Aesthetics
command placements
1. Place persistent commands on the right
command placements
2. Use the edges
command placements
3. show/hide disabled commands
command placements
4. Insert selection commands from left
command placements
4. 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 language
Press and hold to learn
Windows 8 touch language
Tap for primary action
Windows 8 touch language
Slide to pan
Windows 8 touch language
Swipe to select and move
Windows 8 touch language
Pinch and stretch to zoom
Windows 8 touch language
Turn to rotate
Windows 8 touch language
Swipe from edge for app commands
Windows 8 touch language
Swipe from edge for system commands
Touch considerations
Touch considerations
Interaction Reading
Target touch size guidelines
Recommended 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