EXPLORE WINDOWS 8 CONCEPTS, SCENARIOS, FEATURES AND DEVICES THAT MAKE SENSE FOR YOUR BUSINESS

Creating Great Sports Apps for Windows 8

HOW TO CREATE GREAT EXPERIENCES FOR YOUR USERS

About this Ideabook

Windows 8 was designed to be a great app platform for your business

This book will give you some ideas on how to take full advantage of the platform

Windows 8: Windows Reimagined

The Windows Store: The Source for Windows 8 Apps Paid downloads, trials, and in-app purchases. You keep 70% of the first $25k, 80% of the rest

Robust analytics for free, including demographics, reviews, referrals, and usage & performance statistics

Use your own commerce engine and keep 100% or use the Windows Store’s full commerce platform

Advertise with Microsoft Advertising or your preferred

ad vendor. Use app or web advertising networks

THE METRO DESIGN LANGUAGE SPANS ALL MICROSOFT CONSUMER EXPERIENCES

Metro: Microsoft’s Design Language

Show pride in craftsmanship / Do more with less / Be fast and fluid / Be authentically digital / Win as one

THE FOUNDATIONAL PRINCIPLE OF METRO IS THAT YOUR CONTENT BE FRONT-AND-CENTER

Content Before Chrome

Completely immerse users in your app using captivating high quality content.

Users will expect commands to be off screen only swiping in when they need them.

KEY IDEAS, FEATURES, AND USE CASES

Windows 8 Sports Scenarios

While watching the

news on TV, John

Rodman is using his

Windows 8 tablet as a

“second screen.”

LIVE TILES DRAW USERS IN; METRO MAKES CASUAL BROWSING FUN, EASY, AND POWERFUL

Scenario #1: Engage Users

The Contoso Sports App attracts his attention with its live tile listing the sports headlines.

The view is laid out horizontally with all of the options on the same canvas. John can browse without navigating hierarchy.

He pinches to activate semantic zoom, which lets him to quickly navigate to his favorite sport.

How Semantic Zoom Works

Click corner… …or Pinch

Category View

Semantic Zoom

Semantic view is a way to easily view and

navigate multiple categories and large

lists of content.

Semantic zoom is not an optical zoom;

present your content in a new way that

makes sense for a high-level view.

LIVE TILES DRAW USERS IN; METRO MAKES CASUAL BROWSING FUN, EASY, AND POWERFUL

Scenario #1 Summary

Live Tiles draw users back into your app with information that is relevant to them

Your content shines without chrome and multiple hierarchies

Scenario #2: Share Locally and Across Networks PLAY-TO LETS YOU SHARE YOUR PC EXPERIENCE TO A TV; THE SHARE CONTRACT EXTENDS YOUR CONTENT

John notices an interesting article and opens it to

view it in a full screen immersive Article View.

John plays the highlight video in the article on his Play-to enabled TV.

How Play-to Works

1. Swipe in to see the charm

bar and select “Devices”

2. Select the device you’d

like to Play-To

3. Watch your content on your Play-To enabled

TV or other Play-To enabled device

John knows that the injured player is on his friend Ben Martens’ Fantasy Team. He swipes in to open the Share charm where he uses

the Contoso Social app to alert his friend.

How Share Works

1. Invoke share using the system

wide charm

3. The target app will bring up a

Share Sheet to edit and confirm

the content you are sharing.

2. Select a “Share Target” from the

contract to choose which app you

want to share your selected

4. After you have shared the content,

the Share Sheet disappears and

you remain in the original app.

PLAY-TO LETS YOU SHARE YOUR PC EXPERIENCE TO A TV; THE SHARE CONTRACT EXTENDS YOUR CONTENT

Scenario #2 Summary

Extend your app’s content to any Play-to enabled device

Make your content into a share source and Windows 8 connects you other apps, email, and social networks

Make your app into a share target and receive content, links, or any other type of structured data

DRAW USERS BACK INTO YOU APP WITH TIMELY TOAST NOTIFICATIONS AND THE SEARCH CONTRACT

Scenario #3: Engage Your Users Outside Your App

Ben Martens working on a report.

He sees the Contoso Social toast

from John Rodman saying his

player is injured.

The toast notification deep-links into the Contoso social network app,

where a link to the webpage of the story has been posted.

Ben needs an outfielder, so he uses the system-wide search charm to search for a new player.

How Search Works Search in the current app

Search in another app

1. Invoke search using the

system wide charm bar

2. The current app is selected by default.

Populate the suggestion box with:

- previous searches

- search recommendations

- predictive results

Ben searches within the Contoso

Sports app and sees relevant

outfielders. He selects Ben Smith,

who looks like he could be a good

replacement.

V

After selecting the Ben Smith, Ben brings in the app bar to add him to his fantasy team. The app bar is useful

for navigation (top) and commands (bottom), letting your content shine.

Ben wants to keep track of his new player, so he navigates to the Score Tracker.

How Snap View Works SUPPORTING STATEMENT

Pull It Grab the app from the top of your

screen, then drag it to the left or right

Fill It With your app now snapped, launch another

app in fill view

Snap It Drop the app in the are on the right or left

side to view the app in Snap View

Ben snaps the Stat Tracker so he can keep an eye on the game.

DRAW USERS BACK INTO YOU APP WITH TIMELY TOAST NOTIFICATIONS AND THE SEARCH CONTRACT

Scenario #3 Summary

Toast notifications deep link into your app and give the user an opportunity to reengage with your content

Search places your app in the potential target list when your user needs information A fully-featured snap view keeps users engaged

WINDOWS 8 IS FULL OF NEW FEATURES THAT CAN MAKE YOUR APP SHINE

Explore the Possibilities

Beyond the Tablet WINDOWS 8 IS TOUCH-FIRST WITH FULL SUPPORT FOR MOUSE-AND-KEYBOARD

SHOW FULL, SNAP, FILL, AND PORTRAIT VIEWS OF EACH PAGE

All Views

Full View Your app covers all available

screen real estate.

Snap View You have a 320px wide canvas to

optimize your apps layout

Fill View With another app snapped, your

app maintains a 4:3 aspect ratio

Portrait Displaying your app at

9:16 aspect ratio

THE PICKER SURFACES YOUR CONTENT INTO OTHER APPS, MAKING YOUR APP MORE RELEVANT

Picker

1 3

2

4

5

A FAMILIAR AND CONSISTENT WAY TO MODIFY AN APP’S SETTINGS

Settings

Manage account information

Configure favorite categories

Add your privacy policy and

terms of use

GIVE USERS THE EXPERIENCE THEY EXPECT ACROSS ALL THEIR WINDOWS 8 DEVISES

Roam App Settings & Purchases

FINALLY, WIRELESS PRINTING THAT “JUST WORKS”

Print

Your app can take advantage of

the rich Windows 8 ecosystem of

devices and peripherals.

YOUR APP INTERACTING WITH THE REAL WORLD

Location

HELP YOUR USERS STAY SIGNED IN TO YOUR APP EVERYWHERE

Single Sign On

THAT’S ALL FOLKS

Fin.

© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.

The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of

Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

We hope you’ve found these ideas useful.

To get technical guidance on how to build the features you’ve seen in this book, head to

dev.windows.com and look for the “store category technical how-to guides”.

Happy Building!