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/

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• Use Contracts to interact with other apps

– Share– Search

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

• Use Adaptive Layout– Snap View

• Implement Adaptive Layout– 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– Allows for consistency in design

• Matches Height of Screen• Allows for multitasking

• We’ll see Snap View in action in a bit…

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 / Snap View[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]

Contracts

Contracts

• What are they?– Agreement between one or more apps

• Contracts provide consistency across all apps

• Contracts have two sides– Source– Target

Examples of Contracts

• Share• Search• Settings• Play To• File Picker• Cached File Updater

Contracts - Share

• Share content from your app

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

Share Contract[Demo]

Contracts - Search

• Search your app from anywhere in the OS

• Minimum Requirements– Declare Search contract in app manifest– Create search results page– Respond to search query while app is active– Respond to search query while app is not active

Search Contract[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• Use Contracts to interact with other apps

• Developers can make good looking apps too

Questions?

Brent EdwardsAssociate Principal Consultant with Magenic

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