designing a windows store app

Designing a Windows Store App

Dave IsbitskiTechnology Evangelist, Windows 8twitter.com/TheDaveDevblogs.msdn.com/[email protected]

Now is the time to write your game. Enjoy the first to market advantage!

twitter.com/thedavedev | [email protected]

http://bit.ly/genapp8

8 Traits of a great App

1. Microsoft style design2. Fast and fluid3. Snap and scale beautifully4. Use the right contracts5. Invest in a great Tile6. Feel connected & alive7. Roam to the cloud8. Embrace Microsoft design principles

Microsoft Design Style

Content Before Chrome

Content Before Chrome

Content comes first. Immerse users in the things they loveLeave only the most relevant elements on screen to minimize distractions

Traditionally chrome is added for:1. Layout2. Interactions3. Navigation

Layout

Layout

Give content breathing room

Intentional space frames the content and allows your eyes to focus on the right thingRemove lines and boxes as a way to group and organize content

1:09

O Green World Gorillaz Demon days

Layout Use Typography to create a sense of structure and hierarchy in your contentFixed set of sizes, weights and colors convey information on a piece of content’s importanceUse the default stylesheet to get the styling in a pre-defined type ramp

42pt20pt

11pt

9pt

42pt

20pt

11pt

11pt

11pt

9pt

Layout

Let content flow from edge to edgePan only on a single axis to create a sense of stability and to support the selection model (more on that later)Keep ergonomics in mindPan along the long edge of the viewHorizontal in landscape and portraitVertical in snapped

Layout Create visual alignment, structure, and clarity with the apps’ silhouetteAlign elements on a grid to create a structured and consistent layoutEstablish consistent anchorsUse a stable railCreate a focal point

Use the Visual Studio template to get the layout

Silhouette

Microsoft design style

In the absence of chrome when people are focusing on the content,

the formation of the content is what lets people recognize

something as Microsoft design style before their eyes even

process it. Creating a silhouette is about leveraging negative space

and content placement to establish a recognizable form.

Page titleBaseline at 100px

Content areaTop aligned at 140px

Content areaLeft margin 120px

Establish common anchorsIdentify commonalities between different pages, and present those elements in a consistent manner.

Use a stable railWhen content goes off screen, let it move from edge to edge along a single axis. Let off screen objects peek in and use negative space to create a visual rail.

Create a focal pointSelect a hero for your content, and add visual volume to it to make it the first thing that catches people's eyes.

Silhouette




something as Microsoft design style before their eyes even process

it. Creating a silhouette is about leveraging negative space and

content placement to establish a recognizable form.




Silhouette




something as Microsoft design before their eyes even process it.

Creating a silhouette is about leveraging negative space and





SilhouetteIn the absence of chrome when people are focusing on the content,


something as Microsoft design before their eyes even process it.

Creating a silhouette is about leveraging negative space and






SilhouetteIn the absence of chrome when people are focusing on the content, the formation of the

content is what lets people recognize something as Microsoft design before their eyes even

process it. Creating a silhouette is about leveraging negative space and content placement

to establish a recognizable form.





Interactions

Interaction

Integrate commands into the contentLeverage the edgeProvide commands contextually

ClearanceSale

Gifts forKids

Holiday Shopping

Home & Garden

Everything For Winter

Interaction


Using the EdgeApp bar

http://msdn.microsoft.com/en-us/library/windows/apps/hh465302(v=VS.85).aspx

Use App bar to bring up commands on demand through a swipe from the top or bottom edgeUse the Charms as entry points into Search, Share, Settings, and Devices contracts

Interaction


Product name

Product name

Product name

Product name

Product name

Product name

Product name

Product name

Product name

Product name

App BarMost apps will use a transient app barBottom app bar is for commandingGlobal commands on right, contextual commands on leftCan be programmatically invoked when an item is selected for contextual commands (Ex: Demo Start)If there is a single, frequently used command, it can be placed on canvasMenu Flyout can be used to show groups of related commands (Ex: Demo PaintPlay)Top app bar is for navigation in immersive views (Ex: Back button & title)

Flyout


Collecting information Confirmations or warnings

Use Flyout as a lightweight way of showing transient, contextual UI

Errors

Show errors inline when possible

Navigation

Navigation

Views should be about where you are at, not where you might go

Integrate navigational elements into the content

Avoid persistent way finding chrome (such as tabs)

FeaturedLast minute deals My Trips

Contoso Travel

Chrome

Featured destinations Last minute deals My TripsContoso Travel Chrome

Navigation patterns

Hierarchical Flat

1. Content area2. Sections3. Header4. Back button5. Header menu6. Semantic zoom

Components of the hierarchical pattern

Hierarchical navigation pattern

Hub pageLarge collections of content to explore

Multiple sections or categories

Best for apps with:

Start

Store

News

Examples of this pattern:

Section page

Detail page

Contoso Travel Featured destinations Last minute deals My Trips

Contoso Travel Featured destinations Last minute deals My Trips Featured destinations Last minute deals My Trips

Hu

bContoso Travel Featured destinations Last minute deals

Spoke

sD

eta

ils

7 night Alaska Cruise

Last Minute Deals

Featured destinations Barcelona, Spain

Last Minute Deals 7 Night Alaska Cruise

Ocean View Cabins

Upgrade from an inside cabin and save $43/night/person!Picture windows with ocean and port viewsFrom $2,099 — only $150/night/person based on double occupancy

Suites

Upgrade from an inside cabin and save $43/night/person!Picture windows with ocean and port viewFrom $2,099 — only $150/night/person do

My Trips Weather

7 daysChicago (3/11 – 3/19)

Today54/43 Mostly Sunny





Attractions

My Trips

Featured Destinations Top Destinations for 2012

Barcelona, Spain

My Trips City Guide

Hu

bContoso Travel Featured destinations Last minute deals My Trips

Spoke

sD

eta

ils


Last Minute Deals



Ocean View Cabins


Suites


My Trips Weather







Attractions

My Trips


Barcelona, Spain

Internet Explorer

DemoFlat pattern

Components of the flat pattern

1. Content area2. Navigation bar3. Sections4. Add button5. Delete button

Flat navigation pattern

Page 1 Multiple tabs, documents, instant messages, game sessions, etc.

Relatively few sections

Best for apps with:

Internet Explorer

Examples of this pattern:Page 2

Navigation pattern summary

For apps with large collections, many distinct categories, or sections for a user to explore

Use direct manipulation, the back button, header flyout for navigating between sections

Use semantic zoom to move quickly through big lists

Hierarchical Pattern

For apps with multiple tabs, documents, instant message, to switch between efficiently

The navigation bar is available on every page to enable fast switching

All navigation elements should fit in the navigation bar

Flat Pattern

Navigating ContentViews are about where you are, not where you might goUse Hub & Spokes model for information hierarchy:Hub: Usually landing page containing top level sections, drill down into spokesSpoke: Shows content for one of the sections, drill down to see the details an item

Avoid persistent navigational chrome such as tabsLeverage Semantic zoom to jump between groups

within a list within flattened hierarchy

Hu

bSpoke

sD

eta

ilsContoso Travel Featured destinations Last minute deals


Last Minute Deals



Ocean View Cabins


Suites


My Trips Weather

7 days

Chicago (3/11 – 3/19)Today54/43 Mostly Sunny





Attractions

My Trips


Barcelona, Spain

My Trips City Guide City Guide

Hu

bSpoke

sD

eta

ilsContoso Travel Featured destinations Last minute deals My Trips


Last Minute Deals



Ocean View Cabins


Suites


My Trips Weather







Attractions

My Trips

Featured Destinations

Top Destinations for 2012

Barcelona, Spain

DemoSemantic Zoom

Semantic Zoom


Design zoomed-out view to show richer, meta information on your groupsTry to fit content within 1-3 pages Linear layout, use a grid for large content sets

You can enable operations on groups in the zoomed out view (select or rearrange)Ex: News app: Select a news source and pin to Start or rearrange news source order

When transitioning zooming in & out, the scope of content should stay the sameSemantic zoom is not for navigating different levels of a hierarchy

Fast and Fluid

Continuity through motionMotion brings life to the Microsoft design languagePurposeful animations tie experiences together and tell a storyUse the Animation Library to get scenario-based animations

Purposeful Animations

See BUILD talk APP-206T or APP-494T on Animations for more examples

Animations bring life to the Windows Store apps

and make the experience feel crafted and polishedAnimations used purposefully create a sense of continuity and help build users’ confidence in the UIUse built-in controls to get the animations for free!Use the Animation Library to get pre-designed, scenario-based animationAnimation is purposeful, not for visual adornment

Animation LibraryApp navigationEnter Page / Exit Page

Animate ContentEnter Content / Exit ContentExpand / CollapseRepositionCrossfadeFade In / Fade OutPeekUpdate BadgeReveal / Hide

SelectionPointer animationsSwipe Select / Swipe DeselectSwipe Reveal

Show or hide supplemental UIShow Edge UI / Hide Edge UI Show Panel / Hide PanelShow Pop Up / Hide Pop Up

Collections and listsAdd / Delete from listDrag and drop animations

Design for touch first

Press and hold to learn

Tap for primary action Slide to pan Swipe to select

Turn to rotateSwipe from edge for app commandsPinch to zoom

Swipe from edge for system commands

Follow the Windows 8 touch language and use only the prescribed gesture set

Design for Touch FirstDesign with hands and fingers in mindHit targets should be sized and spaced for touch, your finger is not a pointerDesign with comfort, ergonomics and occlusion in mind

Design for Touch FirstProvide instant visual feedback on touch down, commit on touch upActions should be reversible so users can safely exploreThink beyond tap and take advantage of sliding interactions. Content should always directly follow your fingersPan in 1 axis only. This allows for selection and provide a more stable rail

Design for Touch FirstDesign with hands and fingers in mind

Interaction areas Reading areas

Design for Touch FirstProvide instant visual feedback on touch down, commit on touch upDirect manipulation: Let things always directly follow your fingers

Actions should be reversible so users can safely explore

Think beyond tap and take advantage of sliding interactions

Pan in 1 axis only. This allows for selection and provide a more stable rail.

Snap and Scale Beautifully

Design for Multiple Views

Widescreen (1366x768+) Snap view (required)Minimum (1024x768)

Portrait

People multi-task. An application can be displayed any one of these layouts:

SnapSnapping is a built-in Windows 8 scenarioBuilding a great snapped view keeps your app on screenDesign a purposeful snapped statePan vertically in snapped for ergonomics and to avoid conflict with the edge and snap gutterMaintain state and continuity across snapping and unsnappingIt is trivially easy to snap and unsnap. Don’t blow away the user’s work when this happens

SnapAll apps are snap-able

Tailor for snap

Preserve context and state

Strive for feature parity

Keep user in control Don’t forget about the Filled state!

Designing for snapLayout tailored 320px width

LayoutsScroll vertically instead of horizontallyUse a single columnKeep wire frame still intact

CSS media queries are your friend

Snap and the app barThings to know

Buttons have no labels and so 5 buttons can fit per rowIf more than 5 buttons are present, the app bar will grow to multiple rowsThink through the buttons that make sense in snapGroup commands in a way that makes sense in snap

demoSnapped

Scaling

Watch BUILD talk APP-207T/847T Reach your customers’ devices with one beautiful HTML5/XAML user interface

PCs will have a wide range of screen sizes and resolution

Use fluid layout (e.g. -ms-grid control, ListView control) to take advantage of screen real estateScale to fit (e.g. viewbox control) for fixed layoutsUse the VS simulator to see how your app will look on different machinesSystem-provides automatic scaling based on resolutionUse scalable vector graphics, or Provide 3 sizes of assets (100%, 140%, 180%) and use resource loading for bitmap format images

Screen sizes

10” 1024x76813” 1400x105020” 1920x108030” 2560x160011.6” 1366x768

Screen sizesThe minimum app resolution is 1024x768 A good place to start designing your app is 1366x768Apps take advantage of added screen real-estateShow more contentManage white spaceUse the VS simulator to see how your app will look on different machines

11.6” 1366x768

Pixel density

11.6” 1920x1080

As pixel density increases, things get too small to touch.Problem

With scaling, touch targets are maintained and things get crisper on screen

Pixel density scalingWindows scales to pixel density to maintain touchabilityLayouts, text and images are crisper on higher pixel densities

There are three scale percentages

100%

11.6” 1366x768135 dpi

140%

11.6” 1920x1080190 dpi

180%

11.6” 2560x1440253 dpi

Designing for pixel densityLayouts are scaled automatically based on pixel densityEnsure image rendering is crisp

Use CSS primitives or SVG

For bitmaps use resource loadingAutomatically swaps in resources based on pixel density

Designing for pixel densityUse the resource loader and specify width and height:

<img src=”projector.jpg” width=80px height=80px/>

Images are loaded automatically from the naming convention

…\projector.scale-100.jpg \projector.scale-140.jpg \projector.scale-180.jpg

100% 140% 180%

Designing for pixel density

1x 1.4x 1.8x

20px 28px 36px

5px 7px 9px

Use the typographic grid20px/5px grid was designed to scale without rounding

Use the Right Contracts

Windows 8 Contracts


1+1=3. Leverage other apps to complete scenariosCharms provide a consistent invocation model that users can always confidently rely onStart with the VS Item Template (available for Search, Share, File Picker extension)

Share


Share Source Share a link to online contentShare a copy of the actual content

Share Target Keep interactions simple Use inline controls for errors or progress

Lorem IpsumLorem Ipsum dolor sit amet

Search


Leverage search so users can search your content from anywhere in WindowsSearch vs FindSearch (use the contract)

Scope is across your app’s content setResult is usually a list of items containing the search term. From the search results page, you can then navigate to the view the item

Find (use in-app UI)Scope is within the current view (ex: Ctrl+F in IE or Word)Result is usually already on the page you are viewing. You just need help locating it

File Picker ExtensionLeverage the File Picker extension so users can access your content from anywhereYour app will be hosted within the File PickerSystem provides navigation and selection UIYou have control over the presentation of the content (use a ListView and style appropriately)

Start with the File Picker item template to get the ListView, Selection, Viewstate support for free


System provided navigation

System provided selection basket

SettingsPlace all app settings under one roof where users will always expect to find them

Do not create additional entry points into Settings on the app canvas

When users invoke Settings charm, they will see your app’s basic info, and settings commands as specified by your app

Common settings commands: your settings categories, Help, About, Terms of use…

Once users choose a settings command, the settings pane will be brought up. Your app controls the UI within the settings pane

Keep it simple, minimize the number of settings

Account

Invest in a Great Tile

TilesTiles are the “front door” to your app.Treat it as an extension of your appSecondary tiles let users promote interesting content from within your app on their Start screenProvide a way to “deep link” to interesting, frequently updated sub-sections of your appAlbums in a photo app, People in a social app, News source from a feed app, etcProvide Pin command in the app bar when content in focus is pinnableUse runtime call to invoke system UI for pinning flyout. Ex: Weather

Connected and Alive

Live TileLive tiles to draw users to your appProvide fresh, personalized content to help users feel connected to your content, motivate launchUse badges to show simple numeric or glyph informationLive updates should be accessible from the home screen of your app

You can opt in to cycle through last 5 updates:Good example – A news app wants to send five stories per day or one story and supplementary images per dayBad example – A shopping app sends a new notification per day for daily deals (last 4 days’ will still cycle but be outdated)

Both default & content tiles, small & large, support live. Watch BUILD talk APP-396T

Notifications

NotificationsToast notifications deliver transient messages outside the context of the appShow toast when your app is in the backgroundUse it for real-time, personal content such as IM, Call, or MailProvides quick navigation to contextually relevant location in your appUse this only for information that must be interruptive Raise notifications only if they are truly time sensitive and relevant, or users will turn off your appCoalesce notifications if there are multiple updates occurring within a short period of timeDo not use notification to raise error or warnings.Use where neededLive tile is the place where users will want to see fresh content at their leisure

Roam to the Cloud

Roam


Leverage roaming to maintain state and preferences across machines

Roam preferences that users are likely to set on each device anyway:Favorite sports team (sports app)Favorite movie genre (media app)

Let users continue a task across devices by roaming app data:Composing a to-do listComposing emailRoaming is best for user preferences, links, and small data files

Embrace the Design Principles

Microsoft Design PrinciplesPride in craftsmanshipSweat the details. Pixels matter

Do more with lessContent before chrome

Be fast and fluidPurposeful motions and direct interactions

Authentically digitalGo beyond real world metaphors and material

Win as oneLeverage the ecosystem

8 Traits of a great Windows Store App1. Modern UI 2. Fast and fluid3. Snap and scale beautifully4. Use the right contracts5. Invest in a great Tile6. Feel connected & alive7. Roam to the cloud8. Embrace Microsoft Design principles

Resources

Design resourceshttp://design.windows.com

Touch, Navigation, Commanding design patterns

Detailed UX guidelines

Photoshop templates

And more to come…

http://design.windows.com/

Now is the time to write your game. Enjoy the first to market advantage!

twitter.com/thedavedev | [email protected]

http://bit.ly/genapp8

Designing a Windows Store App

Dave IsbitskiTechnology Evangelist, Windows 8twitter.com/TheDaveDevblogs.msdn.com/[email protected]

designing a windows store app

Technology

contoso travelfeatured

sunny today

sunny today

double occupancy

minute deals

inside cabin

save upgrade

port view