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 pages Section page Detail 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

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

InteractionReading

Target touch size guidelines Recommended size: 40px Accuracy counts: 50px It just won’t fit: 30px

Live tiles Notification FlipView Text boxes Spell checking Thumbnails Flyouts Message dialogs Context menus Tooltips Buttons TimePickers DatePickers Check boxes Radio buttons Select control Sliders Toggle switches Rating controls Progress 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

Resources Design assets: Windows 8 Dev Center: Build 2011: channel9.msdn.com/Events/BUILD/BUILD2011

Attribution This 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: MSDN Windows 8 developer center, “User experience (UX) design patterns for Metro style apps”:

Thank Download this presentation at: