Hi and welcome to the fifth part of our exploration of developer updates in Windows 8. We’ve covered a lot of ground already, starting with our tour of XAML improvements (together with Andrea Boschin’s articles), going through some interesting improvements in WinRT and also taking a look at some important changes in the user experience. The latter was the topic of the 4th article in this series. In this part, we are going to continue by looking at some experience-related changes that we have in Windows 8.1.
We are going to start by looking at the new tile sizes and we’ll also briefly look at the new UX guidelines issued by Microsoft. Let’s get started straight away!
New Tiles sizes
In the entire Windows 8 experience, the Start screen is a central aspect. It allows us to pin tiles and this way, it offers the user a customizable way of changing how it behaves. On that Start screen, the tiles play a very important role. The tiles are the ways of interacting with the Start screen. We have already covered here at SilverlightShow the tiles for Windows 8 already quite a lot. Tiles are much more than a shortcut on your desktop. They allow the user customize the Start screen by pinning those tiles which are important for him and often, give a good ‘tile experience’. Since the tile is more than just a way to open an app, it’s important that the developer makes good use of the tile. By showing updates on the tile (local or via push notifications), the tile can lure the user back into the app by showing interesting content. This way, the tile can be considered an extension of the application.
In Windows 8, we were limited to using 2 tile sizes. While those were OK, they didn’t allow fine-grained control over the Start screen, certainly if you compared to the experience we’re getting on Windows Phone. Below, you can see a screenshot of the default Windows 8 experience. Only 2 types of tiles are supported: the square and the wide tile. The square tile was 150x150 pixels, the wide tile was 310x150 pixels.
With Windows 8.1, Microsoft is introducing two more tile sizes, so we now have 4 in total. The extra’s we’re getting are the small (70x70 pixels) and the large tile (310x310 pixels). This gives the end-user more control on how he wants to organize his Start screen. Below is another screenshot, this time of Windows 8.1. This screen features all tile sizes.
Since now 3 out of 4 tile sizes are square, Microsoft has renamed the original square tile size to medium. So, to conclude, we now have small, medium, large and wide tiles available. This of course also has a consequence for the live tile templates, but more on that a little further.
Some other things have changed with the new tiles as well. In Windows 8, we had to include a square tile but when we included a wide tile, the wide tile was pinned by default to the Start screen. In Windows 8.1, we can now specify that you want either the wide or the square tile to be used. You make this selection in the application manifest. Note you can’t set the small or the large as default pin size. Also note that Windows 8.1 doesn’t add the tile by default to the Start screen (which is a great improvement).
In our assets, we must include as the bare minimum the square and the small tile. If you omit the small tile assets, your app will still build and run, since Windows will create the small tile from the assets of the square tile.
A more important change is the name of the live tile templates. When we update a tile, we basically are sending a piece of XML (the tile template). Since the square tile is no longer named “square”, the templates have changed names as well. For example, the commonly used TileSquareImage is now renamed to TileSquare150x150Image (so including the size since we have 3 which are square).
If you’re just updating the tiles from the application, you won’t have a lot of problems (you can use the updated version of the NotificationExtensions library) to work with these new tile template names. But if you’re working with a push notification that pushes both to Windows 8 and Windows 8.1 clients, you may need to change a few things. If you think about it, it’s quite logical: the new names are only known by 8.1. By default, Windows 8 would ignore the new names, thinking they aren’t valid. In this case, what you need to do is including a fallback mechanism. What you need to do, is including a version=2 and a fallback name. The latter indicates the old name the template was known by, therefore letting Windows 8 understand the template as well. If you’re sending a tile update with a large tile update, that won’t do a lot since Windows 8 didn’t have those tiles yet.
Let’s take a look at a sample. We are going to use the NotificationsExtensions library in order not having to write the XML but using the object model around the templates. Below is a screenshot of the generated XML in the application.
Assume that for this application, the developer wants to give the user the choice to either create a medium (square150x150), wide (310x150) and a large (310x310) tile update. If we want to make sure that just any of these 3 templates will receive the update, we need to include them all in the tile update (if we omit one or more, only when the user has the application pinned in the same tile size, the tile will update). Also note that if the user has the application pinned in the small tile size, no live tile update will be received (small tiles don’t support live tile updates, they only support badge updates). That’s why we never have to include that template.
In the sample, we have created a reference to the NotificationsExtensions library.
Once we have this reference in place, we can start using the object model around the tiles. In the code below, we are going to create an update for the large tile using the ITileSquare310x310Text05 template. We also want the update to appear if the user has the app pinned using a wide tile; in this case, we’ll use the ITileWide310x150Text03 template. And to be complete, we also need to specify what we want to show if the app is pinned with the square tile: we use the ITileSquare150x150Text04 for this.
1: string userMessage = TileTextTextBox.Text;
2: ITileSquare310x310Text05 tileContent =
3: TileContentFactory.CreateTileSquare310x310Text05();
4: tileContent.TextHeading.Text = userMessage;
5:
6: ITileWide310x150Text03 wide310x150Content =
7: TileContentFactory.CreateTileWide310x150Text03();
8: wide310x150Content.TextHeadingWrap.Text = userMessage;
9:
10: ITileSquare150x150Text04 square150x150Content =
11: TileContentFactory.CreateTileSquare150x150Text04();
12: square150x150Content.TextBodyWrap.Text = userMessage;
13: wide310x150Content.Square150x150Content = square150x150Content;
14:
15: tileContent.Wide310x150Content = wide310x150Content;
16:
17: TileUpdateManager.CreateTileUpdaterForApplication().
18: Update(tileContent.CreateNotification());
19:
20: ResultTextBox.Text = tileContent.GetContent();
Note that we’re basically chaining the tile updates. This results in the following XML to be sent to the tile:
1: <tile>
2: <visual version='2'>
3: <binding template='TileSquare150x150Text04' fallback='TileSquareText04'>
4: <text id='1'>New article on SilverlightShow!</text>
5: </binding>
6: <binding template='TileWide310x150Text03' fallback='TileWideText03'>
7: <text id='1'>New article on SilverlightShow!</text>
8: </binding>
9: <binding template='TileSquare310x310Text05'>
10: <text id='1'>New article on SilverlightShow!</text>
11: </binding>
12: </visual>
13: </tile>
Note the fallback attribute on each of the binding elements: this way, a Windows 8 installation that would receive this same XML would still be able to update its tile. Also note that the version is now 2.
If you want a visual example of all tile templates that are now available in Windows 8.1, take a look at http://msdn.microsoft.com/en-us/library/windows/apps/hh761491.aspx.
More chrome
To finish this article, let’s take a look at the general UX guidelines. I’m not going to take you through all of these guidelines, they can be found at http://msdn.microsoft.com/en-US/library/windows/apps/hh779072.
However, I do want to put some emphasis on some striking changes that we see in the built-in applications such as the Music or the Health and Fitness app. One of the biggest design principles in Windows 8 was the Content Before Chrome principle. While this still stands in Windows 8, there are some remarkable changes here. Below you can see a screenshot of the XBOX Music app. What we see on the left here, is pure navigation. Those are tabs and in fact, the entire application is now basically a tabbed interface. Also, not that right below the Collection title, we have a couple of buttons, which also do some form of navigation.
In the Health and Fitness application, we see the same trend.
In the screenshot above, all those buttons basically do nothing but navigation. They are content, so they adhere to the principle but it’s interesting to see that those are controls, directly in the app’s UI that perform some action. Previously, Microsoft would have recommended to hide those, perhaps in the app bar. Now, they are visible directly from the application.
Is this a good thing? Definitely! Microsoft lets the design guidelines for Windows 8 evolve, based on feedback. With Windows 8.1, we’re getting more options this way to create more compelling user interfaces, which can only be a benefit for the end user!
Summary
In this article, we’ve looked at some more user experience changes coming with Windows 8.1. Stay tuned for the last article on the tooling using Visual Studio and Blend!
About the author
Gill Cleeren is Microsoft Regional Director, Silverlight MVP, Pluralsight trainer and Telerik MVP. He lives in Belgium where he works as .NET architect at Ordina. Gill has given many sessions, webcasts and trainings on new as well as existing technologies, such as Silverlight, ASP.NET and WPF at conferences including TechEd, TechDays, DevDays, NDC Oslo, SQL Server Saturday Switzerland, Silverlight Roadshow in Sweden, Telerik RoadShow UK… Gill has written 2 books: “Silverlight 4 Data and Services Cookbook” and Silverlight 5 Data and Services Cookbook and is author of many articles for magazines and websites. You can find his blog at www.snowball.be. Twitter: @gillcleeren