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.
| Engage | Share | Engage others |
|
|
|
|
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".
|
|
The Contoso Sports app attracts his attention with a live tile listing the sports headlines.
|
|
The view is laid out horizontally with all of the options on the same, pannable canvas. John can browse without navigating a page hierarchy.
|
|
John pinches to activate semantic zoom, which lets him quickly navigate to his favorite sport.
|
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:
- Live tile guidance
- Live tile sample
- Panning guidance
- Panning sample (HTML)
- Panning sample (XAML)
- Semantic zoom guidance
- Semantic zoom sample (C#/VB/C++)
- Semantic zoom sample (JavaScript)
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.
|
|
John plays the highlight video from the article on his Play To enabled TV.
|
|
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.
|
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.
|
|
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.
|
|
Ben needs a new outfielder for his fantasy team. He uses the system-wide Search charm to search for a new player.
|
|
Ben searches within the Contoso Sports app and sees relevant outfielders. He selects Ben Smith, who looks like he could be a good replacement.
|
|
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.
|
|
Ben wants to keep track of his new player, so he navigates to the score tracker.
|
|
Ben wants to monitor the score tracker while continues to work on his report, so he puts the Contoso Sports app in snap view.
|
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:
- Guidelines and checklist for toast notifications
- Toast sample
- Snapped view guidance
- Snapped view sample
- Search guidance
- Search sample
- AppBar guidance
- AppBar sample (HTML)
- AppBar sample (XAML)
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: 3/12/2013



















