Toast is another term in web design that is for one reason or another related to bread. Another such term, of course, are the so-called breadcrumbs, which, as you can see in the article about navigation, serve as orientation on the site.
Toasts (comes from the English toast, for toasted slices that rise from the toaster) are non-modal (see: modal elements) dialogs that appear and disappear within seconds. Sometimes, but not always, toasts have a small X through which they could be closed before they hide themselves. Usually, messages sent through a toast dialog consist of one or two phrases and are not very important and do not require (or provide an opportunity for) action from the user.
You can see this type of message in some navigation applications (such as Google Maps, for example), which display short messages “searching in the area”, after which the message disappears.
Usage
We should only use toasts after an action has been taken. Through them, we display information related to the last action. There are services that use toast elements as a form of marketing, showing that a user from a certain country has chosen one of our plans and has registered.
It is far better, however, to use web design elements for their intended purpose and in this case to communicate brief information related to the user’s last action or some event – for example, an error or a successfully completed task by the server or platform.
Positioning
As information that is more supportive of what the user sees than key information, toasts should be placed in the corners, preferably the lower ones (when using a computer) and in the upper or lower part of the display on mobile devices, but not in the central part.
Variations
As we know, colors reflect emotion. Most people, especially in the Western world, are united around the understanding and interpretation of different colors, in different contexts and we know that on the web “red” means a problem or error, while green – “successfully completed task”, and yellow – attention. All other colors produced by your site design, your logo or the chosen color palette for your brand would be perceived as more neutral.
However, do not rely only on colors, use icons to convey information (its connotation) more easily and directly. Even if the text is not read, a large X in a red rectangle will make the user understand that there is some error.
Sample toast dialogs.
Functions
Toasts could have the following functions:
Copy
Depending on what information you are conveying and whether this information may be needed by users in the future, you could give them the option to copy the text when they click on the toast.
Removal
Depending on the amount of information that the toast conveys, for example, if it is very short, you should allow users to remove it so that it does not interfere with them. Although the time in which toasts are visible should be considered at first according to how much information is on them, you should also consider users who, for example, read faster and do not want these elements to stand between them and continuing to interact with the site or correcting the error they made.
Precisely because the time in which these elements are visible should be considered for those who read slower, for the rest, the ability to close it when they see fit is really valuable.
Although you have given this option to users, do not leave toasts standing until they are removed by the user. This should happen automatically.
To get a rough idea of how long the information needs to be visible, you could read the text slowly out loud, noting how long it takes you and adding, for example, one or two seconds on top.
