Component proposal: Toast Notification

[notlee]

Relates to other on-site messaging Origami components including: o-message, o-banner, and o-cookie-message.

What is a toast message?

In current user interface terms a toast is a message that appears on the screen; it is often short, often appears only briefly, and often animates up from the bottom (like a piece of ghostly yet precisely-crafted toast), though other directions and a fade-in/-out is common.

Defining ‘Toast’ Messages, Adrian Roselli

Existing examples

n-notification

There is an old and little used toast-like component developed long ago by customer products. It was created before o-message and conflicts in visual style. It appears it is only used in myft, and not really because it's broken. Here's the demo:
n-notification

n-myft-ui

Has a toast like notification when saving an article to myft. It shows on the article page for example:

ft-app

The ft-app on the other hand uses a Material inspired toast component. This is displayed at the bottom rather than the top of the page:

[notlee]

This has also been requested for internal tool purposes. Separately, Spark put o-message in an overlay in a toast-like way which fades after a few secons – o-message wasn't designed with this in mind

[notlee]

A design from Thomas Moody, shown below, is a proposed design for a toast notification on registration, to show an account has been created before completing a flow to becoming a full subscriber:

This could be used elsewhere:

[notlee]

Note from Tom:

Usage-wise i think they're for system changes and wouldn't be used for navigation purposes (e.g. success message at the end of a sign up journey).
I guess they shouldn't be used for every system change but where you need to give user feedback, without distorting the UI.

[notlee]

We decided not to progress with this at the time due to the difficulties around designing a well made timed out message with accessibility in mind. FT Professional was able to use an alternate design pattern. Given prevalence elsewhere, including the app, ft.com, and spark, we should revisit this pattern

[notlee]

Live page using tooltip like a toast