Anatomy of a Tile
This article is a basic study about a Tile UI and UX. Coding details can be found in text Tile – Windows Phone – Coding (Porguese) written by my developer friend Awdren Fontão. Este artigo também está disponível em português.
A Tile is a visual shortcut, easily recognizable, for an application or specific content that the user can put on Start screen of the Windows Phone.
It looks like a square. In exceptional cases (from Microsoft and partners) it can be a rectangle that is two tiles horizontally (Pictures, Calendar, etc).
It can reach the Start screen in three ways:
1 – Added by Microsoft (defaults like Me, People, Pictures, etc), by a phone manufacturer (Nokia Maps on Nokia devices) or by a carrier (customized contents);
2 – Added by the user that, if on Application List screen, can create a shortcut of a chosen app on Start screen (Pin to Start process);
3 – Added by code, from within an application, leading to a specific content of the same.
Functionally it is better than an icon because it can present relevant information about the application. For example, the tile of a weather app can dynamically display the temperature of the user city. Designers and developers are strongly encouraged to take advantage of these features because they make the app much more interesting. More examples are presented below on the topic Cases.
A good tile communicates information about the app, gives the personality of a brand and it can stand out from others on the start screen. During the design process the Metro UI guidelines should be kept in mind. Defaults Microsoft and partners apps are always good visual references to be followed.
The art is important
Tiles can have a background image that must be 173×173 pixels, 256 dpi and a PNG. Higher or lower images will be automatically re-sized keeping the superior left corner as reference.
Apps that do not incorporate an image or title will be replaced by a generic tile generated by the system with the project name.
During the design process of an icon you must keep as reference default device icons (email, sms, phone, etc): they have to be completely white, simple shapes, without refined details and with good metaphors. Of course, it’s not mandatory. Mainly because we are talking about brands. However, this simplicity level ensures a visual that is aligned with the Metro UI.
Elements to avoid during the design process of a tile (great part of the following points are completely opposite of the Metro UI guidelines):
1 – 3D Typography;
2 – Icons or backgrounds with gradients, bevels or shadows;
3 – Rounded borders;
4 – Black or White background. The tile background will disappear over one of the basic Windows Phone themes (black or white);
5 – Use of meaningless or ambiguous icon.
The most sensitive visual relation of a tile is Background x Foreground Element. The background can be a transparency (which shows the Windows Phone color theme as tile background), a texture or an image. The foreground element can be a text, a logotype, an icon or a brand.
Choose a background color that represents your brand and makes the foreground icon easy to see and read. Below there are three good examples:
If you decide to use a transparent image to take advantage of the theme color as background, keep in mind that the icon must be rather white. If the icon is colored it may have a compromised visualization in some color combinations.
When well used the combination of transparent tile and user color theme can make nice compositions. Two good examples are the projects below:
The default process to add a tile on the start screen happens when the user, on the application list screen, presses the application title, enabling the contextual option Pin to Start. In this moment an Application Tile is created.
An application tile can not be deleted. It can or can not be pinned to start screen. However, even if its not being displayed it can still be updated by code. So in an eventual addition to the start screen the data will be already updated.
Another way to create a tile is by code, when an user action inside the app demands the creation of an external shortcut. In this moment a Secondary Tile is created.
A typical use for a secondary tile as said before can be a weather application that creates a tile on start screen with information about a specific city. Another possibility is to create a secondary tile that displays the last headline of a news app.
When the user presses the secondary tile it can guide the user directly to a specific content screen instead of the home screen of the app.
Note that it is possible to add a secondary screen of an application even if it does not have an application tile displayed.
“Unlimited” secondary tiles can be added on start screen, however keep in mind that each one can make dynamic requests and it can imply in a high data, processing and battery consumption.
Each tile has two sides: Front and Back. If no property is set for the back of the tile it will not change, displaying only the front.
The default properties of an application tile and a secondary tile are the same. For the front of the tile there are the following:
Title – A string indicating the title of the application. The Title must fit on a single line of text and should not be wider than the actual tile. Approximately 15 characters will fit in the title before being truncated. 15pt Segoe WP semibold font is recommended.
Background Image – An image displayed on the front of the Tile. A background image on the front of the tile is always recommended.
Count (or Badge) – An integer value from 1 to 99. If the value of Count is not set or it is set to 0, the circle image and value will not be displayed in the Tile.
And for the back the properties are:
Back Title – Equal the Title property on the front.
Back Background Image – Equal the Background Image property on the front. But not always recommended.
Back Content – A string displayed in the body of the back of a Tile. Approximately 40 characters will fit in the Tile before being truncated. 24pt Segoe WP Regular font is recommended.
Some important notes about the background images:
1 – Background images in a secondary tile must start as a local resource. It can become a remote resource through updates.
2 – Because of network variability and performance reasons, consider using local resources for tile images.
3 – Remote images are limited to 80 KB or less or they will not be downloaded.
4 – Remote images must download in 30 seconds or less or they will not be downloaded.
The most common model of tile should be the news. Whether news with text, photo or text plus photo. Apps like Fox News, BBC News and USA Today are good cases of tile content use.
Below it is possible to see an example of how to use application and secondary tile in a news case.
The app tile, as said before, is the primary access of an application. Is the one created when the user selects it from the application list and pins it to start.
The app tile front presents a background image (red background and logo icon) and as title displays the name of the app “Quezado Blog”.
Seconds later, it flips to display the tile back showing remote background image and content. The image and headline of last news from the Featured category of the blog is displayed.
The secondary tile shows a different model. Assuming that within the application there is a session called Gallery, in this one or in settings screen it is possible to allow the user to pin a tile to the start that will be a kind of shortcut to the last published gallery.
Once inserted the secondary tile, that can or can not exist with the application tile of this news app, the same will perform a loop displaying two images from the last published gallery. Another scenario is to display one image from the two last published galleries, one in each side.
Different from the application tile that opens the first screen of the app, the secondary tile can open a specific screen content. In this case the gallery presented on the tile will open.
Notice that in remote background images, where there is no visual control of what kind of image will be displayed, it would be a nice idea to put a layer element like 173×173 pixels black shape with opacity 30%. This will prevent text readability problems like a white title over a white background image.
Another good use for a secondary tile is to give not only a shortcut function but also relevant information about the app that could draw the user attention.
The tile below was added by a project manager application. In this case it is a tile of a specific project called “Bill Website” and it displays the progress of the project (80%) and how many activities need to be done or are overdue.
Visually there is a pink Background image with a top gray area. Over the gray area is drawn blue shape by code that represents the progress of the project. Notice that it is possible to combine images, coded shapes and texts in different ways with information provided by the app.
The model above does not have a back side but it could be the application brand or another project status.
Another model could be sport teams symbols, shortcut for specific actions like adding a new content or taking a photo. The Evernote app, for example, allows the user to create new notes through a secondary tile called New note. Another nice example is the Metro Tube app where the user can create a secondary tile of favorite videos.
A nice case is the Nokia Maps that allows user to create a tile of a place. It would be nice to make future fast queries while going on a trip so see the places to be visited.
Considering that the user has already pinned an application tile to the start screen, it already has some importance to the user: he wants to access that content quickly.
In the attention battle against other tiles, the one that is visually attractive and has a good dynamic content will always be a nice invitation to the user.
In the end this text was written for that: To encourage designers and developers to make more attractive tiles.
This text condenses the principles of the Windows Phone guidelines and some months of personal experience designing application tiles. The main tip to be kept: following the guidelines, using the design best practices and providing good content are the keys to creating an effective tile.
Tiles Overview for Windows Phone
PDF presentations from Arturo Toledo and Corina Black on Windows Phone Design Day Tour