UX writing

UX writing toasts: The ultimate writing guide

Toasts, not the bread kind, display brief, temporary notifications. Learn how to write effective toasts as a UX writer with 15 examples.
ux writing toasts
ux writing toasts
In: UX writing, Components

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:

ux writing toasts
Image credit: Android Developers

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:

ux writing toasts

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:

ux writing toasts

But this:

ux writing toasts

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:

ux writing toasts

Or this:

ux writing toasts

But this:

ux writing toasts

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:

ux writing toasts

But this:

ux writing toasts

Good examples of toasts

Material Design (Google)

ux writing toasts
Image credit: Material Design

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

ux writing toasts
Image credit: Adobe Spectrum

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)

ux writing toasts
Image credit: Adobe Spectrum

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

ux writing toasts

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

ux writing toasts
Image credit: Tutorial Republic

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

ux writing toasts
Image credit: Carbon Design System

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 🖖

Written by
Slater Katz
As founder of The Gig Gal, my mission is to make learning UX writing fanastically-simple and landing a job easy. I've held UX writing jobs at companies like Netflix, Fitbit, Verizon, Afterpay, & more.
Comments
More from The Gig Gal
Great! You’ve successfully signed up.
Welcome back! You've successfully signed in.
You've successfully subscribed to The Gig Gal.
Your link has expired.
Success! Check your email for magic link to sign-in.
Success! Your billing info has been updated.
Your billing was not updated.