What is the difference between alert, notification banner and toast message?

Question

Is there is any difference between alert, notification banner and toast message, When it should be used, under what condition and scenario. In which component does the below image will suit?

Answer 1

Notifications choice often depend on what system you are building for.

If you are building for an existing platform e.g. an iOS app or Android app, then most platforms have guidelines which are in place to keep the use of these consistant throughout all these platforms applications.

Here are a selection of these resources:

• Microsoft - UX guidelines for tiles and notifications https://msdn.microsoft.com/en-us/library/windows/apps/dn611865.aspx
• Android - Notification Guidelines http://developer.android.com/design/patterns/notifications.html
• Apple - Notifications Guidelines https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/NotificationCenter.html

If you are building for web, then it is a different ballgame as it is up to you to define the rules of your web application and this is probably more in line with the example you have provided the screenshot of - I am guessing you are building a web app?

Here is the conclusion of a an article I read about it.

Users want to stay informed while using your web or mobile applications. Always use the opportunity to show your users well-formed and clear notifications. If needed (e.g. error message notifications), add extra information about the specific nature of a problem and a way to solve it. Try to keep your notifications simple and straight to the point. Your users will love knowing exactly what is going on and being able to get themselves out of a tight spot.

Taken from https://infinum.co/the-capsized-eight/articles/ux-quick-tip-the-proper-way-of-handling-notifications

Is there is any difference between alert, notification banner and toast notifications?

Alerts

These stop the user continuing until the notification has been acknowledged. They have come a long way now from the JavaScript popup and often web designers have customised them in a few different ways.

Notification Bar

This type is often a reserved space in a consistant area which alerts the user of a message. More often than not there are the 3 types, Error, Warning, Success and often carry an icon as well as being a certain colour which would not clash with the design of the website. Making sure that it is noticable. Difference between the alert and the notification bar, is that the user does not have to acknowledge the notification.

Toast Notifications

Similar to the notification bar but pop in over the top of the content, usually has a nice animation to draw the users attention.

In which component does the OP's image suit?

Your example looks like the Toast Notification type

Additional Reading :

UX Quick Tip: The proper way of handling notifications - https://infinum.co/the-capsized-eight/articles/ux-quick-tip-the-proper-way-of-handling-notifications

Google - Understanding Alerts and Notifications https://support.google.com/adwords/answer/1704338?hl=en-GB

Answer 2

Notifications: there are two types of those

1. System notifications that are typically displayed in form of a wide and slim banner on top of the screen and are used to make user aware about a prolonged system state change (like the system is down, planned maintenance, new features etc)

2. In-app messaging that is used either when there is a social component and some kind of interaction between the users, or when system needs to notify user about the state of the content.

Both types are static, they stay displayed until user clicks them closed, or for the length of first visit.

Toasts

Toasts are dynamic, they are displayed for a short period of time and typically contain system's feedback to user's micro interactions.

Alerts

Alerts are a relatively complex feature that can be placed in the Settings or Alert areas, where users are setting up their alerts for specific events, specifically, users are setting what these events are and what the alert should be. For example, user can set up an alert for a certain system state or certain data to be notified via their email, sms, wearable call etc. In some cases there is a layer of complexity added when users are setting up an alert for a very specific situation, like if the data that passes a certain limit either in the top or bottom thresholds, users want to be notified about it immediately. Alerts are always situational, are attached to a certain event and the information is going outside of the system.

Answer 3

A lot of questions there.

All of the mentioned are the ways in which system gives user some information. The deciding factors include expectation of the user, importance of the message and frequency of the message. Let us look at it one by one.

Alert Message

Old style alert() messages are almost defunct now. At least in professional looking enterprise applications you rarely see them. Primary reasons because those are pretty much out of control for the developer and are very obtrusive for the user.

Notification Banner

I use notification banner, the way Gmail does it, on top of screen, single line is when user is expecting a feedback from the system. Most of the times it is when user has performed some action. Deleting a user, Sending a mail etc. The system takes that action for the user and notifies the user upfront about success or failure of that action. This is essential to be upfront and can be easily spotted, but not as obtrusive as that alert. Mostly it uses some shade of bright colors which create a contrast from the remaining screen content. I choose to keep them on top center, with minimum data hiding.

Toast Notification

This is used when the system provides some information to the user on it is own. It is not necessarily a feedback of a user action. For example, Outlook's new mail alert, Winamp's song change notification are all part of this type of message. The content shown in these messages are helpful to the user but not as important to break the users current workflow and divert her complete attention to that message. Those are non-modal and easily fade away.

Naturally, these toast notifications find themselves near the notification Tray, (by default at top right for mac and bottom right for Windows) as the notification tray also houses important but non-obtrusive information/action.

---

The example you have shown is most likely a toast notification (considering the height, size and close button), but I would be weary of using that for an error message.

I hope I have been helpful.

Answer 4

The main difference between toasts and dialogs is that toasts provide feedback unobtrusively whereas dialogs demand an immediate response.

Toasts

A toast provides simple feedback about an operation in a small popup. It only fills the amount of space required for the message and the current activity remains visible and interactive. For example, navigating away from an email before you send it triggers a "Draft saved" toast to let you know that you can continue editing later. Toasts automatically disappear after a timeout.

Notifications

A toast would not be appropriate if the user is expected to respond because it only appears briefly and cannot be recalled. In this situation, the Android docs recommend using a Notification. If user response to a status message is required, consider instead using a Notification.

Modal dialogs

Alerts in modal dialogs should be used whenever an explicit response is needed from the user, and that response is needed before anything else can happen. A dialog does not fill the screen and is normally used for modal events that require users to take an action before they can proceed.

As for the example you sent, it meets the characteristics of a toast message.

References:

Material Design

Norman Nilson Article