How and When You Should Use Snackbars in UI Design

Should we use snackbars in UI design? They provide a brief statement telling users that an action has been performed. They are small boxes meant to disappear automatically after a few seconds without any user input.

They Disappear Quickly

People who look away from their screen can look back and see the snackbar disappear without knowing what it said. Other individuals rush themselves to read the snackbar, making using the site stressful. You should give people three seconds to read a short message. They are also stressful for people with cognitive impairments. Snackbars can also obscure parts of the screen, prompting users to dismiss them. This can frustrate users who are intent on doing something else.

Best Practices for UI Design

Don't put the word dismiss in your snackbar if it disappears automatically. People will think they have to stop what they are doing to dismiss the message.

Use two lines, if necessary, for your short message on mobile devices, Users shouldn't have to scroll to read the message.

Put the snackbar where it won't interfere with frequently used elements or navigation.

Use JavaScript to annotate the snackbar so people using a screen reader can receive the message after the action. Use the Material Design guidelines to make snackbars accessible to all users.

Make sure to include snackbars in usability testing.

Alternatives to Snackbars

Knowing what is appropriate for users and not annoying them is an essential part of UI design. You can use Toast, which confirms an action. If you want to give the users an option to undo what they did, use a snackbar.

Use dialogs sparingly. A dialog presents users with actions they must take, usually one of two choices. Users must make a choice to continue. Dialogs interrupt users, but they can be necessary in certain cases. For more information click here https://adamsilver.io/articles/the-problem-with-snackbars-and-what-to-use-instead/.