🍞 Toasts & Snackbars UX Guidelines

Toasts and snackbars might seem like a simple component to design, but they come with plenty of usability challenges — from poor discoverability to short showing duration. How can we make toasts more usable? And what alternatives are out there?

Let’s dive deeper into toasts UX, the pitfalls they bring along, and how we can work around them.

Heads up: Meet Smart Interface Design Patterns 🍣 — with practical design patterns for complex interfaces. Use a friendly code LINKEDIN 🎟️ to save 15%. Jump to table of contents.

Usability Issues Of Toast Messages

Typically we use toasts when we don’t want to interrupt users from their main task, yet need to notify them about something — updates, change of state, availability or errors. And often they appear for a short time, and then fade out — unless user must dismiss them explicitly.

Personally, I’ve seen toast messages performing fairly well to gently remind users about a successful event (e.g., finished uploading) or change of state (e.g., exported). But for them to be effective, they must be noticed at the time when they appear.

Consequently, they perform very poorly to communicate errors, especially when they disappear automatically. In fact, there are also quite a few usability issues that toasts come with:

1. Short duration: gone before users finish reading them,
2. Poor discoverability when displayed in upper right corner,
3. Very distracting when displayed at the top center of the screen,
4. Often appear far away from the action a user has taken,
5. Block content and navigation on a page,
6. Difficult to focus on at the bottom of the page,
7. Not enough space for detailed help, images, videos,
8. Don’t receive focus and are hard to use via keyboard.

Most importantly, toasts rarely appear at the point of interaction where user interacted with the product, and they require immediate attention. It can cause interruptions, especially when toast messages appear frequently. That’s where we need to speak about duration.

Show Duration For Disappearing Toasts: 2–7s

As Christophe Strobbe noted, toast messages fail WCAG success criterion 2.2.1 Timing Adjustable. So it’s a good idea to let users turn off, adjust, or extend time limits to accommodate for their needs.

To ensure our toast messages don’t disappear too quickly, we can use the following rule of thumb to calculate show duration:

• English readers read 250–300 words/min, with 5.8ch/word.
• Animate fade in at 200–400ms, fade out at 700–1500ms.
• Show duration = 50ms × [avg. number of characters].
• For 10 words → 10 × 5.8ch/word = 58ch × 50ms → 2900ms.
• Keep the toast visible for at least 2s, but at most 7s.

And if possible, avoid auto-disappearing toast messages as some people will most certainly miss them, not know what happened and how to proceed. If you must show a few of them, consider stacking them, but it’s by no means a great solution.

Above is an example of a situation that causes perhaps a bit more frustration than help. One visible persistent message above the chart might work much better in this case.

Persistent Messages Are Almost Always Better

I’m always staying away from one-size-fits-all conclusion. Surely toast can help, but very often they work better if they are persistent and have to be dismissed manually — even although it takes time and effort from the user. We just shouldn’t show them for frequent updates.

Here’s a quick rationale I’m using to make a decision about toasts:

• For critical and severe messaging that users should act upon, you might be better off without a toast message.
• For passive messaging, toasts might work, but don’t rely on people noticing them in time. Consider them only for passive warnings or updates and keep them visible until the user navigates away or dismisses the message.

A good alternative is to show a prominent message at the top of the page or notify users about updating status in a persistent/sticky header. Where possible, show updates inline, where the action happens. So if you need to display notifications frequently, consider a sticky status bar or display messages next to the action they relate to.

Update The Status Of UI Components Instead

One of the common issues is that toasts are used to notify about successful change of state (see below), but then the notification is too far away from the component — and that’s annoying especially if notification occur frequently.

Instead of relying on a generic toast message, you can change the status of the component that a user has now modified. Ideally, it would get a highlighted state to make sure that users don’t miss it. It also appears exactly where users interacted, rather than on the other side of the screen.

Additionally, the user could always check if the action was successful by interacting with it. No toasts needed!

Don’t Use Toasts To Communicate Errors

Don’t use toasts to communicate errors. Users need to be able to consult error messages and erroneous input when they are fixing an error. Frankly, toasts just aren’t great for that — they are either too far away from the error, or block important content.

Wrapping Up

Toast messages don’t have to be the first choice for notifications. They can work well to communicate successful events or change of state or for passive messaging like warnings or updates — if we thoroughly consider show duration and placement.

Don’t use toast messages for critical details if you can. In such cases, showing updates inline or using a sticky status bar creates a much better user experience.

Useful Resources

• The Problem With Toast Messages And What To Do Instead, by Adam Silver
• Toasts Are Bad UX, by Maximilian Schmitt
• How Long Should A Toast Appear?, Stackoverflow
• Toasts or Snack Bars? Designing Notifications, by Shan Shen
• Snackbars and Toasts UX, by Filippos Protogeridis
• Designing Toast Messages For Accessibility, by Sheri Byrne-Haber
• Technical Considerations For Better Toasts UX, by Scott O’Hara
• Notification Toasts: The UX and the UI, by Benoit Rajalu
• Toast UX Discussion on Reddit
• Designing Better Error Messages UX, by yours truly

Happy Birds: How To Measure UX (Video + Live UX Training)

Over the last few years, I've been spending quite a bit of time recording, drafting, designing and putting together everything I learn in new sections for video courses on UX:

• Measure UX and Design Impact (8h + live UX training)
• Smart Interface Design Patterns (15h + live UX training)
• Use a friendly code LINKEDIN 🎟️ to save 15%. Jump to table of contents.
• Both video courses come with a live UX training with 1:1 feedback and UX certification.
• Use the coupon code 🎟 LINKEDIN to save 15 off.

Thank you so much for your support, everyone — and happy designing! 🎉🥳