16 out of 29 rated this helpful - Rate this topic

Sports apps

The sports app idea book describes a fictional sports app for Windows 8. You can gain inspiration for the design of your own sports app by reviewing the scenarios in this topic and seeing how the Windows 8 Microsoft design language is utilized in the app.

Sports app scenarios

The sports app described in this topic uses Microsoft design features to create an engaging sports experience for users.

EngageShareEngage others

image of people watching the news and using a tablet PC

image of a computer running a sports app

image of sharing with other users using a sports app

image of streaming a video from a sports app using Play To

image of a sports app

image of shared data in a sports app

 

Draw users into the content of your app

You can use the Microsoft design language to create a casual browsing experience that is fun, easy, and powerful. You can also use live tiles to draw users into your app. Follow along with this scenario to see how you can make your sports app engaging.

While watching the news on TV, John Rodman is using his Windows 8 tablet as a "second screen".

large image of a couple watching the news and using a tablet PC

The Contoso Sports app attracts his attention with a live tile listing the sports headlines.

image of the start menu and a live tile

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

image of a pannable dashboard page

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

image of the file picker choosing from the videos library

 

Summary of app content

In the first scenario, we see that...

  • Your content shines without chrome and multiple navigation hierarchies.
  • You can use live tiles to draw users back into your app with information that is relevant to them.

For information on live tiles, panning and semantic zoom, see the following:

For help choosing the best navigation pattern for your app, see Navigation patterns.

See the Flat navigation pattern in action as part of our App features, start to finish series.

Share locally and across networks

You can use Play To to share your PC experience to a TV. You can use the Share contract to share your content to other apps.

John notices an interesting article and opens it to view it in a full screen article view.

image of selecting an article

John plays the highlight video from the article on his Play To enabled TV.

image of streaming a video using play to

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.

image of share charm

 

Summary of sharing

In the second scenario, we see that...

  • You can extend the content from your app to any Play To enabled device.
  • You can make your content into a Share source and Windows 8 connects you to other apps, email, and social networks.
  • You can make your app into a Share target and receive content, links, or any other type of structured data.

For information on Play To and Share, see the following:

Engage users outside of your app

You can draw users back into your app with timely toast notifications and the Search contract.

Ben Martens is working on a report. He sees the Contoso Social app toast from John Rodman saying that his player is injured.

image of a toast notification

Ben clicks on the toast notification, which deep-links him into the Contoso social network app. There he sees that a link to the web page of the story has been posted.

image of streaming a video using play to

Ben needs a new outfielder for his fantasy team. He uses the system-wide Search charm to search for a new player.

image of the Search charm

Ben searches within the Contoso Sports app and sees relevant outfielders. He selects Ben Smith, who looks like he could be a good replacement.

image of search results

After selecting his new outfielder, Ben brings in the app bar to add the new player to his fantasy team. The app bar is useful for navigation (shown as the top app bar) and commands (shown as the bottom app bar), letting your content shine.

image of the top and bottom app bar

Ben wants to keep track of his new player, so he navigates to the score tracker.

image of the score tracker page

Ben wants to monitor the score tracker while continues to work on his report, so he puts the Contoso Sports app in snap view.

image of share charm

 

Summary of engaging users outside of your app

In the third scenario, we see that...

  • Toast notifications deep link into your app and give the user an opportunity to re-engage with your content.
  • A fully-featured snap view lets your users increase their engagement with your app.
  • Search places your app in the potential target list when your user needs information.

For information on toast notifications, snapped view, search, and the AppBar, see the following:

Explore the possibilities

Windows 8 is full of new features that can make your app shine. For more information, see the Windows 8 Product Guide for Developers.

Related topics

Making great Windows Store apps
User experience (UX) design patterns for Windows Store apps
UX guidelines for Windows Store apps
Samples and Guidance
Live tile guidance
Live tile sample
Panning guidance
Panning sample (HTML)
Panning sample (XAML)
AppBar guidance
AppBar sample (HTML)
AppBar sample (XAML)
Guidelines and checklist for toast notifications
Toast sample
Snapped view guidance
Snapped view sample
Share guidance
Share source sample
Share target sample
Search guidance
Search sample
Play To guidance
Play To sample
Semantic zoom guidance
Semantic zoom sample (C#/VB/C++)
Semantic zoom sample (JavaScript)

 

 

Build date: 6/20/2013

© 2013 Microsoft. All rights reserved.