> But by archiving the email, the email disappears from the list, which already implies the action was successful.
> In this example, the button already includes a confirmation so the toast is entirely unnecessary.
I vehemently disagree with the idea that just because you're already communicating something one way it's bad UX to include another way of communicating the same thing at the same time. Redundancy in communication is a feature, not a bug, and it's present in all human languages. It ensures that even in less than ideal conditions the message still gets through.
In the case of toasts, having a single, standardized way of communicating the status of all actions (and if possible providing the undo) allows a user to quickly pick up on the pattern. Extra indicators closer to the action can be valuable too, but it's when they're paired with the toast that their meaning becomes entirely clear. To remove the toast in favor of a bunch of specific indicators is to force your user to learn several different ways of saying "it's done now" entirely from context (many of which will be small and subtle as in the examples given). This might work fine for you and me but isn't great for, say, the elderly or the vision impaired or children.
Unless they're actually getting in the way, toasts aren't bad UX, they're redundant UX, and a UX designer shouldn't be striving to optimize away redundancy.
Taking the YouTube example, the checkboxes are 100% optimistic while the toast notification indicates that the request to the backend that was fired off asynchronously was successful. With the archive message example, it is the same thing. The message is removed from the list optimistically and the toast message is representing that the message was actually archived.
I would much rather only get the toast if there is a failure to commit the change. Generally, them flashing up is a distraction from what I’m trying to accomplish. And being far on the screen from where I’m taking an action makes them even more of a distraction.
But wouldn't this situation be even worse with a failure-only toast? A request timeout could happen 30 seconds after the fact. You're likely in a very different UI state at that point, and unless the error message is very specific, you'll have no idea what even failed if you are quickly performing lots of actions.
I can see the argument that there are certain places where people use toasts that are unnecessary and provide information that the user doesn't need. But that's not the same thing as toasts being bad UX in the general case.
Now my presence is to use this grade A type of implementation because I like very solid software and I’ve done it so many times now that I can bang it out in a coding interview. Or explain it to a team so they can implement it.
But your average app is like a grade D. Even Instagram or Snapchat where I’m never too sure if my stories are going to be in order if my connection fails or even though it lets me cancel an upload, if I do it slightly too late the app fails to cancel because it can’t keep track of its own state through a state transition.
So for 99% of apps, I want them to put a redundant toast. I do not believe they can build solid software with proper state management. At least the redundant toast lets me know it did go through. A lack of toast doesn’t mean it went through because some people barely can implement error handling.
You don't want to stack them, or if you do you need some sort of inbox for them. You don't want to be spammed by them, you don't want them used as a stand-in for representing object state.
For a checkbox, I'd rather the info be communicated "inline" maybe by color/shape/shading. A toast could be used like an info popup, perhaps i.e. "why did my checkbox get reverted".
Or it could be for a high priority event, that just doesn't fit (well) in the current screen. But, again, care should be taken.
If you communicate with your user, don't spam them - provide them with prompts and visually appealing methods to obtain their data. Toasts can be a part of that but shouldn't be the first tool reached for (ideally). I think the reason they are so dangerous is because they are outside the main UI flow, its technically and visually "easy" to use them.
I would much rather the sequence of commands issued through the ui be a declarative state change queued until committed without bugging me about an error I can’t directly fix. Toast that backend chaos monkey, not me.
The problem with notification only of failure is that one is left uncertain about success, though I would agree that striking a balance between distraction and uncertainty is difficult.
It's bad UX. Put your damned messages where my attention has already been directed to BY YOUR UI.
I believe toasts should be confined to this scenario I'm describing, and indeed feedback directly coupled to user focus/input should be located near to that as you say.
Ok, so where does the toast go if you've already scrolled or otherwise navigated to a different area of the UI? These optimistic updated could take multiple seconds to succeed, and maybe as much as 30 seconds to fail.
We can have an indicator, then some icon or even a green bar in the "save this" modal, just fine. Or we can make the "archive" icon color different, or add an error, an undo-button, or other message next to it if we really need to convey this information. This could be a tooltip, something in the icon-bar, or anything really: as long as it right at the place where I made the change and expected the change to show up.
Wanted to mention in case you're not aware and maybe there's some tool somewhere (or some way to configure a screen reader?) so that you can keep your simple zoom workflow but still benefit from the ARIA alert pattern.
The issue with the not seeing toast notifications is that in some apps it’s the only true notification that the request went through to the server so missing them when they failed for whatever reason is rather annoying
Too much junk information trains users to ignore them, which leads to hilarity ensuing if there also is valuable information every once in a while.
Moral is don't send information to a user if it's not strictly necessary.
Further reading:
https://en.wikipedia.org/wiki/Banner_blindness
https://en.wikipedia.org/wiki/Alarm_fatigue
A toast makes sense as a worst-case, last-gasp, no-context attempt to communicate with a user. In this example, if the user unchecked a playlist and dismissed the list of playlists while the save was happening, and then the save failed, a toast makes sense because the context of the action is gone. Might as well put the information at a random spot on the screen.
Even then, a toast probably isn't the best you can do, if you really want the user to understand the error. In a the-user-is-the-product adware application like YouTube, you probably don't care if the user misses errors like these (and might even prefer that they do), but in a business application you wouldn't want to gamble on the user missing the toast or confusing it with a different error. It might be more helpful for a normal user if you re-open the element and show them the error in context. Open up the list of playlists and animate something to draw their attention to the fact that their change didn't save. I'm probably getting pie in the sky here, because that sounds really difficult to do in a systematic way, but in an ideal world, you'd always see errors in context.
Taking the archive example: yes, the disappearing message successfully indicates that something happened. But it doesn't tell you if the message was deleted or archived, and misclicks are common. The toast unambiguously communicates what happened in addition to saying that something happened.
Additionally, I stand by my argument that consistency is valuable. By all means have in-context feedback, but also pick a standard way that you always use to communicate completion of all actions. It makes it a lot easier to understand and eventually make use of the in-context feedback which may not be as intuitive as you think it is.
In general, I think the best use of toasts are to present options for further action (if needed).
Take the example of deleting an email and getting a toast that lets you undo. Your action has already been completed and you can see it. But you have more context that can be acted on. In this case it's not redundant, even though it relays the action you just take.
In this scenario, it's ideal to move this away from the viewport the user was in. In most cases, they don't need it. But if they do, it's onscreen.
Simple confirmations that do nothing else are redundant. But toasts don't have to be used that way.
Redundancy in UX confuses them. The closer you can get to the whole UI being a single sentence and two buttons the better.
> The closer you can get to the whole UI being a single sentence and two buttons the better.
Sure, but this is kind of my point—clever UX tricks to communicate things without words don't work for them. A toast is valuable for the tech-illiterate precisely because it uses English text to communicate its point, and having it exist in the same spot for every action makes it easier for them to pick up.
It's not the be-all end-all of UX design for the elderly, but it's a heck of a lot better than the alternatives proposed in TFA.
Things disappearing with insufficient explicit feedback for what actually happened to the things is one of the most common issues I've encountered with older computer users. I think it's the most common issue. Toasts add persistency and visibility for users who barely or don't understand the UIs they're interacting with, which makes it easier to understand what happened.
If Outlook gave feedback to every user action in a toast, then provided a universal history of every toast, you would probably resolve a significant amount of issues caused by user actions leading to unintended changes (and being unable to recognize that the action lead to a particular change, or even how the current state differs from the previous one).
The toast makes it clear.
This discussion tells me we have not yet reached perfection in UI! Toasts are good for me, but definitely not good for the users you and others have described.
My hope is that small AIs inside UX can help here. Can you tell your UI framework something like, "Give them a choice between X and Y." and then "Clearly indicate they have chosen Y." (with a fallback of "Tell them something went wrong, and they won't be able to make a choice right now after all.")
Or is it simpler than that, and we don't micro-manage the AI-powered UI engine? "Get answers to these questions, and submit them to this API." — and UI engine does all the rest? I'm not sure.
Anyway, an improved UI would adapt to the user — think of the way a person providing a service adapts to the customer, intelligently and empathetically. For example a teacher watching for signs of understanding in a student, adjusting explanations. A car salesperson being quick and businesslike with one customer and listening patiently to another.
And yet the discussion here seems to veer off from actual verification of whether toasts actually work, and all the discussion seems to be purely speculation. Granted, there is general argumentation too that's valid to some degree, and it's good to present that, and at the end of the day the only actual data that can guide this decision for a given user interface comes from user testing that is highly context sensitive.
Why? Because there exists no general answer to this question at all. It depends deeply on who your users are, and before the industry understands this basic fact that we as a species are mostly incapable of predicting what different persons from a different user group point of view will be, usability testing will be critically needed, and until we actually start doing it, we will keep creating user interfaces that marginalize everybody but ourselves.
I completely agree with you.
The article kind of confirmed to me that toasts are good UX.
Yeah this in particular bothers me. Someone that knows UI and UX should also know you can absolutely remove something on the front-end without a corresponding action on the back-end. If I click archive and the email disappears, that doesn't mean the back-end call succeeded or has even been made. How many times do you click move/delete/whatever in an app, the thing moves or disappears then a second later pops right back in? These things happen and the subsequent alert that it was actually successful is a good thing in my opinion.
But the proposed solution is clearly worse, unless the loading circle turns into a tick to show completion
Their examples are all arguments of where local information should have been displayed. I agree with them in general. I just think that a toast should also be displayed in each of the situations they identify.
What seems to have happened is that they correctly identified a problem with lack of local information and blamed it on the presence of non-local information, which is fallacious. You can have both, and I believe that a UI with both is generally more usable.
I like the traditional desktop approach where error messages are shown modally, so can’t be missed, and success messages are shown as normal unobtrusive text in the permanently displayed status bar, without timeout. When not getting an error modal, the user can simply assume that the action succeeded, but can look at the status bar for confirmation (plus potentially some auxiliary information), without any time pressure.
Some applications also offer a popup showing the history of status bar messages. In that approach, the status bar is like the last line of CLI terminal output, and you can call up previous output.
I often will click into my notifications to see what I missed (I knew it looked important, but I didn’t have enough time to read it all). When I get there I will click on what looks like a truncated message, with the expectation that it will take me to the full context. Instead, the notification disappears, so I lose it, and it opens an app without deep linking to the issue. I’m then left hunting around to try and find a problem, which may or may not be surfaced, in the app’s standard UI.
This has happened more times than I’d care to count and it always leave me upset with whoever designed these systems.
I ran into this with my son just today, he is working on his reading speed and we were using a new app together. I kept showing toasts and he was struggling to keep up with them and found them to be distracting. I ended up reading them aloud so he could keep up. A more persistent message would have let him succeed without extra support.
Agreed; a better solution would be to assume success and show these messages only if an error occured.
In windows balloon notifications have been replaced by toast notifications that block ux you're working on as well.
there is also a toast notifications panel but it's frankly ugly and awful compared to iOS and androids notifications visually.
I don't have a ton of experience with Linux or MacOS
Go to https://www.youtube.com/feed/history and click "Comments" on the right side. Then delete one comment.
You will get one toast indicating that it will be deleted, and one a second or two later indicating that it got deleted.
If you delete multiple comments quickly one after another, you'll first get a bunch of toasts indicating that the comment will be deleted, and then, with that second or two delay, each confirmation, but they do get deleted sequentially, so you have to wait for all the confirmation toasts. Which for a deletion of 10 comments will take more than 10 seconds, even if you clicked them all in two or 3 seconds.
Same with the live comments at
https://myactivity.google.com/page?page=youtube_live_chat&co...
I disagree with this part, at least in general. Having an Undo is very good if you have accidentally clicked somewhere and don't know precisely where, and you don't know the application well enough to easily undo based on the message alone.
That's false. The checkbox itself is not a viable undo button under any circumstances in this specific example (i.e., you accidentally clicked but have no idea where, and let's assume you have no idea of that particular checkbox's state prior to the accident). Any adjacent checkbox would have extremely similar plausibility for a user wondering how to undo.
That said, toast is not great either, because it may disappear before the user fully recovers from their accident (say, a spilled drink). Maybe the undo button (and any async success/error labeling for the original event) ought to be adjacent to the checkbox and persist until the next action taken.
This can all be fixed. E.g. disable the checkbox while it’s processing; or show a small loading indicator; make it impossible to click the checkbox repeatedly. Etc.
A frontend update that doesn’t wait for the server is nice, but only when server state is irrelevant. If the user wants to know about the server state, then the UI should always indicate that.
To illustrate the problem with "perfect storm" example, suppose a your back is turned and a ball rolls of the shelf and hits the keyboard. Did anything change? What changed? How do you fix it?
Did you just archive or delete a couple of unread emails? You may never know!
Any feedback from a user action should be done within the context of the user action. If the action is async, it should be clear and the feedback should instantaneously indicate that the action is queued for processing. In that case, the feedback should give 2 options: cancel and access the queue (or better give a vision of its progress ).
If I removed a task from a board, I can't show - on the task - how to undo that action. There's a keyboard shortcut to undo it, but how would the user know, visually?
I'm not going to replace the task with a note because notes don't belong in task lists - only tasks do. I'm not going to come up with some derivative task that only displays a message because then I'm injecting intention that has no function for the task component. I'm not going to just not tell the user because while it is obvious that the task was removed, it's not obvious how to undo what could be an alarming action from a single click (and I'm certainly not going to nag people before deleting a task with a single click; it's a core functionality of task lists. It needs to be able to be done instantly, and undone instantly).
So on and so forth. I'm sure people have tons of one-off, little, anecdotal examples like that. Toasts were invented for a reason. Just because people got cutesy with them doesn't mean they aren't specifically useful for specific scenarios, regardless of how contrived.
Where should that feedback be given for modal operations, acknowledging that 99% of the time when the user initiates the action they want to background the operation and move on to doing other things?
There is no context for this, and often an action is required. And even if not, it is certainly useful to confirm with the user that their action was detected.
No. Growl came out in 2004, Windows XP had notifications in 2001. If you consider Clippy's messages notifications, we can go back to at least Microsoft Bob (1995)
[1] https://en.wikipedia.org/wiki/Toast_(food)
[2] https://en.wikipedia.org/w/index.php?title=Toast_(computing)
It's the most important word on their page, and it's obvious that some people, even technically-minded folks, don't understand the jargon.
But could be they got extra engagement from readers who are interested in baking and breakfast recipes?
> We currently demand that users internalize several metaphors when interacting with Homebrew. These include:
> Formula (how to build a bit of software)
> Bottle (pre-built software)
> Cask (pre-built software on macOS)
> Tap (a collection of software)
> Keg (where software installs itself)
> Cellar (where all my software install themselves)
> As well as an additional number of less-common metaphors that contributors and maintainers need to know, like Rack, Tab, and Formulary.
Would it be ok to assign you as the author of that comment? I don't want to take credit for your link.
Exceptions might be made in cases of misinformation or abuse.
> A toast is a ritual during which a drink is taken as an expression of honor or goodwill.
I’ll start by saying that I particularly appreciate this feature. There are countless times where I archived an email, only for the toast to tell me that I clicked the report spam button. I’d have been completely unaware otherwise.
The other issue underlying toasts that the OP is missing: Web operations are async. There is no telling whether your operation succeeded, failed or did even register with the server it’s communicating with. A toast gives you an async update about the state of the server.
I do agree that some toasts are obnoxious and for example can’t be dismissed while they are hiding an important UI content.
1) done accidentally
2) don't lend themselves to confirmation boxes because they are often also done repeatedly
So if you accidentally press something and suddenly the email is gone from your inbox, you want a toast with an undo button. Or if you're just idling and you suddenly see a toast because you were leaning on a button, you'll be glad it's there too. Preferably with a description of what action was performed, and an undo button.
In Gimp when you press Tab, it hides the whole UI with no way to go back if you don't know the shortcut. This is desirable for artists who want a focused view on their image. I can't tell you how much I would've liked a Toast with an "undo" button at that moment when I pressed it accidentally and had to google "gimp how to fix interface disappeared", and if I was computer illiterate I don't even know how I would have reacted.
Why? If an email suddenly vanishes and you don't want that you don't need a popup to tell you what happened, you can just Ctrl-Z and the email comes back
A confirmation toast with a page-redirection is a great way to add additional indication to the user that their submission was successful.
A warning or error toast in addition to standard form validation indicators gives a great secondary indication to the user that they need to change something.
And if implemented in a catch-all for nonspecified errors, it'll allow the user to preserve the state of their page vs rerouting to an error page.
If used as one tool in the toolbox vs the only tool in the toolbox, it's a great option.
I understand how much this saves space, but it is absolutely ridiculous! How does an UX expert expects someone to guess that? Are current UI's supposed to be used by people who behave like children poking everywhere to discover things?
Discord mobile app used to have it for both left and right sidebars, and then a while ago someone had a brilliant idea that the "slide to reply" gesture was more important than navigating the app, and now you have to click a tiny ambiguous button to see the right sidebar.
As for the "hidden panel," I have always assumed that this is a bug, but someone may have thought it was a good idea:
I use the Apple Connect App (for managing apps on the App Store) frequently.
If I use it on my iPad Mini, in portrait mode (how I usually use it), and select one of my apps, the back button often disappears, which means that I can't select another account (I have several), or another app within the current account.
Until I physically turn the iPad sideways.
Then, a Navigator appears on the left, and I can select other apps, or change accounts.
Frankly, I'm really quite disappointed in the whole UX for the Apple App Store backend (I'm not so thrilled with the frontend, either, but I use the backend all the time). It's a bit jarring, when you think about how much care they put into the rest of the user experience on the platform.
Author's alternative suggestion isn't that that great either - the problem with having a loading indicator next to an actionable item in a list is that if you get an error, it would be difficult to communicate what went wrong to the user (if you wanted to do that).
If the author considered why services like Google and almost every UI library, from Bootstrap to MUI, has some sort of toast/alert message, then I think the argument of toasts as bad UX could be better articulated.
Seems like author's take is more personal opinion than analytical conclusion.
Personally, I like the UX of toast + alerts.
No. The author assumes that it implies that. For the user though, it can imply many things:
- Something loading in the area next to the text, indicating something's coming up to that region soon, and when it disappears, it might be interpreted as a loading error.
- UI is doing something, so not responsive anymore.
- UI is doing something, and if the user does something, they might disrupt that process.
- Internet connection is slow.
In general, a loading indicator that starts running when a checkbox is selected is bad UX.
Better UX alterntives would be:
- Directly animate the checkbox itself when clicked (like pulsating it, or the checkbox square starting to rotate in a pattern, etc), and show a stationary checkbox when the operation is complete.
- Don't show user anything at all, let the checkbox show that it's been checked right away. If the user wants to leave before it's processed, just warn them about unsaved changes. (FastMail does that, for example)
- Don't use checkboxes for asynchronous UI actions that can take time. Use buttons instead, so the user understands the UX language. Then, you can use loading animations as much as you want.
In the YouTube example, I don't think the last two options you mentioned would work very well.
I disagree. For a software developer, yes, because we understand a cut corner when we see one. But a user doesn't think like a software developer.
> I don't think the last two options you mentioned would work very well.
You're probably right about that. But I also think, loading icon wouldn't work better either. The messaging is vague in the first place.
World of Warcraft has these, they're used for lots of things. Notably achievements and things like that. There's also add on that look for rare monsters and pop up when it detects one while you're flying about in the land, loot drop announcements
However, we just went through a special event called "Remix" which basically offered degenerate gameplay. Absurdly powerful characters, loot raining from the sky. And in this event, the common reward was a chest filled with gear and other things. These chests came from everywhere.
When you opened a chest, if it had piece of gear, you'd get a little toast.
Now, when you're boucing about collecting boar livers and rousting out hoodlums from their huts, it was quite easy to collect dozens of these things.
And, being WoW players, not known for their patience, you simply collect them all and open them all at once. Open your bags, and right click away. From this, your UI simply explodes with toasts. And they're all queued up, you can only see so many at a time, like, perhaps, 5. And they slowly fade, making room for others.
They dominate roughly 30% of the screen real estate (when presented in volume), smack in the center. And you can either wait it out (which takes a long time), or madly right click to dismiss them all. Me, I would simply go to the inn, open them all up, and log out (which is instant in an inn), and log back in. That would flush the queue of toasts.
Similarly, if you log into a zone, particularly a quiet zone, it's not uncommon for the screen to explode with alerts telling you of all the rare monsters that are simply sitting there because the zone is very quiet for players.
Finally, there a grouping queue you can join for group content, and you can queue for more than one event at a time. So, it's not uncommon to finish one event, kill the boss, the screen explodes with your loot, others loots, maybe a boss achievement, followed by a booming horn with a dialog telling you your new event is ready for you. The entire UI is just a cacophony of alerts.
Toast are mostly fine in my experience, but they do not work when applied in volume.
The problem here is not that there are too many toasts, it is that they are annoying. Having a stylish way of dismissing them all could turn that annoyance into something awesome.
> They dominate roughly 30% of the screen real estate (when presented in volume), smack in the center.
Pretty sure this is customizable. My loot toasts are relatively discrete, I can put them wherever.
> Similarly, if you log into a zone, particularly a quiet zone, it's not uncommon for the screen to explode with alerts telling you of all the rare monsters that are simply sitting there because the zone is very quiet for players.
This sounds to me like you're using the addon SilverDragon which is deliberately obnoxious about alerting you to rare monsters, but with it you can control every aspect of the alert, when/where they occur, or disable them entirely.
Toasts themselves can be done well, but like every UI and UX element, they need to have some thought.
I know Google have some good UI (sometimes UX on Android) every now and then but they are so fractured as a company, with so much product and feature churn, that their UX is all over the place.
Every single Google app reinvents how things are done or communicated. Even within an app, it’ll do things differently because different teams implemented different features in the app since sections of an app might be shared with other apps.
Even Samsung offer a more cohesive experience. The most Google try and do is introduce new design guidelines every few years and then promptly have teams break them. Material design? Material You? Both barely touched UX but even with their own incredibly straight forward design rules, Google couldn’t adhere to them.
Yeah, its wild because they were the ones who introduced the pattern to the general audience. And it was so successful that others started integrating it in non-material contexts. Toast and toast + action are here to stay, and for good reason, but I think google has individuals willy-nilly making design decisions and not quite being fully aware of how these elements should be used.
- if your app has a number of messages (eg: “image downloaded” or “message sent” or whatever) then there is a consistency in using toasts as they all appear in the same predictable manner
- often “appear away from focus” is one of the intended goals of a toast; it’s a message that is present, but more in the periphery (the user can ignore in most cases, and it doesn’t obscure main content)
But there is nothing wrong with a toast in a pro app. The pro user will get used to where feedback comes from on the screen and find it is second nature to notice the toast.
In practice, there are very few UX principles that generalize across every interface.
The end result is usually that I've been distracted for no reason.
In a casual app, none of this matters as much.
I spend all day in “pro apps”. I am also visually impaired. The inappropriateness of toasts has nothing to do with my familiarity with the app. I may, eventually, learn that a particular UI is using toasts to indicate something. That doesn’t suddenly make it okay. They’re still a massive pain in the ass for me. They’re still a massive pain in the ass for a lot of people. They’re still a poorly thought out holdover from the days of 640x480 displays, and with a modern resolution they’re even less appropriate.
Games can be the epitome of good UI feedback.
so yeah, I get what you're saying but it may not be the best example
* Embedded example video doesn't work on Firefox.
* Reasoning reads more like post-hoc justifications to me.
* Last and most important: does not explain what "toasts" are.
Aside: The word in its default English usage is not countable. Making a plural means it must be the usage of clinking glasses of alcoholic drink, to indicate a salutation to a person or thing.
They seem to mean "toaster notifications". I only know this as an option in Pidgin. I Googled it and found this:
https://bootcamp.uxdesign.cc/toast-notifications-how-to-make...
That page suggests that this bad, broken English is a standard usage in some niche community or communities. IMHO that doesn't excuse it.
It's not totally broken, it shows the first frame of the image, there's just no indication at all that the image is actually meant to be a video, there is no play control, and it just looks like a static image.
> optimistically show the user a success result?
I don't particularly like React, but this a core feature of such JS frontend frameworks, optimistically "succeed" while async network and back-end work happens to give the illusion of speed: https://react.dev/blog/2024/04/25/react-19#new-hook-optimist...
Toasts are a global UI feedback mechanism for non-blocking/fallible/undo-able actions. That does make them out-of-place by default, but at least consistently so.
A solution I'd accept is local-view-first with toasts-as-fallback when the view is dismissed. That said, loading indicators _might_ make users hesitant to dismiss a view.
The thing is, they don't solve a UX problem as much act as a catch-all solution for "respond to user action". It is easier for orgs to shove everything in a toast than to think about more practical places to put the data.
I have seen modals used to communicate status and reaffirming information that does not require action, and between the two, toasts are a better fit. That said, you still need to be smart where the bar is in terms of what is worth communicating. None of us want applications to blather on about stuff we don't care about.
I lead the design system team for an enterprise SaaS company—there are so many controls across so many views. It's hard to imagine including a feedback mechanism like this in every component.
And I still think we'd need some sort of toast confirmation for deleted records?
As a backend developer this stuff is mind-boggling, just call it "notification widget", or a "confirmation widget" etc.
Try explaining what toast is to an Indian subcontractor who has never eaten toasted bread in their life and then apply that to the UX usecase.
Removing these terms will also improve accessibility and understanding for junior developers entering the frontend world.
"P-trap" is a confusing word that plumbers use, we should instead have them say "gas barrier". And the word "fuse" makes very little sense in an electrical context—try explaining to someone who's never seen a stick of dynamite why the "overcurrent stopper" is named after a long gunpowder-infused cord! Traffic engineers shouldn't refer to "groups of cars" as "platoons" (they're not in the military!), and software developers should stop talking about "DDOS" and just say "lots of computers hitting my server at once"!
In all seriousness: jargon exists because it's useful to be able to refer to something that you use a lot conscisely and precisely. Your proposed replacements are not concise or precise, and they only solve the non-problem of people not understanding the etymology of the jargon. Part of learning a trade is learning the jargon associated with it, and that's true for every trade.
I've heard of "hero pictures" (detailed close ups, I think named via the highest quality film props), but not food or other UI uses.
To a front-end dev or designer, it does. That's who the jargon is for.
How would you call a hamburger menu? "menu widget with three-or-sometimes-a-different-number-of little horizontal lines"?
As a backend developer you also have some jargon but you’re too used to it to notice it.
His solution ignores the undo component of the toast. Simply adding it back to the playlist is not a solution as that reorders it in the playlists. Instead, undo puts it back into the playlist where it was. When you have longer play lists, this becomes even more critical.
I'd much prefer a consistent way of interact than a bespoke unique way of using every UI component. Consistency and correctness versus creativity and confusion.
Some UI can model what the users interacting with accurately enough that updating the state of the model is a great way to communicate changes. If you remove an item from a list, you can demonstrate success through that interaction without using a toast.
On the other hand, sometimes the UI doesn’t reflect the model at all and there’s no sensible way to communicate with the user what has occurred outside of something like a toast.
The trouble is, you get inconsistent feedback mechanisms if you leverage both online feedback and toast feedback.
If this was an easy problem one way or the other, I’m fairly confident we’d have seen a convergence of implementations at some point and everyone would use a fairly common convention. It’s not that easy, though.
Good UX is really hard. People thinking it’s this simple are actually why I stopped doing it as much. Back end programming gives you so much more freedom to explore problems and people respect it to some degree. With UI/UX, especially UI design, everyone seems to think they know better already.
So we come up with a workaround -- put async server updates in only one place in the application -- to get around this fundamental issue. In 99% of cases, this isn't about UX, it's about engineering. Nobody wants to put toasts in; they must, because managing state is too difficult otherwise.
It's a symptom of the larger issue.
If instead what's displayed on screen is simply the server's application state returned by the server, the user will always know what's happening with the server.
HATEOAS
I think your point is good though, that an ephemeral toast message is a cheap way to avoid having to manage and expose the underlying state. Exposing that via a HATEOAS REST API would be even better!
Toasts help communicate that an operation completed asynchronously after giving control back to the user without making them wait in a modal dialog. This is a very good UI/UX, especially now that users are trained to understand that asynchrony.
A little popover near the button makes more sense. Or, in this case, simply disabling the checkbox until the asynchronous action has completed, and using the non-disabled state to indicate success (or show a useful error message when the operation fails).
Take a breath
For undo-able actions, toasts disappearing too fast or colliding with other toasts badly is a real problem. An affordance to see the toast history with non-disappearing undo buttons may be more to implement but for a lot of apps, a viewable and editable history combined with toasts is a much better UX than either system on its own.
On Android, toasts often obscure the keyboard making it hard to type while the toast is being displayed (and still no way of swipe dismissing it after all these years).
On Gnome, various notifications get displayed as central top toasts which obscures the window directly underneath. No swipe to dismiss either, and only by putting the whole system in 'Do-not-disturb' mode do they go away.
Toasts are a solution to "I did something async and don't know how to design an actually good UI to convey that." And having a UI element for that is pretty darn useful because of how often that situation comes up. All of our default UI metaphors buttons/checkboxes/input boxes are all synchronous— either updating local state to be saved synchronously with a button or synchronously in real time (like setting a preference cookie). It's just that the web forced async-by-default on everyone without updating anything else.
If you show a user a checkbox it's absurd that such a thing can fail or not apply immediately, you're emulating a paper form, how does checking a box fail? Same with flipping a switch. Even if the light doesn't come on the switch is still flipped. None of these elements make sense to be backed by a request/response.
In the example in the article when the user changes one of their settings a save button appears, when you click it there's a progress bar or spinner, and when it finishes it says "Saved!" We figured this out in Windows 95. Quit trying to hide the form submission. The need for toasts is trying to tell you your abstraction is leaking.
To me, the context is the thing I just did. I can't say I'm particularly confused with toasts. Without them, I find myself looking for confirmation on page more often.
Also to the user, they happen instantaneously. Who cares if the fade-in is slow in computer time?
Some sites even have toasts on mobile which block content. Have even tapped some of those actions by accident.
Also, since they are ephemeral. How does it impact a user on a screen reader? Is there an audio cue indicating a toast is on the screen?
I used these to display errors in an internal web app once, which was a major mistake. The users almost never saw them and when they did they didn't see them long enough to be able to communicate what the message said, often trying to paraphrase.
I agree they are bad UX for most things.
- they work well in an otherwise cluttered user interface (error messages often break layouts)
- they allow the data layer to be substantially simplified, e.g. no need to store errors, error setters, error getters in Redux or similar
- they allow programmers to implement error handling toasts once and use everywhere
For context, I'm coming from the world of native apps. Toasts overall, especially with the 'undo' action, have been a very useful contribution by Google to UX. Compared to iOS's "show a blocking popup in the middle of the screen", they were so much nicer. Like I said, the "undo" for cases like the archive example are the whole point! Instead of asking "are you sure?" for everything, you just delay the action and offer an undo. Default to the user being sure they wanted to perform that action and dont gatekeep their flow. Dont overuse it, but dont blame its bad uses on the toast itself.
Basically, the user should be able to configure toast messages; they should not autohide, or the time they hide should be adjustable, or they should be extendable within 20 seconds. TL;DR, self-hiding messages, dialogs, etc are not good for a11y.
That said, the toasts have a button where the user can undo the action taken, which is good for accessibility under criteria 2.5.2 and/or 3.3.4 / 3.3.6
Yes it's not great UX but it functions consistently well. Although 80% of the applications we use day-to-day may be by big corps with excellent UX and time to spend on it, 80% of applications built never get round to even consistent and fairly error-free UX. So I consider reaching that stage more important that adhering to a beautiful, but more risky, cross-platform UX strategy when in early stages with limited resources.
It's a lazy cop-out to avoid having to figure out how to integrate important elements into the design of your page.
I find Google/Material Design's floating action buttons very frustrating.
The all time you are actually interested in one and want to react to it, it doesn't stick around long enough.
I hate how the bubbles capture an area around them. If you need to click on something close to a notification, the click goes to the notification instead of that thing. That's sneaky and shitty. The border you see rendered in pixel should be the border and that's it.
This extra click area is not adjustable. There's an unanswered SO question about it:
https://superuser.com/questions/1490776/is-it-possible-to-ad...
The post shares a few real-world examples and illustrates some of the problems with how they use toasts.
What do you think? Are toasts overused? In which cases do you use them in your own apps?
I think so, yes.
> In which cases do you use them in your own apps?
I don't. But I don't write mobile apps (where they make more sense) for distribution, so they don't address any need my applications have.
Probably the best way to do it is to force show them a handful of elements center screen, and then where those go into the smaller overall view. This is really intrusive though and you don't want to present too much information too quickly this way.
After that maybe if they're not interacting with a side segment for a while make it perform some action to draw attention, but its a fine line between not enough and too over the top.
> In this example, the button already includes a confirmation so the toast is entirely unnecessary.
Double-encoding information is good if the information is really important so long as the two ways you encode it always and only appear together. You see this in data visualization a bunch (think a bubble chart where larger circles also become a more saturated red).
Sure it doesn't satisfy some platonic ideal of purity, but for a distracted user it can lessen their cognitive load and so can be good UX.
The point about distance is interesting. Toasts popping up near the action could be neat.
The redesign of the "Save" operation is better than the original, where the checkbox list is positioned in context, and there is an indicator for the async operation.
But I think it would be better if it kept the toast. When the operation completes successfully, presumably the async indicator just disappears. That has no impact and a toast fixes that.
Also, presumably the operation can fail. I suppose you'd replace the async indicator with a red X or something, and maybe revert the checkbox. But it would be useful if there could be a textual description of what went wrong, and a toast is a nice and consistent way to present that.
> 1. Add inline feedback
>
> Information in auto-dismissing snackbars must also be communicated using another accessible method inline or near the action that triggered the snackbar.
It can be useful to follow an expected pattern; users are likely to understand that a toast gives feedback for an action they have taken. Although other ways exist to accomplish this, they will follow different formats depending on the action (by necessity).
As with lots of design, expected patterns change over time. Although they are non-local, toasts are familiar.
Yesterday they added a sleep timer, yesterday! A feature that shouldn't take more than a day to develop. But it's highly valuable to a large number of users, Youtube doesn't care. Good UX is only valuable as long as they can make a profit from it.
Let's say the user wants to import some data source, and it says something like "Importing...". Sure, you can leave a notification in the menu, but if he did that import 1 minute ago, probably he wants to see some hint immediately. It's the same with the floating notifications in the phone.
I confess I was completely at a loss as to what a Toast was, though. I suppose we went with that name because they pop up?
Youtube has a lot of people on payroll to naval-gaze the problem described. Most systems don't. Having the GUI-equivalent to logging be easily available is a win for system usability.
- An action has a destructive operation that you can't easily undo because the main button has disappeared (i.e: delete, reset, confirm a popup, etc.)
- Displaying a message would break the UI somehow (i.e: error message in a list, near a button in nav bar, in a tight UI, etc.)
I honestly don't feel like they are the best, and most of the time they are useless, but from time to time they are handy.
Its also hard to see the popup if you click the save button because your finger is blocking the bottom of the screen when you click.
I'd argue that the YouTube iOS app found a more worse toast: the confirmation toast for removing videos from a playlist covers the original menu which triggered the action in the first place.
Makes it very hard to perform the same action repeatedly.
I never found toasts to be bad UX
effective use of toasts is to confirm to that a big change that they initiated was successful. for smaller changes, like checking or unchecking a checkbox, toasts are redundant
- The toast disappears quickly, so you might not have time to read it / take a screenshot
- It's not possible to copy the text
- Long text is truncated (e.g. exception messages)
Teams has, hands-down in my opinion, _the_ worst usage of toasts that I've seen. It's bad enough I get the OS toast from Teams, that may or may not disappear on its own after a time (on both Windows and Linux). However, there's also an in-app toast that blocks part of UI that is used the most: replying to messages. Literally, typing a reply, then boom, toast appears, blocks most of the buttons used to interact with your reply. (formatting, emoji/gifs, attachments and even the reply button!)
We have to acknowledge that conversation around this is also platform dependent.
Their latest “addition” was rewinding a video after a long pause. You watch a video, pause it at t=1:24:57 and go to sleep. Next day you start the video again and it goes for a while from t to t+n (depends on the buffered data), until it jumps back to t-20s.
Someone thought it’s a good idea to -20s after a long pause, and it might be good, if they assigned a proper developer to the task. Instead someone pushed an obviously idiotic change, without anyone checking. It’s not even an issue, it’s clearly “job done” by someone who couldn’t give a lesser fuck due to ieee754 limitations.
You cannot avoid that behavior. If you go forward/back or manually jump elsewhere, it still resets you to t-20s shortly after. You might think you just reload the page, but reliably saving the current position is not in their competence either.
That and a dozen other stupid bugs they fiddle with constantly but can never fix. Literally on a site with a sidebar and a grid of equally-sized elements. Their thumbnail card alone takes 7.5 pages (17KB) of html.
For me it's always on the bottom.
+1 to screen readers
A toast is a universal, out of the way confirmation of a user action. They shouldn't just be blindly waved off as "bad UX."
that must be what astrophysicists feel like reading a flat earth discussion.
There's nothing more infuriating than going to click undo and the toast disappears.
I don't think designers should put anything interactive in an arbitrarily timed interface aside from "Dismiss". A toast is the best when it's displaying what is currently going on, not as a pop up dialog box.
The best design for Undo I think is to make it a dedicated button, like the one in the text editors. When user clicked "Archive", a Toast pop up and displays message "Archiving N entries, please wait" and then change it to "N entries archived. You can press Control+C or click [Undo Icon] to undo if that was a mistake" then the Undo button lights up.
Also, IMO the message format "Archiving N entries, please wait" should be a standard, it tells the user in a clear way 1) what the software is doing, and 2) what should I the user do. On the other hand, the message "Conversation archived" don't really provide the same value, since user already saw it happened.
How difficult can it be to put a message next to the task, or in the center of the screen? Or offer a proper log of messages, such as Unraid does?
Here's the deal: I maintain a boatload of Visual Basic (yeah, yeah) in Autodesk Inventor. That program REALLY wants to make sure you're saving regularly, so if there's a document open that's been changed and left unsaved for awhile, it pops up a notification. This is fine when you're working on the model, and you just see this "toast" popping up in the corner. You make a note of it, maybe divert to the save icon, and get right back to work.
On the other hand, if you happen to be using the VBA environment when Inventor decides you need a reminder, it absolutely insists on slapping ITS window over top of it, so it can notify you Right Now! That includes grabbing focus, of course, which leads to all sorts of fun when you're in the middle of typing, and suddenly find yourself starting You-Don't-Know-What-Command on the model.
Fun times.
So, yeah, "toasts" can get annoying, but grabbing focus... THAT's when the trouble starts.
I agree YouTube example is pretty bad, but the gmail one is a really good use of a toast! What do you mean “you can see the email is removed from the list”?? Have you ever used email before? You usually have more than 3 messages, and seeing which one was removed, let alone that one was removed at all is not always obvious. And “undo” is incredibly important since you don’t have direct access to the removed item (and sometimes it’s a time sensitive action like undoing sending an email). The last one is not very helpful but not harmful either.
Also even if all the the examples were truly horrible and despicable uses of toasts, 3 bad examples are not enough to say a commonly used UI pattern is outright “bad”.
https://api.feedless.org/f/c5f5ae53-16f1-4f67-b45f-1c3e8a92d...
