One of the more distinctive features of Windows Phone is the Start screen – which includes nice big live tiles that you can add and organize however you prefer. Up until the latest release, pinned items have been limited to applications, contacts, websites and other native or system level items.
With the latest release, a new feature has been added for app developers called Secondary Tiles. The new tiles allow users to create shortcuts on the Start screen to a deep location (at least one-level beyond the homepage) of an application.
This is a big win for app users as it allows them quick access to something they really care about. And it is a big win for developers, as a unique feature of Windows Phone and as a way for their app to become even more valuable and loved by the user.
So how do you design your app with this feature in mind?
This is a design challenge I recently worked through and not finding much documentation on the topic, I’ve decided to share my thoughts.
Quick Tiles Overview
Before there were secondary tiles, there was the primary tile, formally known as the Application Tile. The job of this tile is simple – open the application to the home page, defined by the default task in your WMAppManifest.xml file. Even though they may not currently be pinned to the Start screen, they always exist and are accessible as the first entry in the ShellTile.ActiveTiles collection.
Secondary Tiles are created via code in response to user interaction (e.g. click of a “Pin to Start” button). When created the tiles are given a unique NavigationUri, reflecting the purpose of the tile to link to a specific place or thing within the application.
Both types of tiles have six properties – Title, BackgroundImage, Count, BackTitle, BackBackgroundImage, BackContent. The first three should be obvious in functionality.
The second three properties once set will cause the tile to flip, as though you were looking at two sides of the tile in space. This is a great way to get the user’s attention, but could be abused by over usage. For an avant-garde usage of flipping tiles check out Flipping Tiles.
For more information, check out the Tiles Overview on MSDN.
Just a Slice of the App
Now that we have the basics on the table, what does this mean for design?
Think of a Pinned App as a manifestation of the “Be ‘On the Go’ Capable” Metro Principle. By pinning a specific single unit (location, person, book, etc) to the Start screen, the user has less typing, less navigation and any other type of data entry to make it to their favorite or valuable object.
Since the intention is to focus on the single object, this gives you a license to only expose the object and the segment of the app that deals with the object. Let’s take a look at a real example to explain the idea and see it in action.
The People Hub is used to expose all of your contacts information and statuses. Its an easy way to get the most recent statuses or search for a contact in order to get in touch with them. I can select a specific contact, check out their info and hit Back to return to the People Hub.
Now, I have this friend named Pinto Snows who like I to keep in close touch with. I can pin him to my Start screen, so I have quick access to his contact info and status by selecting him via his very own tile. If I close the app, I return to the Start screen and not the People Hub. For one thing, I came from the Start screen so that’s where I expect to return. Secondly, I only wanted info about him, I don’t need to look up anyone else.
This is a very “on the go” interaction.
There is no need to go to the homepage of the app from here, this is just a slice of the app.
Development and Implementation
When developing the app, this “slicing” needs to be taken into consideration.
The page that loads from a Secondary Tile must be self-sufficient. It can’t depend on data being loaded from the home page or some other page. There are two simple ways to detect whether a page has been opened via a Secondary Tile:
NavigationContext.QueryString – the Uri for secondary tiles should be unique and ideally pass an ID in the QueryString. Depending on how you have developed an app, this may be enough to detect the difference. If you are already using QueryStrings to pass information, just use a unique parameter when setting the Uri for the SecondaryTile, such as “pinned=true”.
- NavigationService.CanGoBack – since the page is normally loaded by navigating within your app, this property will be true. In a pinned situation where this page is loaded as the first page, the property will be false.
The biggest difference here is that when the user hits the Back button they are leaving your app, unlike a non-pinned situation where they go up one-level or to the homepage. The good news is you have the previously mentioned ways to detect the situation as well as the normal application-level events to save state and data if needed.
For a good example of a third party application following this pattern, check out 4th and Mayor pictured to the right. The first image shows the app and a specific location (below Settings) pinned to Start. The second image shows the location opened via the pinned tile.
One more suggestion (which is done in People, not in 4th and Mayor) is to disable the Pin button if the user has already pinned that object to Start. You can easily check for the existence of the pinned tile be querying the ShellTile.ActiveTiles collection and comparing NavigationUri values.