Toast Notification and Action Center Overview for Windows 10

  • Article

This topic discusses the concepts and terminology surrounding toast notifications.

A toast notification can originate either from local APIs or from the cloud via a push service – WNS (Windows Notification Service). For more information on how to send toast notifications, please see Quickstart: Sending a local toast notification and handling activations from it (Windows 10).

Toast notifications and tile notifications are two separate but closely related concepts in Windows. In order to provide the best user experience, it is recommended to think about toast, tile and badge notifications holistically when designing your app’s notification experience. Also, the process of raising a toast notification is essentially the same as sending a tile notification. To see more information on tiles, please check out tile-related posts in the same blog – Tiles and Toasts.  

Toast notifications – what are they for?

Toast notifications allows your app to inform the users about relevant information and timely events that they should see and take action upon inside your app, such as a new instant message, a new friend request, breaking news, or a calendar event. When the user “chases” the notification (by tapping or clicking on the toast to activate the app), the app should navigate the user to the page with the right context.

Here is an example of the life-cycle of a standard toast notification that informs the user about a new incoming instant message from MyChatApp on Windows Mobile:

  1. MyChatApp server gets a new message from Michael to Sophie.
  2. MyChatApp server creates a toast notification, and sends it to Sophie’s device with MyChatApp client, via Windows push service.
  3. Sophie sees the toast notification pop up on her screen, and clicks on it.
  4. MyChatApp launches on Sophie’s phone, and takes her directly to the conversation with Michael.
  5. Sophie is now in the right context and is ready to take action – in this case, reply to Michael to confirm their dinner plan.
  6. This toast notification has served its purpose, and thus ended its life-cycle (removed by the system when Sophie tapped on it in step 3 above).

Toast notification layout

For Windows 10 UWP (Universal Windows Platform) apps, being adaptive is a key aspect of toast and tile notifications. A universal app can use the same code to create notifications for different types of devices, and the system will take care of rendering the notification that best fits the form factor, visual affordance, and interaction method of each type of device. It is still recommended that app designers and developers to be mindful about how much detail the user should see on each targeted device, for your particular scenarios.

To find out more about how a developer can create legacy or new adaptive toast notifications with code, please see this blog post – Adaptive and interactive toast notifications for Windows 10. For tiles, please see Adaptive Tile Templates - Schema and Documentation.

The basics

A toast notification can contain text, images, and custom actions. 

On Windows Mobile, a toast notification appears as a banner at the top of the screen. When a toast pops up, it shows in collapsed mode that displays the minimal content of a thumbnail image and up to 2 lines of texts. User can hold on the handle bar at the bottom of the toast and drag it down to see the toast notification in expanded mode which unveils the full message, an inline image, and actions, if there are any. Some specific scenario-based toast notifications are pre-expanded such as alarm/reminder notifications and incoming call notifications, which will be explained further below.

On Windows Desktop, a toast notification appears in the lower-right corner of your screen (bottom-left corner for right-to-left (RTL) languages). Also, all toast notifications are pre-expanded due to the visual affordance of the larger screen.

[Insert image example of pre-expanded toast on desktop]

Standard toast notification

A standard toast notification is a toast notification that contains the very basic elements including text and images, but has no actions for further interactivities.

Below is an example of a standard toast. The app logo shows up on the top left corner by default, but a custom image (for example, a thumbnail picture of a person) can be used to replace the app logo. A toast can provide multiple lines of text; the first text will be treated as a title (visually more emphasized), and the remaining will be treated as the message body. A toast can also contain an inline image. Find out more about how these translate into code in this blog post – Adaptive and interactive toast notifications for Windows 10.

Interactive toast notification

In Windows 10, toast notifications supports optional actions and input controls.

An action can optionally launch the app to a different context than the body of the notification, launch another app, or allow the app to perform tasks in the background. Adding actions allows the user to interact with the incoming notification directly without launching into the app – by doing so, the user can take action on toast notifications without navigating away from the current task, and can also be more engaged with notifications which were previously ignored by the user in order to avoid context switching.

A toast notification can contain up to 1 input control and 3 actions (except incoming call notifications which allow up to 5 actions). Each action can have custom text and an optional icon. Input controls include text input and selection input. On Mobile, actions are only shown once the toast is expanded (except for pre-expanded scenario-based notifications as described in the section below).

The designers and developers need to be mindful about designing an interactive toast notification, so that:

  • All the text content on actions can properly fit and show on the targeted device to provide a complete experience;
  • The actions are important and intuitive, instead of being too complex or ambiguous.

Find out more about how these translate to code in this blog post – Adaptive and interactive toast notifications for Windows 10.

Scenario-based toast notification

In Windows 10, an app can send several types of special scenario-based toast notifications.

  • Alarm
  • Reminder
  • Incoming call

These types of toast notifications look visually consistent with the standard and interactive toast notifications, but each have their specific UI behavior that’s slightly different from the standard toast notifications, to better serve their own scenario. Some of these UI behaviors include:

  • Alarm and reminder toast notifications are always pre-expanded to show the full content and available actions on Windows Mobile
  • Alarm toast notifications automatically play looping sound
  • Incoming call toast notifications are pre-expanded and has a layout that expands to full screen on Windows Mobile.

Here is what the scenario-based toast notifications look like:

Here is what an alarm notification looks like on a mobile device (with/without the listbox expanded)

Here is what a reminder notification looks like on desktop

For guidance on how to create scenario-based toast notifications with code, please see this blog post – Adaptive and interactive toast notifications for Windows 10. 

Toast notification audio

The app can choose system-defined audio or custom audio for the toast to play when it displays. Please see Adaptive and interactive toast notifications for Windows 10 on how to set toast notification audio. 

Action center

A toast notification, after being swiped away or ignored by the user, automatically goes into action center. Action center is a system area that allows users to see previously missed or ignored toast notifications, and to quickly access system settings such as Wi-Fi and Bluetooth. A user can access the action center on the device at any time – on Mobile, by swiping down from the top edge of the screen, and on Desktop, by swiping left from the right edge of the screen (swiping right from the left edge for RTL languages) or by clicking on the notification icon inside the system tray.

The notifications are grouped on a per-app basis and ordered chronologically inside action center. Each app can have up to 20 notifications in it (older notifications eventually get pushed out by new ones). A toast notification will stay in action center for 7 days until it expires (which will then be removed from action center), unless an earlier expiration time is specified during the creation of the toast. See ExpirationTime for more information.

The Windows Action Center was introduced in Windows Phone 8.1 and brought forward to Windows 10 Mobile and Desktop.

Action center on mobile:

Action center on desktop:

An app can manage toast notifications it sent previously, to control what the user sees inside the action center, in order to always show the most accurate and up-to-date information. This includes removing toast notifications, replacing toast notifications, setting an expiration time on toast notifications, etc. For more information, please see Quickstart: Managing toast notifications in action center.

Depending on the timeliness and sensitivity of the message, an app can also choose to send a toast notification directly into action center without popping up on the screen and playing a sound. See SuppressPopup for more information.

Sending Toast Notifications

The process of raising a toast notification is essentially the same as sending a tile notification: create an XML payload for the content of the notification, add specific properties about the identity and behavior of the notification, and send it to the system to display, via local API, or push service. For a guidance on sending local toast notifications, please take a look at this blog post – Quickstart: Sending a local toast notification and handling activations from it (Windows 10).

Toast Settings

Using Notifications & Actions Setting, a user can override notification behavior on a per app basis, which gives them the ability to stop seeing toast notifications from an app, or change some behaviors – for example, a user can make all notifications from an app silent, or make all notifications from an app go silently into action center. 

Here are what the level 1 and level 2 setting page look like on mobile.