What is the difference between alert, notification banner and toast message?
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?
Related (about content not the element itself): http://ux.stackexchange.com/questions/70358/difference-between-notice-and-info-messages/82225#82225
I have written an article on this very subject, hope this might help: https://uxplanet.org/notification-banners-for-building-trust-factor-in-enterprise-ux-c73e35de83e2
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.
Is there is any difference between alert, notification banner and toast notifications?
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.
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