An Engaging and Inviting Live Tile
An Engaging and Inviting Live Tile
Join the DZone community and get the full member experience.Join For Free
Curator's note: There are images that go along with this tutorial. If you want to see them, click the source link
If you are developing an application or game for Windows 8, making sure you have an engaging, inviting, or informative live tile is an absolute must. I am always surprised when I see the amount of effort a developer puts into their application, but then neglects to spend any time on their live tile. A live tile is a unique way to engage the consumer while they are not using your application. It is not only a way to entertain, but done right, it will drive them back into your application or game time and time again. In this series, we will discuss the many aspects of Live Tiles, from what should be placed on your live tile, to utilizing Azure and Push Notifications to send data to your application.
- Creating A Live Tile that is Engaging and Inviting (This Post)
- Working with Live Tiles Locally
- Rotating Live Tiles to keep interst
- Modifying Live Tiles in a Background Process
- Using Azure and Push Notifications with Live Tiles
Getting the Shelf Space
In almost every business endeavor, placement is key. Take a supermarket for instance, if you walk through the aisles, you will notice that the “Big Brands” are located on the shelves that are eye-level. This is the prime placement for consumers. As a shopper, your eyes will naturally go to this level and a majority of you will buy the items located there. This is the same for any of the app store / marketplaces for your devices. Most consumers will buy one of the top 25 apps in any of the lists (eye level).
This holds true for placement on your Windows 8 start screen. You are more than likely to use applications or games that are on the initial view of your start screen. And since the consumer is the one that decides on this placement, as opposed to the supermarket, there is no way you can pay to be in this prime real estate. To be in this space, you must Engage, Invite, or Entertain the user.
Give them just enough
Although technically speaking, when you include an image for your tile when you create your project, it is not LIVE unless you make it live. In the next post, Working With Live Tiles Locally, we will discuss the HOW to add data to your tile, in this post, we are going to discuss the WHAT you should put on your live tile. The dictionary defines Engage as : To attract and hold the attention of; engross. So to attract the attention of the user, you first need to decide which tile template you would like to use. There are 45 different types, which you can find here http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.notifications.tiletemplatetype(v=VS.85).aspx
The layout you select depends on the information you want to deliver. From a full image, to all text and 43 more layouts in between, you have the ability to customize it as you see fit.
Your live tile should say “Click Me”. Not in the literal sense of course, but the information you give the user should float on the line of giving them enough information to pique their interest, but not too much so that they never go inside your application.
Take the Weather application for example, if we look at its Live Tile we can see the temperature, whether or not it is going to rain, if it is cloudy, and the highs and lows for the day. Unless I need a weeklong forecast or the weather in a location I may be traveling to, I will not be going into the Weather application too often.
On the other hand, the News application shows me a picture with just the title of a story. If that story piques my interest, then it serves the purpose of engaging, and Inviting me back into the application. It is a fine line between the two of them, so be aware of how much information you a presenting on your tile.
SPECIAL NOTE: The user must go into your application at least once in order to see the “LIVE” tile. Otherwise they will only see the image that you packaged with your application. This is because the application needs to run at least once to be able to call the tile API either locally or from push notifications.
Change the Scenery
In addition to inviting them into your application, you want to make sure that the information on your live tile does not become static. While it may engage them once, fresh content is important to keep them engaged. You can rotate up to 5 different tiles at a time.
For games, you will want to remind them to keep playing the game. You can remind them of games in progress, achievements they have won, or if it is a turn by turn game, you can alert them that it is now their turn. For example, Minesweeper below shows the last achievement I obtained. This could also be used to show the next level to try for.
Solitaire, on the other hand, shows the user’s percentage of wins and losses. Although I would be careful with this one, since it might discourage a bad player from having the live tile on their main start screen, thus removing you from the prime real estate. This goes for leaderboards as well. If a player is not in the top 10, do they really want to see who is? Individual high scores and achievements are better motivators, you can even entice them by adding text to the tile like “Come and try to beat your high score of :” <High Score Here>. Remember, this is your chance to be creative.
I think the CW application, on the other hand, does a great job of giving relevant information to the user. This not only helps them with driving people into the application, but also reminds them to turn on their TV and watch the program.
For the CW application, it is quite easy to decide what to show. If someone downloads the application, it can probably be assumed that they watch the channel, but for something like the sports application, it may be hard to pinpoint the interest of the user (Unless you ask for it). In that case, having multiple tiles show different information lets you capture a wide array of interests. You have the ability to rotate up to five different tiles.
You will notice in the sports application, it rotates between and image and just text. That transition from text to image is an eye-catcher. If you are looking at the screen you can’t help but notice it. Keep that in mind while you are designing your tile.
I like to describe the Windows 8 Start Screen as a Glanceable Architecture. Be careful to make sure that your information can be viewed at a glance. As you can see below, two of the live tiles do it right, but the third one is a mess. Not only does it have an image of text (???) but the text below it is an almost unreadable URL. Be bold in your live tiles. Give as much impact in as little text as possible. The image should draw them to read the text.
The one thing that might not be apparent in all of the examples above, is that they ROTATE. This is important, the rotation causes change, and the change draws the eye. But subtlety is the key. We are not talking about the glitter fueled pages of the old MySpace, but gracefully attracting the attention of the user.
If you looked at the chart of the 45 different templates available, you saw that there were two standard sizes. a 150 X 150 Logo and a 310 X 150 Wide Logo.
As we just noted above, if the user places you in the beginning of their start screen, you want to take advantage of this by presenting as much information as possible. By default, if you include a Wide Logo in your application by providing an image in your application_manifest file, when your application or game is installed, it will place the Wide Logo on the start screen (at the end).
The wider tile allows you to show more information. It is equally important to understand that the user has the ability to change the default live tile to the smaller live tile, in addition to turning off the live tile or unpinning it completely.
It is up to you as the developer to make sure that you create live content for the tiles in BOTH sizes. As you can see in the images below, the Solitaire game continues to change the image, although they decided to drop the statistics. This most likely is due to the smaller real estate, which makes the amount of data they wanted to show difficult to read. Remember, you want them to be able to see it in a glance.
In contrast, the StumbleUpon application did not implement a smaller live tile, while the CW did, showing the next important show.
Update From the background
To achieve the fluidity that comes from constantly changing information on your live tile, it is highly recommended that you update your live tile from outside your application. In other words, change the tile while the user is NOT using your application or game, to GET them to use your application or game. In the next few posts in this series, I will show you how to do this.
Published at DZone with permission of Daniel Egan , DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.