2

I'm designing an app that requires CTAs at the bottom of the screen for most of the flows. This, I have found, presents a challenge when trying to incorporate Material Design snackbars. For example, there may be a form and at the bottom of the form would be a large "save" CTA. If you implement a snackbar, especially the two line snackbar, it completely covers the CTA.

Material Design says that snackbars should not cover FABs but it is unclear on CTAs.

Does anyone have advice? Google searches do not seem to pull anything useful up in terms of patterns.

1
  • 1
    Snackbars appear temporarily at the bottom of the screen to inform the user of a process that the app has performed or is about to perform. Given the fact that they are displayed on the screen for a few seconds and can be dismissed, why is it a problem that they will cover a button/input? Nov 11 '20 at 17:56
1

personally I feel that you can consider making the snackbar floating above the CTAs on the bottom of the screen. You would still have to consider the overall flow and feel of the screen so that the snack bar does not feel irritating to the user.

Not sure how your CTAs look like, please share some diagrams if you like to exchange ideas on the snackbar placements.

In addition, the Materials UI Design document show quite a few examples I took my ideas from here (see link).

0

Personally, I will place the snackbar above CTAs just like above FABs. And I will display multiple snackbars one by one, which means appearing one snackbar at a time. You can refer guidelines about these "Consecutive snackbars" from here Snackbar-Behavior.

0

Snackbars can float from top. while CTAs can be at bottom

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.