Tile design guidelines for Windows Phone

  • Article

[ This article is for Windows Phone 8 developers. If you’re developing for Windows 10, see the latest documentation. ]

A Tile allows you to present rich and engaging content to your customers on the Windows Phone Start screen when your app isn’t running.

Tiles can be live (updated through notifications), or you can leave them static. A tile begins as a default Tile, defined in the app's manifest. A static tile will always display the default content, which is usually a full-tile logo image. A live Tile can update the default Tile to show new content and can return to the default Tile only through another update. All Tiles have an area, dependent on the template, for displaying a count.

Tiles on the Start screen come in three sizes—small, medium, and wide (wide being optional).

Two very important points to remember:

  • The user can resize the tiles between small, medium, or wide at any time.

  • You should provide the user a way to turn Tile notifications off and on at any time within your app.

Windows Phone 8 supports three kinds of Tile templates—flip, iconic, and cycle. For more info about selecting the right Tile template, see Choosing the best Tile template for your app for Windows Phone.

This section talks about guidance that you should follow and design considerations to keep in mind when planning the look of your Tile and how it’ll be used.

This topic contains the following sections.

Tile design philosophy

Your goal is to create an appealing Tile for your app. If you use a live Tile, your goal is to present engaging new content that your customers will find valuable to see in their Start screen and that invites them to launch the app. To that end, avoid the overuse of loud colors. Simple, clean, elegantly designed tiles will be more successful than those that scream for attention.

When you’re designing your app, consider using a live Tile for several reasons:

  • Tiles are the "front door" to your app. A compelling live Tile can draw users into your app when your app isn’t running. Customers increasingly value an app that they use frequently.

  • A live Tile is a selling point that differentiates your app from apps on operating systems that only allow static Tiles and icons in their Start screen.

  • A live Tile is a selling point that differentiates your app from other apps in the Windows Phone Store. Customers are likely to prefer the app with the great live Tile to a similar app with a static tile.

  • If customers like your live Tile, a prominent placement of that Tile in Start will drive reengagement with your app. Serendipitous discovery of cool content in the app through the tile will make users happy.

  • If users don't like your Tile, they might place it at the end of Start or unpin it altogether, turn off updates, or even uninstall your app.

Some characteristics that make a live Tile compelling are:

  • Fresh, frequently updated content that makes customers feel that your app is active even when it's not running.

    Example: Showing the latest headlines or a count of new e-mails.

  • Personalized or tailored updates that use what you know about your customer, such as interests that you allow the customer to specify through app settings.

    Example: Deals of the day tailored to the customer’s hobbies.

  • Content relevant to the customer’s current context.

    Example: A traffic condition app that uses the customer’s current location to display a relevant traffic map.

Understanding small, medium and wide Tile sizes

The small and medium Tile sizes are required because they’re always available to the user. All Tiles begin as medium when they're created and then need to be resized for small. You’ll need to decide whether you want to allow for a wide Tile as well. This choice is made by providing a wide image when you define your default Tile in your manifest and setting the Supports wide size option in the manifest designer. If you don’t set up your app to include a wide image, your Tile will be set to medium and will only be resizable between medium and small. It won’t be able to accept wide update notifications.

Small, medium, and wide tiles

When you create a Tile for your app, here are some design guidelines to consider:

  • Use the wide Tile only if your app has new and interesting content to display to the user and those notifications are updated frequently (at least weekly).

  • Small or medium Tiles show less content than wide Tiles, so prioritize your content. Don't try to fit everything that you can show in a wide Tile into a small or medium Tile.

  • Use only a small and medium Tile if your app won’t use Tile notifications to send updates to the user.

  • Use a small and medium Tile with a count if your app supports only scenarios around short summary notifications—that is, notifications that can be expressed through only a count or a single number. For instance, an SMS app that plans to use notifications to communicate only the number of new texts received would fit this scenario. Don’t provide a wide image in the manifest.

  • Use the small and medium size if your app sends updates that shouldn’t be shown in detail on the Start screen. For instance, a paystub app could simply say that a new paystub is available instead of mentioning specifics such as the amount paid. Don’t provide a wide image in the manifest.

Using default Tiles

An app's default Tile is defined in its manifest. It’s static and is small, medium, or wide, and generally simple in design. For some apps, the default Tile is all that you'll ever need. When an app is installed, the default Tile is shown on the Start screen until that Tile receives an update notification.

Appropriate use of default Tiles

When you create your default Tile, keep these points in mind:

  • Use the default Tile image to reflect your app's brand, essentially as a canvas for your app's logo.

  • If you’re including a wide image, consider the design relationship between the wide and small/medium Tile images that you’ll provide. Always remember that the user has the option to display your Tile as small, medium, or wide and can change that option at any time. Here are some general rules:

    • Keep the same vertical placement of the logo in both the medium and wide tiles, which are of equal height.

    • Include the app name at the bottom of the Tile if your logo doesn’t include it. The following examples demonstrate these situations.

Tiles using the app name element defined in the manifest:

Tiles that include the app's name in the logo image:

If you make the space around the logo itself transparent in your image for flip or cycle tiles, the user’s theme color will show through. However, if you choose the Iconic tile, you can specify a brand color in the manifest. This tactic would be used with a logo such as the mail app tile shown earlier.

Inappropriate use of default Tiles

A few things you should avoid when you’re designing your default Tile:

  • Don't design the default Tile to include an explicit text call to launch the app, such as a Tile that says "Click Me!"

  • If your logo contains your app's name, don't repeat that name in the name field. Use one or the other, as shown here:

Using secondary Tiles

Note

Users will use buttons you provide in your app to create secondary Tiles. Creating a secondary tile always navigates the user to the Start screen so they can see where the tile has been placed. They simply press the Back button after the tile is pinned to return to your app. Users also have explicit control over secondary Tile removal, either through the Start screen or through the parent app.

Appropriate use of secondary Tiles

Some points to consider about using secondary Tiles properly:

  • Secondary Tiles, like all Tiles on the Start screen, are dynamic outlets that should be frequently updated with new content. Secondary tiles can surface notifications and updates by using the same mechanisms as any other Tile.

  • While the choice to create a secondary Tile is entirely the user's, the areas in the app that are offered to them to pin is determined by the developer, who should follow these guidelines:

    • If the content in focus is already pinned, the app bar should show and enable the pin button (as the "unpin button") so that the user can use it to unpin the pinned content.

    • If the content in focus can’t be pinned, the app bar pin button shouldn’t be shown. If the app exposes the pin command outside the app bar, the app bar's pin button either should not be shown or should be shown in a disabled state. Whether the pin button is disabled or not shown depends on the UI surface and scenario where it appears when it’s enabled.

    • Use the SDK-provided app bar buttons for pin and unpin.

    • You can also add contextual interactions specific to your app that create secondary Tiles.

Inappropriate use of secondary Tiles

Try to avoid these practices when you create secondary Tiles:

  • Don't use secondary tiles as shortcuts to discrete files that can’t change, or to other static content.

  • Don't use a secondary tile as a virtual command button to interact with the parent app, such as a "skip to next track" Tile.

Other design considerations

Here some other tips to keep in mind about Tile design:

  • Don't use the image or text elements to display app branding info in a Tile update notification. To reinforce your app's brand and provide consistency to the user, use the template's elements provided for that purpose: the app name (title) image. A live Tile can change its appearance considerably from notification to notification, but the location of the name is consistent. This ensures that users can find their favorite apps through a quick scan, seeing that info in the same place on each Tile. If your app doesn't use the provided branding elements, it can be harder for users to quickly identify your app's Tile.

  • Don't use branding as one of the items in the images in the cycle template. This scenario involves animated changes to the Tile, which catch the user's eye. Calling the user's attention through an animation simply to display your brand instead of interesting new content will only annoy that user.

  • Don't use Tiles for advertisements.

  • Avoid the overuse of loud colors in Tiles. Simple, clean, elegantly designed Tiles will be more successful than those that scream for attention.

  • Don't rely on Tiles to send urgent, real-time info to the user. For instance, a Tile is not the right surface for a communication app to inform the user of an incoming call. Toast notifications are a better medium for real-time messages.

  • Avoid image content that looks like a hyperlink, button, or other control. Tiles don’t support those elements, and the entire Tile is a single click target.

  • Don't use relative time stamps or dates (for instance, "two hours ago") on Tile update notifications—those are static while time moves on, making the message inaccurate. Use an absolute date or time (for example, "14:00").

See Also

Other Resources

Tiles for Windows Phone 8

Icon templates for Windows Phone 8