implementing windows 8 design principles

Implementing Windows 8 Design PrinciplesBrent Edwards

Associate Principal ConsultantBrentE@magenic.com@brentledwardsbrentedwards.nethttps://github.com/brentedwards

Get Startedhttp://aka.ms/Dev8

http://aka.ms/UXGuidelines

Launch your Windows 8 App in 30 days

Generation App Online training and tips from insiders Tele-support with a Windows 8

architect Exclusive one-on-one WinRT and

Windows UX design consultation

Sign up at http://aka.ms/30Days

Build your app: Generation App

Learn.Build.Publish.

Local Events

• Twin Cities Windows 8 User Group – 4th Tuesday of Month– http://windows8ug.com/

• Windows 8 JavaScript and HTML Camp – Oct 4th

– http://aka.ms/Win8JavaScript• Windows 8 Developer Camp – Oct 9th

– http://aka.ms/Win8Camp• Windows 8 Hackathon – Oct 10th

– http://aka.ms/Win8Hackathon

Level Set

• Designer?• Developer?• Aren’t Designer but play one at work?

Windows 8 Design PrinciplesWhat are they?

Windows 8 Design Principles

• Do more with less– Content before chrome

• Pride in craftsmanship– Styling, layout, typography – The details matter

• Be fast and fluid– Design for touch with motion and ergonomics in mind

• Authentically digital– Remember that user is interacting with computerized device

• Win as one– Use contracts to work with other apps

That’s awful designer-likeWhat about us developer types?

Approach Your UI Differently

• Design for Touch• Put Content Before Chrome

– Full Screen Content• Leverage Adaptive Layout• Be Authentically Digital

– Don’t try to mimic the real world

Design for Touch

Windows 8 Touch Language

• Design your app to be touch first

Source: http://msdn.microsoft.com/en-us/library/windows/apps/hh464920.aspx

How Does Touch Change Things?

• Targets must be bigger

• 40 x 40px – Recommended minimum size– IF a wrong touch can be fixed in 1-2 gestures or within 5 seconds

• 50 x 50px – Recommended for actions with severe consequences– Close, Delete– Requires 2 gestures, 5 seconds, or major context change to correct

Source: http://msdn.microsoft.com/en-us/library/windows/apps/hh465415.aspx

What Doesn’t Work With Touch?

• Listbox and ComboBox– Don’t have a good form factor for touch UI– Still available, but their use is discouraged

Content Before Chrome

Content Before Chrome

Source: http://msdn.microsoft.com/en-us/library/windows/apps/hh868264.aspx

Content Before Chrome

• What is Chrome?– Chrome is anything that isn’t CONTENT– Chrome is clutter

• Drop the clutter– Focus on what is important– Let the rest fade away

• Example:– Commands don’t have to take up screen real estate

• Get rid of menu bars• Swipe from edge for system commands• Swipe from bottom for your app commands in AppBar

Adaptive Layout

Adaptive Layout

• What is Adaptive Layout?– A layout that adapts to the available screen real estate

Source: http://blogs.msdn.com/b/b8/archive/2012/03/21/scaling-to-different-screens.aspx

Adaptive Layout[Demo]

Adaptive Layout

• Snap View• GridView• ListView

Snap View

Source: http://blogs.msdn.com/b/b8/archive/2012/03/21/scaling-to-different-screens.aspx

Snap View

• 320px Fixed Width• Matches Height of Screen• Allows for multitasking

GridView

• First thing you see with Start Screen• Primary way to display data• Scrolls Horizontally• Uses Rows and Columns• Can display grouped content

– Using CollectionViewSource

GridView[Demo]

ListView

• Exactly the same as GridView EXCEPT:– Scrolls Vertically– Uses Rows

• Works great for Snap View

ListView[Demo]

Authentically DigitalDon’t try to mimic the real world

Semantic Zoom

• Lets user quickly navigate large amounts of data with touch gestures

• 2 Levels– Zoomed Out

• The Forest– Zoomed In

• The Trees

Semantic Zoom[Demo]

FlipView

• ItemsControl to view a single item at a time from a collection• Navigate between items with swipe gesture• Good for a small number of items

FlipView[Demo]

AppBarMore Content Before Chrome

AppBar

• Menu Bars are clutter– Not CONTENT– Commands aren’t needed constantly

• Only show when needed– Swipe from edge for system commands– Swipe from bottom for your app commands in AppBar

AppBar[Demo]

Recap

• Design for Touch• Utilize Content Before Chrome

– Full Screen Content• Leverage Adaptive Layout• Be Authentically Digital

– Don’t try to mimic the real world

• Developers can make good looking apps too

Questions?

Brent EdwardsAssociate Principal Consultant with Magenic

BrentE@magenic.com@brentledwardsbrentedwards.nethttps://github.com/brentedwards