Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

hci
ux
ui

What are snackbars in UI design?

Sheza Naveed

Snackbars are UI elements that inform the user of an action that has been performed by an app or will perform in the future. They appear at the bottom of the screen temporarily.

Snackbar. Source: material design

Snackbars must not interrupt any user activity or experience. They also should not cause any user input to disappear.

Frequency and actions

Only one snackbar should appear at one time. A snackbar can contain a single action. “Dismiss” or “cancel” are optional actions.

Snackbars are:

  • Informational: They provide information regarding an action or process performed by the app.

  • Temporary: They disappear on their own without requiring the user input to be dismissed.

  • Contextual: They are placed on the interface where they do not interrupt actions but provide relevant information.

Source: material design

Components of a snack bar

A snackbar contains a:

  • Text label: Informs the user about the process that is being performed.

  • Container: The box in which the content of the snackbar is displayed. It is usually grey and should be completely opaque, so the text label is clearly visible.

  • Action (optional): A single text button that allows the user to perform an action. Snackbars should not be the only way for users to access an app’s core functionality. The button should be of a different color than the text label to distinguish both.

Components of a snackbar. Source: material design

Behavior

  • Snackbars should appear and disappear automatically without requiring the user to do anything. They disappear in a minimum of 4 seconds and a maximum of 10 seconds. They also appear without a warning.

  • When multiple snackbar updates are required, they should appear one at a time and not together.

Examples

The following illustrations show some sample snackbars:

Sample snackbars. Source: material design

RELATED TAGS

hci
ux
ui

CONTRIBUTOR

Sheza Naveed
Copyright ©2022 Educative, Inc. All rights reserved
RELATED COURSES

View all Courses

Keep Exploring