Sports apps make an impact on users, whether keeping avid fans current on the latest sports news or helping athletes improve their performance on the field. Windows features like tiles, semantic zoom, and Search and Share contracts can be especially useful when designing an app that appeals to sports enthusiasts. This article briefly introduces these features along with plenty of examples of how existing sports apps use them to deliver great user experiences. Inspiration for your new sports app is just a scroll away.
Here are a few common types of sports apps:
News, information, and video
These apps deliver the latest sports news in articles, videos, and slideshows. Content is regularly updated and is often available on the very first page of the app. For example, open the ESPN app and you’re immediately immersed in the most recent sports content. Check out these news-focused sports apps available from the Windows Store: ESPN, Sports Illustrated, NASCAR, Yahoo! Sports, and THE Football App.
These apps are devoted to getting fans excited about a particular sports team. They offer news, photos, and video content about a specific team. The Chicago Blackhawks app is a great example. Here's the landing page of the app which takes you back to the proud moment in Blackhawks history when they won the Stanley Cup. Seattle Sounders FC and AC Milan are two other examples of fan favorite Windows Store apps.
Tools and utility
This kind of sports app performs specific functions like comparing team statistics, teaching a user a specific athletic skill, or allowing users to participate in a fantasy league. These apps often have a more linear navigation pattern to guide users through a specific task. See the Decision Maker app, Winchester Ballistics, One Basketball, or NFL Fantasy Football 2013 in the Windows Store for inspiration.
Windows 8.1 provides lots of ways for your app to engage users, even when it isn’t running. For example, tiles can bring live, dynamic info to the Start screen. A live tile can display a news flash about a new draft pick for the user’s favorite team or show live score updates. Your app can also provide user-enabled notifications to guarantee that a sports fan never misses a game.
Create a tile for the Start screen that clearly represents your app. In this screen shot, you can see that tiles come in four different sizes: small, medium, wide, and large. Users tend to place well-designed tiles prominently on their Start screens which encourages regular use. Apps with less appealing tiles might not garner a spot on the Start screen, making them much easier to forget. Don't underestimate the power of an attractive tile.
Live tiles: The sports world is fast-paced: a winning play, a season-ending injury, or an influential draft pick can happen in the blink of an eye. With a live tile, your sports app keeps fans aware of the latest headlines involving their favorite teams, even when your app isn't running. Consider showing breaking news, score updates, or game reminders on your live tile. See Live Tiles for a broad overview, or Guidelines for tiles and badges for more details.
A live tile is an essential part of the Bing Sports app experience. Here the app's live tile shares a headline and image on the Start screen.
Secondary tiles: Sport fans are always looking for quick ways to keep tabs on their favorite players, teams, and leagues. Help avid fans immediately access the content they care about most using a secondary tile. If your sports app supports secondary tiles, a user can pin a shortcut to specific content within your app directly to the Start screen. Want more info? See Guidelines for secondary tiles or, for a more detailed summary, Secondary tiles overview.
In the ESPN app, for example, a Toronto Blue Jays fan can pin the team's stats page to the Start screen. Because this content was designed to be pinnable, the fan is able to click the pin icon from the bottom app bar (as shown in the following screen shot).
After clicking the pin icon, the user confirms that she wants to pin the tile to the Start screen.
She presses the "Pin to Start" button and a new secondary tile appears on the Start screen. She moves the new tile near the rest of her sports apps. Now, her Start screen features two ESPN tiles: one for general content, and a new secondary tile that takes her directly to her favorite team's page.
Secondary tiles allowed this Blue Jays fan to access the stats she cares about with a single click. If you have content that users might want to access directly, make it pinnable!
Tile sizing: Users can change the size of your tile, so make sure your tile looks great at all the tile sizes your app supports. Customize your tile images for each tile size. This tile was designed differently for small, medium, and wide tile sizes.
Because Windows Store apps can run on all sorts of devices, make sure you provide scaled versions of your tile images so they'll look crisp at the following screen resolutions:
- 1.0 = 1024 x 768px
- 1.4 = 1440 x 1080px
- 1.8 = 1920 x 1440px
Toast notifications: Sporting events happen at all hours of the day. Live tiles do an excellent job of keeping fans aware of new sports developments from the Start screen, but if users want more direct alerts, your sports app can provide toast notifications. Whether a toast notifies a user that a game is starting, or that his or her favorite team just won the World Series, a user can click the toast to open the app and get more details.
This image shows a toast notification from the SportsCenter app. Note that toasts appear in the upper-right corner of the screen.
Often, sports apps have a lot of quality content on a single page. If an app covers news stories on lots of different major sports, the landing page can get crowded. Semantic zoom is a sleek way to organize pages with lots of content. This feature collapses content into logical groups, giving users a better sense of all the available content and a way to access the specific type of content they want.
The Sports Illustrated app uses semantic zoom to keep its content manageable. When the app first opens, a user can pan to the right to see all the app's content. Here's a screen shot showing the default view.
However, it takes a lot of panning to see all available content. To get an overview of what's available, the user uses semantic zoom. When the user zooms by using touch gestures or by pressing "Ctrl" while scrolling the mouse wheel, the content is organized into different categories with useful headings and thumbnails.
There's no shortage of intense action, triumphant moments, and impressive spectacles in sports. The Hub control puts "hero" art front and center in your app. Hero art is a large high resolution image that greets users on the landing page and draws them into the story of your app.
Here, the Chicago Blackhawks app displays the team's proudest moment in its hero image. It's the first thing users see when they open the app.
The Bing Sports app shows the latest headline in its hero image. The photo captures a user's attention and features a caption excerpted from the article.
For more info, see Guidelines for the hub control.
Just because there's a grid associated with the Windows Store app silhouette, doesn't mean that all your app's content has to fit inside the margins. Feel free to push or even cross the boundaries in your sport app's design. Below is an example of content that crosses gridlines. On the left side of the app, the logo and content fit within the margins. However, the hero art flows from the very top of the screen to the bottom to maximize visual impact.
The following image superimposes the margins for the Windows Store app silhouette over the same app image. The majority of the app's content is still well within the blue area bounded by margins, but the image of the player extends beyond the boundary to the edges of the screen.
The Seattle Sounders app also makes an impact with graphics that span the entire screen. Striking background images are overlaid with eye-catching featured content. Even the full size advertisement on the far right side of the screen is designed to mesh with the Sounders experience.
Every pixel of screen space is fair game for your sports app's design.
Showcase content front and center in your app and keep controls from cluttering the screen when they aren't needed. In Windows Store apps, the nav bar (also called the top app bar) and the bottom app bar are tucked out of sight until the user right-clicks or swipes from the top or bottom edge of the screen. Many sports apps use the nav bar to contain shortcuts to different sections of the app. For example, the nav bar in THE Football App has tabs for different football leagues around the world. It also gives the user quick access to home, news, videos, and social media.
In addition to nav controls, the ESPN app shows the latest games scores in the nav bar. A user can skip from one section of the app to another, get a quick overview of current game scores, or jump to more detailed game-specific app content all from the nav bar.
The bottom app bar usually holds controls that are relevant to the current view. For example, a page containing a sports article with a lot of text might have a button for changing text size in its bottom app bar. The Sports Illustrated app allow users to filter content by sports league from the app bar.
There's a lot to know about the world of sports. By enabling in-app searches and using the Search contract to make your app searchable from anywhere in the system, users can get the info they need precisely when they need it.
In-app search: Include a search box in your app to let sports fans quickly access the content they want. If there are pages in your app where users will only be typing search queries, you can enable type-to-search, which automatically registers any keyboard input as a search query. For more info on when type-to-search may be appropriate, see Guidelines for search.
For an example of search in an existing sports app, check out the Bing Sports app. If a user wants to know about a particular player, he can open the app and start typing the player's name. Because the Bing Sports app enables type-to-search on its main page, the search box opens and registers input as soon as the user starts typing.
The Bing Sports app refines search result suggestions as the user types.
In just eight keystrokes, a user gets the info he needs.
The Search contract: Make the sports content in your app available in system searches by using the Search contract. If your app participates in the Search contract, users will see relevant search results from your app if they use the Search charm to search from anywhere in the system. Not familiar with contracts? See Charms and contracts for a broad overview, or App contracts and extensions for a more detailed description.
Sports revolve around communities of people sharing the love of the game, team, and common experience. Windows makes sharing easy with the Share contract. When you make your app a share source, a user can share content from your app using another installed app, such as Twitter, Facebook, or email. Not only does sharing satisfy your users, it also subtly promotes your app. See Charms and contracts for a broad overview of the contracts available for Windows Store apps.
If you choose to register your app as a share source, users can use the Share charm to share content from your app at any time. For example, say a user is watching game replays on the NFL Fantasy Football app. She was just discussing this play with a friend the previous afternoon, and decides to share the footage with him. She swipes from the right side of the screen to show the charms and selects the Share charm.
NFL Fantasy Football provides the system with the content the user wants to share and Windows shows a list of apps installed on the user's system that can handle this type of page content. In this case, Twitter, Mail, Evernote Touch, Flipboard and several other apps are able to share this type of content. Now, the user can choose how she wants to share this info. Whether she wants to tweet about it, email her friend a link, or share with one of the other available apps, she'll never have to leave NFL Fantasy Football!
You can customize the way that your app is represented when a user shares content from your app. For example, you can provide just a link to the shared content by default, or accompany that link with your app's logo or a thumbnail of the shared content.
If you want your app to receive content being shared by other apps, make your sports app a share target. For more info about how to make your app a share source and/or target, see Guidelines for sharing content. For code samples, see the Share source sample and Share target sample.
Leverage social media: Let users keep a finger on the pulse of sports conversation by incorporating social media in your app. Whether you want to harness the power of Twitter or sync with Facebook to let users know what their friends are saying about sports topics, presenting social content in creative ways can make an impact.
This entertainment app from FX uses a timeline to show social media trends. Users filter the timeline by topic (in this case, by television show) and social media source. The app then displays individual posts as well as a timeline of all the conversations pertaining to that topic.
The sports world is full of statistics that have a major impact on sports fans' experiences. Whether a user wants to make an informed decision in a fantasy sports trade, revel in the achievements of a favorite hockey team, or compare the RBIs of two designated hitters in the MLB, providing creative ways to visualize and interact with data can set your app apart from the rest.
The NFL Fantasy Football 2013 app livens up game stats with interactive media. The app shows fantasy teams' scores plotted over time and lets users click particular points on the graph to see video clips of the score-changing plays.
- Overviews and guidelines
- Meet Windows Store apps
- UX guidelines for Windows Store apps
- Charms and contracts
- App contracts and extensions
- Hub control guidelines
- Live Tiles
- Live tile guidelines
- Secondary tiles overview
- Secondary tile guidelines
- Toast notification overview
- Toast notification guidelines
- Window size guidelines
- Panning guidelines
- Semantic zoom
- Semantic zoom guidelines
- AppBar guidelines
- Share guidelines
- Search guidelines
- Live tile sample
- Panning sample (HTML)
- Panning sample (XAML)
- AppBar sample (HTML)
- AppBar sample (XAML)
- Share source sample
- Share target sample
- Search sample
- Semantic zoom sample (C#/VB/C++)
- Toast sample