I'm not convinced. Most of the argument seems to be that redundant UX is bad UX:
> 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.
The unfortunate thing is they aren’t communicating the same thing.
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.
> I would much rather only get the toast if there is a failure to commit the change ... 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.
Toasts showing up far from where the action is take also makes them super annoying for people (like me) who use screen magnifiers. I'm oftne using a site while zoomed in, and will completely miss a toast, because it never enters the "viewport" on the screen I'm looking at.
I disagree on that—in the YouTube example specifically this isn't necessarily a problem, but the toast serves a valuable purpose in the archive in that it tells you again which button it was that you pressed. There have been countless times in cases like that where the toast has saved me and allowed me to undo a misclick.
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.
I mentioned this in another comment, but the whole reason the archive is able to be optimistic is partially because they offer the undo via toast. Otherwise its likely they would add an 'are you sure' plus a loading-state when doing these "semi-destructive" actions.
A grade A implementation would keep a local state that syncs to the server, indicates a sync is in progress, possibly stacks changes to reduce latency if there are a lot of changes + a slow connection and, to a user, gives me utmost confidence that I’m not going to lose data.
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.
I don't entirely hate toasts, I don't think your example is good, either. A toast is best for asynchronous, high priority, fleeting information.
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 only get the toast if there is a failure to commit the change.
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.
Fair enough, but when they are not communicating the same thing, there are no grounds for objecting to them on the basis of redundancy.
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.
No, they're bad. Messages that are on the periphery of my vision/attention (imagine a widescreen monitor) are actively confusing. I'm working on THIS problem here and something flashes up over there. Half the time, as I refocus to read this annoying intrusion, it disappears.
It's bad UX. Put your damned messages where my attention has already been directed to BY YOUR UI.
The inevitable tradeoff here is having a somewhat standardized location for notifications versus allowing them to appear arbitrarily determined by the developer’s notion of where they are ostensibly drawing your attention. Maybe that’s worthwhile, but I think there are going to be a lot of cases where the ideal location is ambiguous, or where devs have an idea for where your attention will be that’s not always correct, or where bad actors exploit this flexibility to make it look like something it isn’t in an effort to trick users. I don’t know the right answer to what might be best, but I tend to think that standardized features should be preferred when in doubt.
In some cases, the current user's focus is unrelated to the notification. For example: if the notification is alerting you to some foreign event like an incoming message, an app reading the clipboard on its own, an alarm, etc. -- some kind of standard positioning is needed for this.
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.
> Put your damned messages where my attention has already been directed to BY YOUR UI.
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.
Yes! The problem isn't duplication of the message, nor is it that they convey slightly different things. The main problem is their lack of locality.
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.
I use a computer mainly by using a zoom tool to magnify the area around my text and mouse/finger cursoe. I miss almosst all toasts and most notifications because they not where I’m working. For my use case, feed near the item I’m interacting with is the only valuable feedback.
I assume you don't want a full screen reader if you're not already using one, but if toasts are properly implemented (big if), screen readers can actually present them accessibly via the ARIA alert pattern[0].
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.
None of that invalidates what your parent comment is saying. They’re not saying you should use toasts to the detriment of other options, but in addition to them. If anything, your comment reinforces the notion that redundant information is beneficial because you don’t know where the user is looking.
Same here, in the last 2 years, my eyesight has gone down a lot (combination of astigmatism and presbyopia is not great). I used to love the growl style notifications from macos, now I always miss them (and often miss the alert that I only have 5% battery left).
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
I think the suggested improvement clarifies what he means: if you're worried that the UI element the user is interacting with doesn't fully convey what's happening, then improve that element rather than adding a second element that divides the user's attention and challenges them to read quickly and make the connection themselves. Communicate the failure of their interaction in the context of the element they interacted with, so the connection is clear.
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.
I get what they were saying and agree that in-context feedback should be added wherever possible. I just disagree that leaving off the toast is (in the cases cited) valuable.
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.
Yes. And I've never once run into issues with redundancy of information being a problem. It's the clever things people do to hide information or to be concise that reliably get them confused.
> 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 given examples seem pretty poor. An email disappearing from a list doesn’t tell me it was archived. Maybe it was deleted, maybe I accidentally hit some button and I’m not sure what happened.
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.
With SPAs, stuff happening in your browser doesn't imply any action has been taken on the server. Gmail lets you delete without an internet connection. If it never reconnects before the page is abandoned your changes won't be committed. A toast that is only triggered by a server acknowledgement has value.
As someone with a human-computer interaction degree, this thread deeply saddens me. In general, human-computer interaction is considered a field of computer science, which I guess hn has a good representatin of.
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.
> > But by archiving the email, the email disappears from the list, which already implies the action was successful.
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.
You apparently missed the bit where redundancy in communication is a feature, not a bug. "It ensures that even in less than ideal conditions the message still gets through."
Honestly I think the perennial "Java is too verbose" complaints are completely overblown, and say more bad about the person complaining than the language.
I agree. In the first example, you would assume the action completed even if you missed the toast. But in case you did notice it, that gives you a confirmation. Suboptimal? Maybe.
But the proposed solution is clearly worse, unless the loading circle turns into a tick to show completion
I didn't miss that point, I'm arguing that that point doesn't prove anything about the merits of a toast.
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.
For me the worse aspect is that they disappear (too quickly), and that they sometimes unnecessarily draw attention to themselves for success messages where you would trivially assume the action to succeed. The combination of the two is particularly vexing: Your attention gets unnecessarily diverted, but you don’t know if it wasn’t actually important because it disappeared too fast. Conversely, there’s also a variation where it stays on screen too long, obscuring a part of the UI you just wanted to see/use in that moment.
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.
To add to this. Some of them show important information the user needs, but it both disappears too quickly, and is incomplete, due to size limitations of the toast.
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.
To me, the imply that there's a hypothetical event log that I could view if I needed to look back to see what happened. In reality, that event log doesn't exist in an accessible way, and it's true that once the toast message times out, it's gone forever.
The log is just an optional added feature. The main point is for the current/last message not to disappear by itself, and to be displayed in a non-distracting and non-obstructive way.
As a thought experiment, how long should a toast remain on the screen? Ideally you want the user to have time to read it, but since you don't know how long it will take for them to glance up, and you don't know their reading speed, there isn't a safe bound.
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.
MacOS and phones do this well, the toast is up for what feels like enough time to read it, but if you didn’t catch it, you can slide open the notifications ui and see all the previous ones for as long as you want.
> For me the worse aspect is that they disappear (too quickly), and that they sometimes unnecessarily draw attention to themselves for success messages where you would trivially assume the action to succeed. The combination of the two is particularly vexing: Your attention gets unnecessarily diverted, but you don’t know if it wasn’t actually important because it disappeared too fast. Conversely, there’s also a variation where it stays on screen too long, obscuring a part of the UI you just wanted to see/use in that moment.
Agreed; a better solution would be to assume success and show these messages only if an error occured.
The absolute worst implementations of toasts are ones that actually block user interface elements which become invisible and un-clickable until the toast goes away.
Toasts that only appear for 500 ms are bad UX because the cognitive processing time of people varies widely, and they are incompatible with more people who have disabilities. Furthermore, they are hard to see on very large screens or when that corner is clipped on a desktop browser window that is partially off screen.
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.
> The "Undo" button in the toast is unnecessary because the user can just click the checkbox again
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.
In this specific example you do have an Undo button: the checkbox itself. The issue here is that the checkbox doesn’t match the exact state it’s supposed to represent: if you check it, for a few seconds it’s checked but the video is not yet saved; if you uncheck it it’s not unsaved until the toast appear. If you repeatedly check/uncheck it you don’t know in which state you end up.
> In this specific example you do have an Undo button: the checkbox itself.
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.
> The issue here is that the checkbox doesn’t match the exact state it’s supposed to represent…
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.
Yeah, I've encountered that in a few systems: I'm aware I accidentally just changed the wrong thing but I don't know which wrong thing, there are no clues. This is especially problematic when there's a chance nothing changed, but you can't be sure.
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?
This is particularly annoying on Gmail, where sometimes while you type in the search bar, a few of your keypresses will trigger keyboard shortcuts instead.
Did you just archive or delete a couple of unread emails? You may never know!
A toast makes sense only in 1 case: when it's a notification that is unrelated with the current action of the user. Similar to OS types of notification that the defunct Growl (memories) invented.
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 ).
I'd add one more scenario: when the UI element that would give feedback, normally, has been removed, yet you still want to show feedback.
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.
A better UX is to show a confirmation in place. When you delete a task from the list - show a module in its place with a short message and the undo button. Showing a toast in a completely different part of the screen is hard to notice and hard to interact with as it's removed after a short delay. Also, if you delete more than 1 task quickly, toasts start stacking, and it becomes even less clear which one you want to undo.
Thats one reason for them. The other is for "not important enough to block the user, but important enough to inform them of something". What was previously a popup with an 'ok' button is now a toast. Low friction, medium importance.
> 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 ).
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?
If it's supposed to be a "modal operation", then it's supposed to complete before any of this becomes relevant. When that can't happen (e.g. because of an Internet hiccup), IMO the user should be able to take manual action to "minimize" (reversibly hide) the widget, but it shouldn't disappear until the operation is complete.
Another example related to the current action of the user, but outside the scope of the currently-viewed screen: inserting a USB stick, or some other hardware-related function.
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.
> OS types of notification that the defunct Growl invented.
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)
Bah, you think you were confused? I thought it was about toasting, as in with drinks. (Yeah sure, "Are Bad UX" -- but since when is "Cheers!" a software metaphor? Weird AF.)
I'm sorry to say this, but I don't think it's fair that you (a moderator) should be allowed to pin comments to the top. There may be dozens of helpful links sharing or clarifying context in the discussion. The community can use the upvote feature to sort comments.
Exceptions might be made in cases of misinformation or abuse.
Thank you! That did puzzle me, especially because I had pulled some bread out of a toaster just seconds before sitting down to read Hacker News this morning.
It was originally the name of a popular CD burning application for the Mac. Only much later, following the discovery of bread, did the term become popular for describing a slice browned by radiant heat.
> The "Undo" button in the toast is unnecessary because the user can just click the checkbox again
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.
OP completely missed the point of toasts. Some user actions can be
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.
> So if you accidentally press something and suddenly the email is gone from your inbox, you want a toast with an undo button.
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
Readit News
> 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.
[0] https://www.w3.org/WAI/ARIA/apg/patterns/alert/
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
https://en.wikipedia.org/wiki/Inattentional_blindness
https://en.wikipedia.org/wiki/Habituation
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.
Deleted Comment
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!
Deleted Comment
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.
https://github.com/Homebrew/brew/issues/10798
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.
Deleted Comment
> 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