Snackbars are designed to provide brief messages about app processes in software. They are critical for notifying users of actions they are required to take; or confirmation of an action they have just completed.
Snackbars are also known as Toast notifications or Alerts depending on the frontend library you are using. These example libraries include:
What does a snackbar look like?
Snack bars typically have a brief message. It can have a link and typically have a close or dismiss button to allow users to remove these notifications away from a screen. Some common examples of snack bars, include a successful action or a notification.
Examples below:
The key elements of a snackbar typically include:
- Text defining the action taken or required
- Link to reverse or view the results of an action
- A dismiss function.
- A drop shadow to distance itself from the contents below.
What to consider.
When designing for Snackbars, it’s important to include variations. When designing for a product, the success and informative messages will have a subtle look and feel as compared to Error messaging. If you choose to use a Snackbar for error messaging, ensure this stands out alongside the other variations.
You must include at the very least the variation in severity. Include colours or icons in each variation:
- Success (great job you can pretty much ignore this)
- Information (a thing has happened, it won’t impact you just yet, if at all)
- Warning (a thing has happened and may impact you)
- Error (a thing has happened and is impacting you now).
Where will it appear?
Where you will place the Snackbar? Your options are pretty much unlimited, however if we go with the base frameworks, they are typically:
- bottom left
- bottom right
- bottom center
- top right
- top center.
The position you choose will depend on the product you are designing for. If the core functionality of your product on mostly on the right hand side; choose the left-hand side and vice versa. This is because your snackbars will sit right above the content of the screen.
With the nature of snackbars which can stack, we have to consider the interface that will be hidden. You don’t want your users to consistently dismiss notifications just to be able to take an action underneath it.
What is snackbar stacking?
Sometimes a product team will choose to use a snackbar for just about every notification in a product. You should avoid this. Consider notifications independently; if not they will stack on top of each other; sometimes to the height of the browser.
If this is happening on a regular basis, a product team will need to consider introducing a ‘dismiss all’ function to reduce the number of visible snackbars to something like 3-4. After this, a button will appear to allow users to dismiss all (or what is visible) so that others notifications can appear.
You can avoid stacking by also introducing time limited snackbars. For example if you are confirming a successful form submission, it can automatically hide after X seconds without the user having to intervene.
Of course if this isn’t the case for your product, you can look at allowing snackbars to stack away.
Example of error snackbars stacking.
What are other options for notifications?
- Information bar
- Alternative snackbar away from the primary position
- Inline notifications.
Information bars
Appear at the top of a product or website. Example of use include major company changes, planned outages, or upgrade notifications.
Alternative snackbar
Use a slightly different or simpler version of your existing snackbar, but position somewhere else. I use this in the top or bottom centre for things like wifi outages or timezone changes.
Example of alternative snackbar usage.
Inline notifications
If you’re notifying a user of an immediate action they have just taken, do it in context rather than while they’re doing other things. Inline notifications are typically shown on forms for validation. Any notifications that relate to the screen and action they are taking should ideally be shown within the screen.
If you have any questions or comments about snackbars, leave a comment below. I hope you enjoyed article.
Stay informed,
