This isn't a lesson about how UX writers are big 'ol lovers of toasted bread. As wacky as it sounds, “toast” is the name of a digital component that displays brief, temporary notifications.
Toasts are meant to be noticed without disrupting a user's experience or requiring the user to do anything. Toasts simply tell a user something happened (or will happen,) like this:
There are a few things to know about toasts:
- 95% of the time they’re only text
- That text doesn’t go beyond a few words
- Occasionally they’ll come with a CTA (one is best practice)
- They pop up and go away after mere seconds
- They don’t block the user from doing anything
You’ll commonly see a toast when you:
- Deleted a file
- Sent an email
- Posted on social media
- Copied something to your clipboard
- Successfully updated a file
Why do toasts matter?
Imagine you go to post on LinkedIn. You spend a good few minutes making an impact-packed post, make a cool graphic to go with it, and are pumped to free it into the wild. You press “Post,” and nothing happens.
Did it post? Or did I just lose all that copy I spent time writing that feels impossible to recreate?
It’s been 30 seconds, and you get a moment of panic. Then, you go to your profile, where you see the post successfully published.
Instead, imagine right after you post, you get this toast:
Hello, peace of mind.
Now, this is what LinkedIn actually does, but illustrating what would happen if they didn’t do it can help us understand why toasts matter.
Responsive, timely feedback lets us know that our actions were successful, and we can move on with our day. Without that feedback, we second-guess ourselves and digital products, which create unnecessary stress and uncertainty.
What makes a toast effective?
Effective toasts are:
- Super short
- Use generic language
- Have a directive tone
Effective toasts are super short
A toast only appears for seconds, and in a teeny tiny box. That means we need to say a lot with as little as possible.
The best way to be super short with our microcopy is to remove filler words and phrases (tips on writing concisely in lesson UXW#16.) Successful toasts are made up of short statements, not sentences.
For example, not this:
But this:
Effective toasts use generic language
One of the few times you shouldn’t be specific is in a toast. That’s because, if you’re generic, not specific, it reduces the need to write many versions of toasts for similar use cases.
For example, say we’re writing a toast that tells Google users their Google Doc, Google Slide, or Google Sheet was successfully saved. Instead of being specific and writing three toasts that refer to each product, we can maximize efficiency and write, “File saved,” since they’re all files.
This also creates familiar patterns for users, so they can interpret in a glance what the words “file saved” mean. Vs if there was a different product name in each toast, it would require more attention on the user’s end to internalize what it’s saying. And remember, toasts only appear for mere seconds.
It’s also usually unnecessary to include specific filenames, usernames, or folders in a toast, because a user can get that context from elsewhere in the UI.
So, not this:
Or this:
But this:
Effective toasts have a directive tone
Toasts are not a time to be clever or cute. Because the user only has seconds to grasp the message, if you make a pun or use playful language, the message can easily be misinterpreted or not interpreted at all.
Toasts offer quick reference or context, so a user should be able to quickly read a message that’s brief and optimized for delivery. Just convey the message, then get out of the way so that they can get back to the task at hand.
The best way to do that is to use a directive tone that presents the message in a concise and neutral way.
So, not this:
But this:
Good examples of toasts
Material Design (Google)
Material Design is Google’s design system, or guidebook for design rules. This is a great example of a toast because it succinctly combines statements to construct a concise message. It uses a directive tone, and it’s very clear what’s happening and the one action you can take to change it (“retry.”)
Adobe
Adobe’s “copied to clipboard” toast is quite simple, and that’s how it’s supposed to be. They said the bare minimum, and you understand everything you need to.
Adobe (again)
Adobe has some killer toasts. Again, here, less is so much more. You know everything you need to know in two words. The only addition I could see Adobe adding is an “undo” button.
Bad examples of toasts
Dropbox
If this toast only had the first line, “Screenshot Added,” it wouldn’t be on the bad examples list. Because the toast has that completely redundant second line, it fails to be concise. “Screenshot Added” already says everything you need to know, and the rest clutters the message.
Promotional toast
First, toasts should never be used for marketing or promotional purposes. It’s not their purpose, and creates a confusing pattern if you do use it for marketing or promotional purposes. Not to mention, this toast is long-winded and uses playful language. This would be better suited as a modal, even though I still think it’d be an ineffective one.
IBM
Again, IBM here could get rid of that second line. It could be rewritten to be more generic to “Project name updated.” You don’t need the time — that just adds clutter. This over all could be more succinct, so you can interpret it in a glance.
Happy UX writing đź––
