Using live tiles with different app types (Windows Runtime apps)

Artigo
08/31/2015

This topic discusses design considerations in the use of live tiles for different app types.

Games
Social apps
News apps
Productivity
Entertainment and media apps
Shopping apps
Finance apps
Related topics

Games

You can use live tiles to entice users to play a game by reminding them of their game progress, showing off high scores, or notifying them of game updates.

Turn-based games You can use live tiles to notify a user when it is their turn in a game along with additional details about the progress of the game. This example shows the wide tile TileWide310x150PeekImage06 template, which cycles between an image that shows the current status of the game (1) and an image of the opposing player and their status (2). The example also shows the medium tile TileSquare150x150PeekImageAndText01 template, which cycles between a smaller image of the game and text that prompts the user to take their turn (3).
Social games You can use live tiles to entice a user to play by showing game invitations, missed invitations, or competitive scores from friends. This example shows the wide tile TileWide310x150Text09 template, which displays a message that the game has a new top score (1) and details about the score (2). The example also shows the medium tile TileSquare150x150Text04 template, which displays the new high score information in a smaller area.
Resume a game You can use live tiles to entice a user to resume a game where they left off. This example shows the wide tile TileWide310x150ImageAndText02 template, which displays an image of where the user last saved their game progress (1) and information about the user's game (2). The example also shows the medium tile TileSquare150x150Text02 template, which displays details about the user’s last save point in the game.
Game updates You can use live tiles to notify a user that a game has new downloadable content or other updates. This example shows the wide tile TileWide310x150ImageAndText02 template, which displays an image for the game (1) and information about the game update (2). The example also shows the medium tile TileSquare150x150PeekImageAndText04 template, which cycles through an image for the game and the information about the game update (3). Remember that tiles have only one hit target, so you can either direct the user to your game or to the download site.

You can use live tiles in a social app to immerse the user in the app even when the app is not in the foreground.

Status updates You can use live tiles to keep the user updated about their friends. This example shows the wide tile TileWide310x150SmallImageAndText04 template, which displays both the image of the person who added a status or comment (1) along with their name and the beginning of the text (2). The example also shows the medium tile TileSquare150x150Text02 template, which displays the short name and text of the person who added the status or comment.
Photos and images If a post or comment refers to an image or a photo, you can include the image in the live tile when displaying the update. This example shows the wide tile TileWide310x150PeekImage05 template, which cycles through a photo (1) and a comment about the photo (2). The example also shows the medium tile TileSquare150x150PeekImageAndText04 template, which cycles between a photo and the text of the comment about the photo, truncated to fit within the smaller tile (3).
People or groups You can use a secondary tile to enable a user to pin friends, family, or colleagues to the start page. You can use collection tile templates to show images of group members in the live tile. You can use peek tile templates to show updates related to group members. This example shows the wide tile TileWide310x150PeekImageCollection05 template, which cycles through a collection of images of group members (1) and a recent message posted by a group member (2) with and a name that represents the group (3). The example also shows the medium tile TileSquare150x150PeekImageAndText02 template, which cycles through updates about group members and an image of the related group member (4).
Events You can use live tiles to show event information including the location, time, and friends that are attending. You can also use a secondary tile for an event that a user can pin to the start page. This allows the user to easily access the latest information about an event that they are attending or hosting. This example shows the wide tile TileWide310x150PeekImageCollection02 template, which cycles through an image of the event (1) and an image collection of the friends that are attending the event (2), and the event information including the total number of attendees. The example also shows the medium tile TileSquare150x150PeekImageAndText04 template, which cycles through an image of the event or attendees of the event (3), and the event information including the total number of attendees.
Summary info You can use live tiles to show a summary of updates in your app. While a summary is often a less compelling notification, it is useful when a user does not wish to show private information on the start screen. This example shows the wide tile TileWide310x150BlockAndText01 template, which displays the total number of updates (1) along with a summary of the updates for different categories (2). The example also shows the medium tile TileSquare150x150Block template, which displays the total number of updates.

News apps

You can use live tiles in news apps to draw users in by showing them a preview of the latest news. Because live tiles can have only one target, you should only display news that the user can easily find on the front page of your app.

Features stories You can use a live tile to display the most compelling portions of a featured article. The live tile can cycle through a group of stories to give the user an overview of the day's news. This example shows the wide tile TileWide310x150ImageAndText01 template which displays both an image for the story and the text of the headline (1). The sample also shows the medium tile TileSquare150x150Text04 template, which shows only the headline (2). For stories with larger headlines, you can use a different live tile template that enables you to add more text, such as the wide tile TileWide310x150Text04 template.
Stories with long headlines For stories with larger headlines, you can use a live tile template that enables you to add more text. This example shows the wide tile TileWide310x150Text04 template, which does not include an image and uses a smaller font (1). This enables the user to read the full headline of the story. The example also shows the medium tile TileSquare150x150Text04 template, which displays a shortened version of the headline text (2). You will want to make sure that truncated headline text in your medium tile can still be understood by the reader.
Stories with short headlines For stories with short headlines, you can use a live tile template that displays the text using a large font. This example shows the wide tile TileWide310x150Text03 template, which displays a short headline using a large font. You will want to make sure that the headline text is not truncated when using this template. If you are using a medium tile template, use a template such as the TileSquare150x150Text04 template, which uses a smaller font (2) and is appropriate for the reduced space available to medium tiles.
Showing larger images You can use a peek tile template to cycle between an image and the headline text for a story. In this case, the tile will display the image without the text so be sure that your image is easily recognizable by the reader. This example shows the wide tile TileWide310x150PeekImageAndText01 template, which cycles through an image for the story and longer headline text (1). The sample also shows the medium tile TileSquare150x150PeekImageAndText04 template, which cycles through an image for the story and truncated, longer headline text.
Polls and statistics You can show poll results or statistics for a story by adding an image that displays a graph or chart. This example shows the wide tile TileWide310x150ImageAndText01 template, which displays an image of poll results (1) and text that describes the results of the poll (2). The example also shows the medium tile TileSquare150x150Text04 template, which only shows the text that describes the results of the poll.
Blogs and opinion articles You can use a small image tile to display an image of the author of a blog or opinion article. By focusing on the author, you can separate opinion pieces from other types of news. This example shows the wide tile TileWide310x150SmallImageAndText03 template, which displays a photo of the author along with the name of the author and the headline text (1). The example also shows the medium tile TileSquare150x150Text04 template, which displays the name of the author and the headline text using a smaller font (2). Using a smaller font displays more of the headline text to the reader.
Videos You can use a live tile to launch a video. This example shows the wide tile TileWide310x150ImageAndText02 template, which displays a relevant screen shot from the video (1), the headline for the video labeled as Video (2), and the playing badge to indicate that the tile starts the video (3). The example also shows the medium tile TileSquare150x150Image template, which displays a screen shot and the playing badge.
News categories You can use a secondary tile to enable a user to pin a specific category of news stories to personalize the content that they receive. You can use peek tile templates to cycle through a set of related stories. This example shows a pinned tile that displays the latest business news. The example uses the wide tile TileWide310x150SmallImageAndText01 template, which displays the company logo as a small image (1), and a short headline in a large font (2). The sample also shows the medium tile TileSquare150x150Text04 template, which displays only the short headline text (3).

Productivity

You can use live tiles to keep the user constantly updated about their work, such as notifying them of new changes to shared documents, tracking important events, displaying a task list, and so on.

Taking notes You can use a live tile to give a user easy access to their notes or to update them about changes to their documents. This example shows the wide tile TileWide310x150SmallImageAndText02 template, which displays an image of the person that modified the document (1), the title of the document (2), and when the document was last updated (3). The example also shows the medium tile TileSquare150x150Text04 template, which displays only the title of the document and when it was last modified. Both tile template examples show a gleam badge (4) to indicate that the document has been modified.
Calendar and appointments You can use live tiles to show information for upcoming appointments. You can show relevant information for the appointment including the location, time, and appointment details. This example shows the wide tile TileWide310x150SmallImageAndText04 template, which displays an image of map directions (1) and information about the appointment. The example also shows the medium tile TileSquare150x150Text04 template, which displays just the critical information about the appointment.
Task lists You can use a live tile to display task information to the user. You can display multiple items using a wide tile template, or display one item at a time using a medium tile template. This example shows the wide tile TileWide310x150Text11 template, which uses a font glyph to display the status of the task (1) and shows multiple items from the task list (2). The example also shows the medium tile TileSquare150x150Text04 template, which cycles through each task in the list and includes a badge that contains the number of tasks in the list (3).
Syncing data You can use live tiles to notify a user of changes when their files or data sync with the cloud, a server, or a shared directory. You can also provide warnings regarding low space or bandwidth remaining. This example shows the wide tile TileWide310x150Text02 template, which displays a notification about what has changed and who made the change (1) and a detailed list of file changes (2). The example also shows the medium tile TileSquare150x150Block template, which displays a summary of changes.

Entertainment and media apps

Live tiles can help the user discover new content through personalized recommendations or become more connected with their favorite artists and shows by displaying playlists and upcoming releases.

Movies and shows You can use live tiles to notify a user of an upcoming movie release or episode of a show. You can also include ratings and recommendations from social apps. This example shows the wide tile TileWide310x150PeekImage05 template, which cycles through an image from a show and a recommendation for the show from a friend (1). The example also shows the medium tile TileSquare150x150PeekImageAndText04 template, which cycles through an image of the show (2) and a recommendation from a friend without including an image of the friend (3).
Paused movies and shows You can use live tiles to display paused movies on tiles as a reminder to the user. This example shows the wide tile TileWide310x150Image template, which displays an image from the last watched scene of a paused movie (1) and the paused badge to indicate that the movie is paused (2). The example also shows the medium tile TileSquare150x150Image template, which displays a truncated image from the last scene of the paused movie along with the paused badge. Keep in mind how relevant a paused tile will be for the user. A user might not want to resume a song in a few days but they might resume a movie a day or two later.
Music You can use live tiles to display the currently playing song, upcoming songs, and details about the artist. You can include ratings and comments from social apps as well as information about upcoming appearances and music releases. This example shows the wide tile TileWide310x150SmallImageAndText02 template, which displays an image of the artist or album (1) and the information about the song, artist, and album (2). The example also shows the medium tile TileSquare150x150Text04 template, which displays only the important information about the song in a smaller format (3).
Photography You can use live tiles to display thumbnail images of photos and albums. For apps that allow users to create and edit images, you can use live tiles to show off effects that the app can apply to a photo. This example shows the wide tile TileWide310x150PeekImageCollection05 template, which cycles through a collection of images from a photo album (1) and an image of the album creator (2) with the name and description of the album contents (3). The example also shows the medium tile TileSquare150x150PeekImageAndText04 template, which cycles through a single photo from the album and the album information.

Shopping apps

You can use live tiles to show off inventory in your app by displaying featured daily deals or tailored recommendations for items. You can also use tiles to notify sellers and buyers when sales have been processed or shipped.

Purchase recommendations You can use live tiles to display recommendations for new and special items or items that relate to the user's interests. This example shows the wide tile TileWide310x150ImageAndText01 template, which displays an image and sale information for an upcoming holiday (1). The sample also shows the medium tile TileSquare150x150Text02 template, which displays sale information for an upcoming holiday without an image (2)
Catalogs You can use live tiles that display a collection of images for catalog items. This example shows the wide tile TileWide310x150ImageCollection template, which displays multiple images of related items from a catalog (1). The example also shows the medium tile TileSquare150x150Image template, which displays a single image of a catalog item (2). You can then cycle through the related images, showing one image at a time.
Buyer notifications If your app supports bidding for items, you can use live tiles to notify users when they have won an item, have been outbid, the item has shipped, and so on. This example shows the wide tile TileWide310x150Text09 template, which displays the update for the buyer in large text (1), and the details of the update in smaller text (2). The example also shows the medium tile TileSquare150x150Text04 template, which displays the update and an abbreviated version of the details.
Seller notifications Similar to buyer notifications, you can notify a seller when an item has sold. For high volume sellers, you can update the seller about inventory changes or common analysis information such as sales volume. This example shows the wide tile TileWide310x150Text07 template, which displays an overview of total sales in large text (1) and details in smaller text (2). The example also shows the medium tile TileSquare150x150Text02 template, which displays more specific information such as sales for the day (3). Tile notifications can keep the seller up to date about their inventory by alerting them when an item has sold or displaying basic analytics information.
Shopping cart You can use live tiles to show a summary of the items in a user's shopping cart. This example shows the wide tile TileWide310x150BlockAndText01 template, which displays the number of items in the cart (1) and details about what items are in the cart (2). The example also shows the medium tile TileSquare150x150Block template, which displays only the total number of items in the cart (3).
Categories and common searches You can use a secondary tile to enable a user to pin a specific category of item, a wish list, or a personalized search of the catalog. This example shows the wide tile TileWide310x150SmallImageAndText01 template, which displays an image of a product category (1) and details about the product category such as an upcoming sale (2). The example also shows the medium tile TileSquare150x150Image template, which displays an image of the product category and an alert badge to notify the user about new information (3).

Finance apps

You can use live tiles to display the latest price and information about stocks that a user is tracking, market indices, trending topics such as IPOs or big moves, and so on.

Personal finance You can use live tiles to give a user a summary of their spending. Be sure to give the user options regarding which information they want displayed on the start page. This example shows the wide tile TileWide310x150Text03 template, which displays a summary of the user's spending (1) and an alert badge to notify the user of over spending (2). The sample also shows the medium tile TileSquare150x150Text04 template, which displays the summary information and alert badge in a smaller area.
Billing You can use live tiles to remind users of upcoming bills or payments. This example shows the wide tile TileWide310x150BlockAndText01 template, which displays a summary of payments due (1) and a large font glyph with a date to notify the user of the next payment due (2). The example also shows the medium tile TileSquare150x150Block template, which only shows the font glyph and date to notify the user of the next payment due.
Financial markets You can use live tiles to show the performance of stocks and assets that the user owns or is watching. This example shows the wide tile TileWide310x150Text06 template, which uses a font glyph to indicate if a stock value is rising or falling (1) and displays a list of stocks and their current values including the percentage that the value has changed for the day (2). The example also shows the medium tile TileSquare150x150Text03 template, which displays an abbreviated version of the watched stocks and their current values.
Individual stocks You can use a secondary tile to enable a user to pin a specific stock to the start page and receive detailed information about the stock at a glance. This example shows the wide tile TileWide310x150SmallImageAndText02 template, which displays an image of a graph of the stock performance (1), details about the stock and its current price (2), and a time stamp showing when the information was last updated (3). The example also shows the medium tile TileSquare150x150Text03 template, which displays stock information and a time stamp in a smaller format.