Toasts on mobile version can cover important data

[augustocb]

Describe the bug In some UIs (like inStore) we are used to keep CTA buttons (or even some important info) fixed on the bottom of the pages, exactly where the Toast appears, covering the button.

Expected behavior Maybe the Toast could appear on top instead.

Screenshots

[cmdalbem]

My 2 cents: moving to the top doesn't solve the issue, someone might have important info/ctas on the top. An easy solution would be to give some margins to the Toast box, so at least the user would know there's something (potentially important) underneath. This would also reveal the Toast shadow, highlighting the fact it's one level above the rest of the view.

A more fancy approach would the ToastProvider being conscious of the existence of a fixed element in the screen and responding to it to appear on top:

[augustocb]

In my opinion, the first option doesn't solve the issue as well. The Toast is still covering the CTA, so the user needs to close the Toast to click on the CTA.

The second option resolves, in addition to maintaining consistency with the behavior in the desktop version. 👌🏽

[cmdalbem]

About the first option: yep, but that's life. Toasts should be exceptional cases, high-level warnings about something that didn't go very well, right? Thus, it makes sense it disturbs the normal flow, preventing the user from mindlessly going on with her life. Yet, it's a problem if it visually covers completely something important in the screen, which is the case today. With some margins we fix this visibility problem for important CTAs.

[cmdalbem]

@augustocb up

[augustocb]

Toasts should be exceptional cases, high-level warnings about something that didn't go very well, right?

Absolutely right!

I'm afraid this behavior doesn't fit with checkout needs. Maybe we need to care more about feedbacks, including the positive ones. But I want to test it, to make sure if this optimistic approach fits or not.

[davicostalf]

👀Interesting discussion. When updating Figma I saw that the designed version of the mobile toast differs from what's currently implemented. The option to close it that's there is through a swipe down, and not through a close button. Other than that there's also the alignment of it's possible action and the padding-bottom that is a bit off.

Since we are likely going to use it in Checkout, and mobile certainly can't be ignored, a redesign for mobile is definitely warranted. I disagree with what Dalbem brought up about it being only for exceptional high-level warnings. An option to undo an user action is often a toast, and it isn't high-level.

On the topic of it not covering important data, adding some margin on it's sides is the minimum we can do to avoid covering information. This may simplify the approach for phones with rounded corners as well. However, if it could somehow also account for fixed footers it would be great.

[davicostalf]

There's also the issue of mobile safari, where its tool bar may retract and expand upon interaction with the bottom portion of the viewport. This sometimes makes it difficult to interact with an element fixed to the bottom. A common approach other products take is to block this behavior, which makes the tool bar never retract. It solves the problem, but takes away the extra screen real estate from the user.

Here's a Stack Overflow entry with more information on the problem: https://stackoverflow.com/questions/21715917/prevent-mobile-safari-from-presenting-toolbar-when-bottom-of-viewport-is-tapped

If we can't find a way to overcome all these challenges, I'd concur we should allow fixing it to the top.