User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
I have a rare case scenario in a website where multiple snack bars might show. I can not control this since it's the correct website's response, but I want to check if the order in which they show is correct: https://share.getcloudapp.com/wbuLXzlW
In the video, the order is: 1, 2 and 3. I wonder if it should be 1,then 2 stays at the very top, and then 3 stays at the very top.
It goes against the material design guidelines (and probably most standard implementations) to show more than one snackbar at a time; instead it recommends things should be staggered. https://m2.material.io/components/snackbars#behavior shows this visually. This also naturally solves your problem, the first snackbar gets shown first, the last gets shown last.
It's worth going into the "why" here. The UX problem you'd run into by stacking snack bars is that these things are on a timer. 4-10s of screen time may be enough to determine whether or not to take an action for a single item, but if you have multiple of the things, you end up with a wall of dense information that's difficult to parse in time before it goes away.
If you were to implement stacking snackbars, you'd likely also need a "snackbar log", akin to what can be found in some video games, which people could go into to find out what the message was they just missed. In case of informational snackbars, it removes them from the context of the action the user just did, in the case of actionable snackbars (undo, retry) you'd end up with truly nasty technical problems.
If things must be stacked, they should stick around until the user dismisses them - so in other words, they should be a banner, not a snackbar.
