I used to think that toasts were named after the small speech: toasting a new couple or a new year.
In reality, the term toast comes from the action of bread popping out of a toaster, just as these notifications appear. Still, I tend to think of them in terms of champagne and parties. Hey, let's raise a glass and call attention to something worth celebrating.
Obviously toasts aren't always a positive thing; some call attention to errors while others offer warning or instructions. Some simply let the user know that an action, like creating or copying an item, was successful. Whatever its purpose, there are a few ways to guarantee a successful (delicious?) toast.
Toasts, while distracting, should not be totally disruptive. They're meant to call attention to something without blocking the rest of the screen. If it's something the user absolutely has to know, tell it in a different way.
Don't toast everything. If users constantly see the pop-ups, they'll learn to ignore them. Classic boy crying wolf.
Don't be afraid of sentence fragments. It's better to say Note copied rather than This note was successfully copied by you. Like in most cases of UX writing, keep it short.
Some design systems give their toasts a header, while others have body text only. This marks the start of the naming debate: what's the difference between a toast, banner, snack bar, and general notification? I tend to view longer messages as banners, but honestly, as long as you're consistent, users won't know (or care) what you call it. If you do use a header, make sure not to repeat the same information in both the header and body.
CTAs aren't always necessary, but they can live in toasts if an action is warranted. Just keep in mind that toasts tend to fail accessibility guidelines, so keeping it visible for longer (and including aria labels) can make them easier to use.
Toast yourself 🥂 You now know how to write a meaningful toast.
Comments