December 2014

Volume 29 Number 12

Modern Apps : Build a Better UX with Live Tiles

Rachel Appel | December 2014

Live tiles are an effective way to introduce your app. You can display information about your app without requiring a user to enter the app itself. As part of the UX feature of the Windows platform, live tiles should be alluring and inviting, filled with relevant and click-worthy content.

Live tiles are your chance to make a great first impression. The user doesn’t care about the code or any technical details. All he cares about is the experience that he’ll have using your app. Is it easy to use? Is it intuitive? These things are more important to the user than what’s under the hood.

Live tiles are the entryway to your app, that first impression that tells the user about your app’s usability. Everyone who uses your app will see and use your live tile before any other part of the app. It doesn’t matter whether it’s to launch the app or just snack on tidbits of data you display in them. The live tile is how you can make that all-important first impression.

This means you had better ensure your tiles and the splash screen are enticing and attractive. That’s not to say you can ignore the rest of the app, but you’ll never get users to that point without leading off with some good-looking tiles. As you probably imagine, you can update live tiles with fresh information periodically, via push notifications. You can even extend notifications to the lock screen by adding badges to show app-related information.

Figure 1 illustrates the four styles of live tiles available on Windows tablets and desktops: large, wide, medium and small. The images in Figure 1 show how The Weather Channel has capitalized on a clean design when the tiles aren’t displaying info. When they are, you see rich graphics and the tiles display only the most important information. In this case, it’s the current weather and any severe storm warnings.

Figure 1 The Four Sizes of Live Tiles—Large, Wide, Medium and Small

A better UX will lead to better ratings in the store and better user satisfaction. Live tiles with your branding are the best way to differentiate your app from others. Figure 1 demonstrates how tiles can be part of a great experience. Users don’t need to open the app to see the current weather. On the large primary tile, they can set up to three cities to track weather, and then track one city at a time on the others. That’s squeezing some serious data into just 310x310 pixels, or an even smaller playing field.

How Live Tile Graphics Work

Now that I’ve explained why live tiles are important, it’s time to understand how graphics work with them. Fortunately, Microsoft did a great job creating an easy-to-follow developer-friendly UX paradigm with a set of design principles that works well on tablets, phones and smaller, touch-first devices. You can publish apps that look good without hiring a designer. That’s not to say you should eschew designers altogether. Some apps, especially games, have complicated graphics that require a designer’s input.

This article will cover some live tile designs that non-designing developers can easily accomplish. As part of that set of principles, live tiles enable the user to consume data from your app without actually interacting with your app. This is the height of convenience, as the user can quickly scan the home screen of his device to get relevant information from multiple sources in a flash.

There are two kinds of graphics in a modern app: user-generated and app graphics. Family vacation or professional photos are considered user-generated. The images within live tiles or on the app bar are app graphics. When constructing tiles, you can use either kind to convey information. Visual Studio includes templates that follow the Microsoft modern design that will help you achieve a professional presentation. This means everything you need is ready in the package.appxmanifest file. All you need to do is provide the graphics themselves in the correct size.

It’s important to have proper branding for tiles that aren’t live yet. As you can see in Figure 2, the tiles have a simple design with a quote balloon and the initials for Quote of the Day (QotD). It’s easy to find and determine what app this is with its clean design and bright red color. For now, they’re standard, static tiles. That will change when you start sending updates.

Figure 2 The Live Tiles for the Quote of the Day App

Using graphics in a Windows Store app or Windows Phone Store app requires several images for the following assets:

• Live tiles: The large or small squares or rectangles the user taps or clicks to launch an app. These often contain images or text.
• Badges: Small icons or glyphs on the live tiles that denote app status. Figure 1 shows a badge in both the large and small tiles.
• Splash screen: The introductory screen that displays just before the app loads. Frequently, this screen contains a logo or graphic.
• In-app tiles: These tiles display app data and live in a GridView or ListView. They look and feel like live tiles on the Windows Start page.

These images work best using the .png and .jpg formats. Each Windows Store app and Windows Phone Store app can contain many different sizes of these image assets. You can configure which images belong to which tile by editing the project’s package manifest. The package manifest is a file where you can set up all app-specific settings, such as the name, version number, graphic assets and capabilities declarations. Figure 3 shows the logos you define in the package.appxmanifest in a Windows Store app.

Figure 3 Configure the Tile Graphics in the App’s Package.appxmanifest File

You should supply at least one graphic for each of the following asset types, or the app will show their default icons instead:

• Square 70x70 Logo: A 70x70 pixel image
• Square 150x150 Logo: A 150x150 pixel image
• Wide 310x150 Logo: A 310x150 pixel image
• Square 310x310 Logo: A 310x310 pixel image
• Square 30x30 Logo: A 30x30 pixel image

You can—and should—supply scaled graphics for these tile classes. The scaled assets for the items in Figure 3 are at 80 percent, 100 percent, 140 percent and 180 percent. The bottom of Figure 3 lists the precise dimensions required for the scaled assets. Note that these are just for the Windows Store apps. Windows Phone Store app projects have slightly different sets of assets and scales that work for the smaller device types. Both Windows Store and Windows Phone Store apps have the following logo and Splash screen configurations:

• Store logo: The logo displayed in the store.
• Badge logo: A small icon that can display on the lock screen or inside existing tiles.
• Splash screen: A full screen page usually containing a logo or introductory text shown at app launch.

There are many versions of these images because of the need to scale them to size correctly on the various screen configurations, from desktop to mobile to tablet and others. A 150x150 pixel image doesn’t have to stretch too far before it starts to look pixelated and blurry.

You can create graphics for tiles using any photo or graphics editing program. With these tools, it’s not difficult to create a logo like Figure 2 that’s simple yet noticeable. There are many stock graphics also available for use in apps.

Code Tiles from Templates

Tiles would be little more than plain icons if not for their ability to display different images and text at different times. It’s these regular updates that make them live. You can update tiles with code or integrate them with push notifications. If you use push, you can update tiles using background tasks that fit into the process lifecycle. This way your app doesn’t need to be running, per se, yet some code can run at predetermined intervals to cycle through five different items. For background information on process lifecycle management, see “The Windows Store App Lifecycle” at msdn.microsoft.com/magazine/jj660301.

The code in Figure 4 performs a simple tile update to generate the tiles in Figure 5, without push notifications. It first obtains a TileUpdater object from calling the static CreateTileUpdaterForApplication of the TileUpdateManager class. Once that’s done, the code moves onto fetching a predefined tile template by passing in one of the TileTemplateType enum options to the GetTemplateContent method of the TileManager class.

Figure 4 Simple Tile Update Without Push Notifications

var updater = TileUpdateManager.CreateTileUpdaterForApplication();
var square150x150 =
  TileUpdateManager.GetTemplateContent(
    TileTemplateType.TileSquare150x150Text04);
square150x150.GetElementsByTagName("text")[0].InnerText =
  "Only in the darkness can you see the stars. –Dr. Martin Luther King, Jr.";
updater.Update(new TileNotification(square150x150));
var wide310x150 =
  TileUpdateManager.GetTemplateContent(
    TileTemplateType.TileWide310x150SmallImageAndText03);
wide310x150.GetElementsByTagName("text")[0].InnerText =
  "We live in a society exquisitely dependent on science and
  technology, in which hardly anyone knows anything about
  science and technology. - Carl Sagan";
((XmlElement)wide310x150.GetElementsByTagName("image")[0]).SetAttribute("src",
  "ms-appx:///Assets/qotd310x150-sm.png");
updater.Update(new TileNotification(wide310x150));
var large310x310 =
  TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquare310x310TextList02);
large310x310.GetElementsByTagName("text")[0].InnerText =
  "Let us pick up our books and our pens, they are the most powerful
  weapons. -Malala Yousafzai";
large310x310.GetElementsByTagName("text")[1].InnerText =
  "Never give up, for that is just the place and time that the tide will turn.
  -Harriet Beecher Stowe";
large310x310.GetElementsByTagName("text")[2].InnerText =
  "I've learned that people will forget what you said, people
  will forget what you did, but people will never forget
  how you made them feel. -Maya Angelou";
updater.Update(new TileNotification(large310x310));

Figure 5 Several of the Tile Sizes You Can Use

Accessing the innerText attribute or calling Set­Attribute lets the code work with the tile. That’s because an HTML template is what describes how a tile looks and feels. Fortunately, XAML developers don’t need to learn a lot of HTML just to make a tile. It does look like HTML, after all. However, you should know about elements like the HTML here that defines the TileSquare150x150Text04 template.

<tile>
  <visual version="2">
    <binding template="TileSquare150x150Text04" >
      <image id="1" src=""/>
      <text id="1"></text>
    </binding>
  </visual>
</tile>

You can’t just whip up any old tile out of any old dimensions, and you don’t write the template HTML yourself. Instead, there are several templates from which you can choose that let you edit the basic tile shapes, icons and messages. There’s a listing of these templates for both Windows 8.1 and Windows Phone 8.1, along with code samples at bit.ly/1oqwQd6.

Pick one of the templates from the list and use it in your code. In Figure 4, the call to GetTemplateContent is what fetches this pre-defined template. You can choose from any of the numerous templates available.

Up to this point, the code samples have dealt with simply updating a tile once, on the spot, by executing some code. If you want to add some extra pizazz, update tiles on a periodic basis with fresh information. You can do this by adding background tasks and push notes to your app. Because this article’s focus is more UX-related, you might want to view the video at bit.ly/1vH6J2p to learn how to update a tile from a background task.

Use Secondary Tiles for a First-Class UX

Users occasionally want to pin some piece of data to the Start screen. Airline boarding passes, an eBook, or specific stock ticker symbols are all good examples of things users want to pin to their screen. The way to do that in Windows 8.1 or Windows Phone 8.1 is with secondary tiles. Secondary tiles make it easy for the user to customize her app, which translates to higher ratings in the store.

There’s a concept of deep linking in the app world. This means a user navigates a few times within an app, then pins it to link to it later. Here are several uses for secondary tiles:

• Weather for a specific city
• Travel itineraries for a specific trip
• Saved games
• Specific movies to start or resume
• A friend’s contact information
• Your favorite pictures
• Custom alarms

Keep in mind these tiles are secondary because you already have a primary live tile. App-wide updates should go in the primary tile, though there aren’t any hard-and-fast rules there. The types of particular data listed for secondary tiles wouldn’t usually make sense in the main tile. Users typically launch an app, and then go to its start page. Secondary tiles let users launch an app and go directly to a specific part of the app. The term for this is “deep linking.” As a rule of thumb, use primary tiles to launch to the app’s Start screen and secondary tiles for specific data details.

The following code creates and displays a secondary tile:

private void AppBarButton_Click(object sender, RoutedEventArgs e)
{
  string displayName = "Secondary tile";          
  string tileActivationArguments = "Look both ways before crossing the street";
  System.Uri square150x150Logo = 
    new System.Uri("ms-appx:///Assets/Logo.scale-100.png");
  SecondaryTile secondaryTile = new SecondaryTile("Pinned",
    displayName,
    tileActivationArguments,
    square150x150Logo,
    TileSize.Square150x150);
}

When calling the SecondaryTile constructor, pass in all the information you need to populate the tile, such as the name, arguments, size and which image to use. Everything you need is right there in the call, and the constructor is overloaded, so you have many choices.

Secondary tiles are similar to standard tiles, but they allow that deep linking to content or a specific part of the app. The more user-friendly you make both sets of tiles, the better your reviews in the store. So consider using secondary tiles if your app contains specific data that’s useful to view from the Windows Start page.

A Square Conclusion

When a user doesn’t have to do anything to interact with your app, and yet receives useful information, that’s a win. The ratings in the app store will reflect that. Even developers who aren’t big into graphic design can still create good-looking and useful apps.

Remember to create graphics for as many scaled sizes as possible, and Windows will deliver the best graphic depending on the device. The better the UX, the better the rating in the app store. And this translates directly to more downloads.

Rachel Appel is a consultant, author, mentor and former Microsoft employee with more than 20 years of experience in the IT industry. She speaks at top industry conferences such as Visual Studio Live!, DevConnections, MIX and more. Her expertise lies within developing solutions that align business and technology focusing on the Microsoft dev stack and open Web. For more about Appel, visit her Web site at rachelappel.com.

Thanks to the following Microsoft technical expert for reviewing this article: Frank La Vigne