7 ms·

Building a Toast Component

119 points by FragrantRiver 10mo ago

anilakar 10mo ago
Scrolling that web site on mobile is really choppy.
- slig 10mo ago
  Exploded my mobile browser on Android.
- tpetry 10mo ago
  Perfectly smooth on iOS for me.
- urban_alien 10mo ago
  VERY laggy on Android FF.
- leosanchez 10mo ago
  Perfectly smooth on Android FF.
- onion2k 10mo ago
  Looking at the replies to your comment makes me think that maybe the browser software isn't the only factor that impacts website perf.
robin_reala 10mo ago
Meanwhile, GitHub is removing Toasts from Primer, their design system.[1] They’re next to impossible to implement in a way that retains accessibility across all needs, and if you try to restrict their usage to places where accessibility doesn’t matter so much (simple ephemeral confirmations) people misuse them anyway. It’s notable that accessibility isn’t mentioned once in this post, or, in fact, in the component’s documentation. [1] https://primer.style/accessibility/toasts/ https://primer.style/accessibility/toasts/
- CharlesW 10mo ago
  > It’s notable that accessibility isn’t mentioned once in this post, or, in fact, in the component’s documentation. It's a red flag for sure. That said, there's nothing preventing toasts from being accessible: https://react-spectrum.adobe.com/react-aria/useToast.html https://react-spectrum.adobe.com/react-aria/useToast.html I think it would be accurate for GitHub to say, "GitHub no longer uses toasts because we didn't want to make the effort to make them accessible or usable."
  - thunderfork 10mo ago
    I think that toasts are kind of an attractive nuisance when it comes to accessibility. They can technically, with ample constraints and a great deal of restraint, maybe end up complying with WCAG, etc., but all it takes is one developer saying "well a toast is easy" or "this isn't that important, make it auto-dismiss" and you're back in bad pattern town. You see this with government web design systems - they have a very limited and constrained palette of patterns, because it allows for more consistency and reliable accessibility, versus having a bunch of tools that you just generally shouldn't use. (The GitHub page linked above also makes a great case for how "making toasts accessible" isn't as simple as just having the right aria roles - lots of details the Adobe design doesn't seem to completely cover, unfortunately)
  - robin_reala 10mo ago
    Spectrum’s Toast docs don’t mention how they make Toasts accessible with screen magnifiers (more widely used than screen readers based on the last WebAIM surveys I saw), so I guess they didn’t consider them?
    - MrJohz 10mo ago
      Everyone knows accessibility is just throwing aria tags at any element you see. The more aria tags there are, the more accessible it must be, right? /s
  - bitbasher 9mo ago
    > It's a red flag for sure. The first red flag was the repeated screenshots featuring Theo Browne, as if his thoughts or ideas carry any kind of authority.
jmercouris 10mo ago
Toasts are a great way to lose information. They are a terrible design and should not be used. They distract the user, are not dense with information, and provide no value. If a message is important enough for the user to read, it should be a dialog box.
- oulipo2 10mo ago
  Most of the time they're used for a quick visual confirmation that "your operation went right"
  - jmercouris 10mo ago
    The information that the user did something "right" should be responsive next to where the user initiated the action- not in a random corner.
    - nine_k 10mo ago
      That control may not be visible by the time the operation completes.
      - thunderfork 10mo ago
        There are certainly times where this must be the case, but I think it's broadly better to have designs avoid this.
      - strogonoff 10mo ago
        Toasts are popular, but not the only option if you want to notify the user about completion of a longer-running action when the user may have already switched away from where they started it. Consider a status bar[0] instead. You can make it cute and animated, too! [0] https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/status_role https://developer.mozilla.org/en-US/docs/Web/Accessibility/A....
  - tyre 10mo ago
    That’s why confetti exists
deleted 10mo ago
[deleted]
varun_ch 10mo ago
I’m far from a UX designer but whenever I use something with toasts I feel like I don’t notice them pop up in my periphery. I think it would be better if the confirmation for an action I did just showed up wherever I performed that action (like a button changing state to a spinner and then either an error or a confirmation)
- hungrymagnum 10mo ago
  This can be applied for a success (change the button to a green tick mark) or an unsuccessful action (change the button to a red x mark). But what if you want to give details on why the action was unsuccessful? How do you show it near the button or change the button itself?
  - chao- 10mo ago
    >How do you show it near the button? What stops you from placing these details you want as near as is reasonable to a button? Alternatively, placing the details near or in some container for the data/entity/element that the button relates to?
    - wildrhythms 9mo ago
      Good idea, but impossible to do when the user switches away from where the initial async interaction began.
nine_k 10mo ago
> While I’m sacrificing discoverability and clarity, it feels elegant to me Sigh. So much of modern "UX design" seems to be lured by this siren call :(
Waterluvian 10mo ago
Despite being the first point made, i feel that it’s likely the name didn’t contribute to its success, and possibly worked against it. It’s not discoverable and it doesn’t tell the reader much of anything. It’s the kind of name you get away with when your product is established by other means.
djbarnwal 10mo ago
This was a great read!
jgalt212 10mo ago
> It’s now downloaded over 7,000,000 times per week Why do all these packages have so many downloads? Are all the CI / CD routines always downloading a fresh copy and not caching?
- mmarvin 10mo ago
  Yes, exactly that’s the case.
araes 10mo ago
Was really hoping it was an article about making electronics out of fried bread products. "With electrodes wired to our margarine covered breadboard we were able to accomplish ... "
heystefan 9mo ago
Not sure where all the Toast hate is coming from in this thread, but I know two instances of Toasts that I use daily and they help a lot: - macOS screenshots - Linear toasts after every action (with common actions on them such as copy link)
bitbasher 9mo ago
I always used flash messages instead of toasts. I'm not sure if flash is the right term-- it's the inline message next to or above the form/element that changed or was submitted. I thought flashes were easier to see (not only for people with special needs). As it turns out, when you make things more accessible, everyone wins. I went through a phase where I used toasts because it felt like everyone was using them and my product/design was "old". I happily went back to flash messages when I came back to my senses.
retox 9mo ago
[dead]

119 points by FragrantRiver 10mo ago

anilakar 10mo ago

Scrolling that web site on mobile is really choppy.

slig 10mo ago
Exploded my mobile browser on Android.
tpetry 10mo ago
Perfectly smooth on iOS for me.
urban_alien 10mo ago
VERY laggy on Android FF.
leosanchez 10mo ago
Perfectly smooth on Android FF.
onion2k 10mo ago
Looking at the replies to your comment makes me think that maybe the browser software isn't the only factor that impacts website perf.

robin_reala 10mo ago

Meanwhile, GitHub is removing Toasts from Primer, their design system.[1] They’re next to impossible to implement in a way that retains accessibility across all needs, and if you try to restrict their usage to places where accessibility doesn’t matter so much (simple ephemeral confirmations) people misuse them anyway. It’s notable that accessibility isn’t mentioned once in this post, or, in fact, in the component’s documentation. [1] https://primer.style/accessibility/toasts/ https://primer.style/accessibility/toasts/

CharlesW 10mo ago
> It’s notable that accessibility isn’t mentioned once in this post, or, in fact, in the component’s documentation. It's a red flag for sure. That said, there's nothing preventing toasts from being accessible: https://react-spectrum.adobe.com/react-aria/useToast.html https://react-spectrum.adobe.com/react-aria/useToast.html I think it would be accurate for GitHub to say, "GitHub no longer uses toasts because we didn't want to make the effort to make them accessible or usable."
- thunderfork 10mo ago
  I think that toasts are kind of an attractive nuisance when it comes to accessibility. They can technically, with ample constraints and a great deal of restraint, maybe end up complying with WCAG, etc., but all it takes is one developer saying "well a toast is easy" or "this isn't that important, make it auto-dismiss" and you're back in bad pattern town. You see this with government web design systems - they have a very limited and constrained palette of patterns, because it allows for more consistency and reliable accessibility, versus having a bunch of tools that you just generally shouldn't use. (The GitHub page linked above also makes a great case for how "making toasts accessible" isn't as simple as just having the right aria roles - lots of details the Adobe design doesn't seem to completely cover, unfortunately)
- robin_reala 10mo ago
  Spectrum’s Toast docs don’t mention how they make Toasts accessible with screen magnifiers (more widely used than screen readers based on the last WebAIM surveys I saw), so I guess they didn’t consider them?
  - MrJohz 10mo ago
    Everyone knows accessibility is just throwing aria tags at any element you see. The more aria tags there are, the more accessible it must be, right? /s
- bitbasher 9mo ago
  > It's a red flag for sure. The first red flag was the repeated screenshots featuring Theo Browne, as if his thoughts or ideas carry any kind of authority.

jmercouris 10mo ago

Toasts are a great way to lose information. They are a terrible design and should not be used. They distract the user, are not dense with information, and provide no value. If a message is important enough for the user to read, it should be a dialog box.

oulipo2 10mo ago
Most of the time they're used for a quick visual confirmation that "your operation went right"
- jmercouris 10mo ago
  The information that the user did something "right" should be responsive next to where the user initiated the action- not in a random corner.
  - nine_k 10mo ago
    That control may not be visible by the time the operation completes.
    - thunderfork 10mo ago
      There are certainly times where this must be the case, but I think it's broadly better to have designs avoid this.
    - strogonoff 10mo ago
      Toasts are popular, but not the only option if you want to notify the user about completion of a longer-running action when the user may have already switched away from where they started it. Consider a status bar[0] instead. You can make it cute and animated, too! [0] https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/status_role https://developer.mozilla.org/en-US/docs/Web/Accessibility/A....
- tyre 10mo ago
  That’s why confetti exists

deleted 10mo ago

[deleted]

varun_ch 10mo ago

I’m far from a UX designer but whenever I use something with toasts I feel like I don’t notice them pop up in my periphery. I think it would be better if the confirmation for an action I did just showed up wherever I performed that action (like a button changing state to a spinner and then either an error or a confirmation)

hungrymagnum 10mo ago
This can be applied for a success (change the button to a green tick mark) or an unsuccessful action (change the button to a red x mark). But what if you want to give details on why the action was unsuccessful? How do you show it near the button or change the button itself?
- chao- 10mo ago
  >How do you show it near the button? What stops you from placing these details you want as near as is reasonable to a button? Alternatively, placing the details near or in some container for the data/entity/element that the button relates to?
  - wildrhythms 9mo ago
    Good idea, but impossible to do when the user switches away from where the initial async interaction began.

nine_k 10mo ago

> While I’m sacrificing discoverability and clarity, it feels elegant to me Sigh. So much of modern "UX design" seems to be lured by this siren call :(

Waterluvian 10mo ago

Despite being the first point made, i feel that it’s likely the name didn’t contribute to its success, and possibly worked against it. It’s not discoverable and it doesn’t tell the reader much of anything. It’s the kind of name you get away with when your product is established by other means.

djbarnwal 10mo ago

This was a great read!

jgalt212 10mo ago

> It’s now downloaded over 7,000,000 times per week Why do all these packages have so many downloads? Are all the CI / CD routines always downloading a fresh copy and not caching?

mmarvin 10mo ago
Yes, exactly that’s the case.

araes 10mo ago

Was really hoping it was an article about making electronics out of fried bread products. "With electrodes wired to our margarine covered breadboard we were able to accomplish ... "

heystefan 9mo ago

Not sure where all the Toast hate is coming from in this thread, but I know two instances of Toasts that I use daily and they help a lot: - macOS screenshots - Linear toasts after every action (with common actions on them such as copy link)

bitbasher 9mo ago

I always used flash messages instead of toasts. I'm not sure if flash is the right term-- it's the inline message next to or above the form/element that changed or was submitted. I thought flashes were easier to see (not only for people with special needs). As it turns out, when you make things more accessible, everyone wins. I went through a phase where I used toasts because it felt like everyone was using them and my product/design was "old". I happily went back to flash messages when I came back to my senses.

retox 9mo ago

[dead]