Engaging customers with Live Tiles and toast notifications (10 by 10)

News

Extraordinary Robot
Robot
Last week, we talked about how you can do three things to get your apps discovered and launched by Windows 10 customers. This week, we’d like to continue with how to increase customer engagement through some of the most loved features of Windows apps: Live Tiles and toast notifications.

If you’re already a Windows app developer, you are probably familiar with Live Tiles and toast notifications. If not, the increasing amount of Windows 10 customers is certainly a good motivator to start thinking about implementing them. Here’s what’s new:

  • Universal Action Center – After toast notifications are received, they now go into a system area called Action Center. With Windows 10, we’re bringing Action Center to Windows desktops, laptops and tablets, in addition to phones where it was already available. This means customers can get back to notifications they might have missed due to the transient nature of the initial toast and can interact with them in new ways.
  • Adaptive and interactive toast notifications – Toast notifications across Windows devices can now display interactive UI, so customers can immediately provide input and take action. This means you can capture input, and even run app code, without pulling the customer from their current context. Toast notifications can also be enriched with images in addition to text.
  • Adaptive Live Tile templates – Content on Live Tiles can now be described using simple markup language, giving you full flexibility on how content is displayed on the Live Tile. Adaptive Live Tiles also adapt to different screen density devices, so you can ensure the Live Tile looks great on any device.
  • Improved secondary tile pinning behavior – Requesting to pin a secondary tile is now done without any customer or system interaction, so your app can immediately execute additional code after the tile is pinned. This also allows you to pin multiple tiles at once and send tile notifications to them immediately after pinning.
  • Synchronizing Live Tiles and toast notifications – A new type of background task trigger, called ToastNotificationHistoryChangedTrigger, allows background tasks to be triggered when the app’s notification collection is changed by anything other than the app itself. This means you can execute code when a customer dismisses notifications in Action Center, when notifications expire, or when new notifications are pushed through Windows Push Notification Services (WNS), making it easy to keep your Live Tile up –to date.
  • Badge unification – Last, but not least: Live Tile badges are now unified across devices, so the glyphs that were previously only available on Windows are now also available on devices running Windows 10 Mobile. This also ensures your Live Tile displays consistently across devices.

Let’s take a look at how to engage customers with new notifications and Live Tiles, making sure your app gets the usage it deserves.

Sending adaptive and interactive toast notifications


In Windows 10, toast notifications can be customized to display text, images and custom interactions. Previously, sending a toast notification meant choosing from the toast template catalog, which offered limited flexibility in appearance and no options for customer input. The sound that plays when the notification appears can also be easily customized. An example of this is shown below:


<toast>
<visual>
<binding template="ToastGeneric">
<text>Sample</text>
<text>This is a simple toast notification example</text>
<image placement="AppLogoOverride" src="oneAlarm.png" />
</binding>
</visual>
<actions>
<action content="check" arguments="check" imageUri="check.png" />
<action content="cancel" arguments="cancel" />
</actions>
<audio src="ms-winsoundevent:Notification.Reminder"/>
</toast>




As mentioned, these interactive elements can be used to execute code through a background task in your app, to help customers stay in their current context while still interacting with your app. Start by declaring a new background task in the Package.appxmanifest, using the new Push notification type:



In the background task itself, you can now use the pre-defined arguments and user inputs as follows:


namespace Tasks
{
public sealed class ToastHandlerTask : IBackgroundTask
{
public void Run(IBackgroundTaskInstance taskInstance)
{
//Retrieve and consume the pre-defined
//arguments and user inputs here
var details = taskInstance.TriggerDetails as NotificationActionTriggerDetails;
var arguments = details.Arguments;
var input = details.Input.Lookup("1");
// ...
}
}
}



For more information on adaptive and interactive toast notifications, read the in-depth blog post from the team.

Implementing adaptive Live Tiles


Similar to toast notifications, Live Tiles in Windows 10 you now have the flexibility to visualize a tile through markup language. Previously this required selecting a tile template from the tile template catalog for prior versions of Windows. The adaptive nature of Live Tiles allows you to group content, so Windows can automatically adjust the amount of information shown on the Live Tile to the current device’s screen.

As an example, an app that displays e-mails on the Live Tile might display one e-mail message preview on the Live Tile on a small screen phone, but can display two e-mail message previews on larger screen phones simply by grouping the e-mails in the tile markup:


...
<binding template="TileWide" branding="nameAndLogo">
<group>
<subgroup>
<text hint-style="subtitle">Jennifer Parker</text>
<text hint-style="captionSubtle">Photos from our trip</text>
<text hint-style="captionSubtle">Check out these awesome photos I took while in New Zealand!</text>
</subgroup>
</group>

<text />

<group>
<subgroup>
<text hint-style="subtitle">Steve Bosniak</text>
<text hint-style="captionSubtle">Build 2015 Dinner</text>
<text hint-style="captionSubtle">Want to go out for dinner after Build tonight?</text>
</subgroup>
</group>
</binding>
...

Desktop Tablet High-Density Mobile


As seen in the above example, Live Tiles can now be fully defined in markup language, breaking away from the previously-needed pattern of generating an image (from XAML) and sending that to the Live Tile to display. For example, say you want a Live Tile that displays an image cropped to a circle with two large text labels below. You can simply define it like this:


...
<binding template="TileLarge" hint-textStacking="center">
<group>
<subgroup hint-weight="1"/>
<subgroup hint-weight="2">
<image src="Assets/Apps/Hipstame/hipster.jpg" hint-crop="circle"/>
</subgroup>
<subgroup hint-weight="1"/>
</group>

<text hint-style="title" hint-align="center">Hi,</text>
<text hint-style="subtitleSubtle" hint-align="center">MasterHip</text>
</binding>
...




For more information on adaptive Live Tiles and the new markup language, read the in-depth blog post from the team.

This week: spend some time on your app’s Live Tile to delight customers

Hopefully we’ve provided a quick, but comprehensive look at some of the improvements we’ve made to support you in engaging customers with Live Tiles and notifications in Windows 10. Our suggestion for the week:

  1. Think about how you can use the new Live Tile markup language in your app to create a beautiful Live Tile to delight customers
  2. If you display information on your Tile that can be grouped, make sure you utilize adaptive Live Tiles to cater to customers with high screen density devices
  3. Make use of the new interactive toast notification capabilities to expand your current notifications to provide additional information and support customer interaction

Be sure to head on over to DVLUP for the “It’s ALIVE!!!!!!” challenge, so you can claim points and XP for updating your apps, in addition to boosting customer engagement. Also, check out the full Windows 10 by 10 development series schedule for the 10 topics we have and will be covering in the series.

Finally, below you’ll find some additional resources to dive into this week’s topic. We’re looking forward to hearing what you’ll build via @WindowsDev and #Win10x10.


Continue reading...
 
Back
Top