Search

Wednesday, March 27, 2013

Leveraging Live Tiles in your Windows Phone 8 App

There’s no question that Live Tiles are one of the marquee features of Windows Phone 8.  Live Tiles are a clear differentiator to the current UIs of iOS and Android.  They give the user instant knowledge to what’s going on and enables them to setup their home screen with a configuration that matches his/her busy life. 

As a developer, using this innovative technology can be difficult at first.  We aren’t used to promoting knowledge in this manner and because it’s new, we may not know exactly what and how to use it.  So I’ll take a few moments to explain what a developer can and can’t do:

Features:
 
1.  You have 3 different sizes of Live Tiles.  See below. 
 
Size 2x4
 

 
Size 2x2
 
 
Size 1x1

 

Given these three sizes, it's important to know that your app may be running in any one of these modes at any given time. In my example, the stock photos app supports all three sizes quite nicely.  Being a photo application that displays my recent pictures, it makes sense that users will typically set it up in a 2x4 or 2x2 configuration.  My Night Time Clock app on the other hand makes sense to be setup in a 1x1 or 2x2 configuration. 

2.  Now that you are aware of all the various configurations, you need to decide what information you want to present when in each mode.  One thing to note, if your app is sized to 1x1, your options are minimal and standard implementations only show a number next to the app icon.  If a number/counter doesn't apply then you shouldn't force anything else unless you present information appropriately given the small size.

There are two primary methods (there is a third that I'll talk about soon) of showing information while using Live Tiles.  You can update a counter on a Live Tile like the (great) Weave application does.  This is a very nice and simple feature to notify your users that something has changed.  It doesn't take up a lot of space while giving you a feel that something new awaits the user.
 
 
 
The second option involves a second Live Tile, that can contain up to 9 images.  Live Tiles are actually double sided and allows the developer to create alternate content that's refreshed every hour.  This is a local refresh that doesn't require an internet connection, which is nice for users on restricted data plans.  If you want your application to update more often than an hour, like a clock application, you need to incorporate option 3 below. 
 
3.  The third option requires some web infrastructure and gives the developer push notifications that can be presented to the user.  This method offers the most flexibility and enables dynamic content to be displayed on the tile. 
 
Applications that use this method can be weather, stock, social networking, sports, news and other apps.  The Weave app (above) is using both the numeric counter and the push notifications.  The image of Wolverine is pushed from a web server.
 
Hopefully this guide will serve as a starting point to building incredible WinPh8 applications.  If you are looking for more information, you can browse the Windows Phone Developer documentation here.
 
 


No comments:

Post a Comment