New Toast UI

[stewx]

I would like to suggest a UI "refresh" the Toast component.

I worked on a prototype of this as a Shopify Hack Day project.

Suggested changes:

1. Light background, dark text
2. Moving the toast to a different part of the screen (coming in from top right instead of bottom centre)
3. Adding support for different types of toasts: success, info, warning, in addition to the existing error
4. Add support for a title property so we can have a richer presentation
5. Animation showing how much longer a toast will be visible (not sure about this one)

Prototype video from our Hack Day project:

toast-v2.mp4

cc @AlicaMoser @slavicstasyuk

[alex-page]

Toast is a very tricky component. It needs enough visual attention to let the user know information but balance so it doesn't get in the way of work. I see this design as a swing of the pendulum in the opposite direction of the current toast. The proposed design is a lot of visual information and it moves to take up a very important part of the admin.

I saw a design by @ry5n which I think hit the balance of these two sides really well. 🤞 he can share.

[ry5n]

@alex-page I’m not sure which design that was, it’s been a while!

When we designed the toast, we really wanted something that could replace the Banner component for quick feedback about successful actions. We actually originally didn’t want to use toasts for anything that would require user action, because toast don’t persist, and we didn’t want users to miss anything they needed to take action on. The error toast was actually a concession to existing code paths in the admin that couldn’t easily be updated to use something that didn’t disappear.

Zooming back out a bit, @stewx can you share a bit more about the problems you see with the current toast that you’re addressing? That might help us discuss more.

[stewx]

What are the main reasons I think the toast should be re-designed?

1. Aesthetics: The current toast is dark, almost like it's coming from a "dark mode", which feels inconsistent with the rest of Polaris. The black background also doesn't convey any information about what kind of message it is. Subjectively, I find the current design visually unappealing.
2. Ability to specify a title - this gives greater freedom for developers to communicate to users in a richer way
3. There are only 2 toast types: "normal" and "error", which greatly restricts our ability to communicate information. Typically, there are 4 kinds of messages developers want to send to users in different contexts: info, success, error, and warning.

[ry5n]

Thanks @stewx, that helps a lot. Here’s what I can say about the original rationale:

1. The user is probably not looking at the part of the screen where the toast appears, so we wanted it to be noticed. We chose to use visual contrast and motion to do that.
2. Toasts are meant for very short confirmation messages—basically they’re the UI nodding to you :)
   For that reason, and because the toast disappears after some time, we wanted to encourage the shortest possible copy, like “Product saved”. Additional structure for longer copy goes against this.
3. For the same reason, Toasts probably aren’t the best component for warnings or errors because people may need some time to process the error message and decide what to do.

Is there a situation in an app you’re designing where you’re running up against these limitations? Sometimes even if the original rationale made sense, real-world use shows there’s more flexibility needed.

[stewx]

I would be really curious to see the results of a comparison between how easy it is for users to notice a dark toast message at the bottom of the screen vs. a light-themed one sliding in at the top right. I would be surprised if the darker one is better at drawing the user's attention.

I'm not running into a specific problem with our existing toasts right now.