1

There's three ways of displaying error;

  • inline (field),
  • top of form (form),
  • and as a snackbar

When should you use a snackbar element to show an error as opposed to put it on top of a form modal or inside the input field?

Is there a use case for each of them, or should I only use 1 or 2 of them at the same time? What are the best practices in terms of UI UX and what are your sources for this?

2 Answers 2

1

What Snackbars do:

Snackbars are providing information on the state of the system. From material.io:

Snackbars provide updates on an app’s processes

Snackbars can be used to confirm success (or failure) of a process:

enter image description here

In this instance, the error is not a result of a wrong input on behalf of the user, but a system problem. A snackbar can have a single action to help correct this (such as retry).

vs. Form error display

Form error display is different: The system cannot let a user proceed until the user fixes some inputs they're attempting to submit.

1. Top of the form error messages: These are often used to get users attention since it's obvious and visible real estate. They can consolidate (and link to) the individual errors found in the form:

enter image description here

2. Errors at the input level: These are the specific inputs, often with a message providing information about why the input given is invalid (invalid ranges, wrong casing, etc.).

For forms, it’s a good practice to use 1 and 2 together, especially when you have forms that are somewhat long, or broken into sections.

Try to prevent these blocking form errors in the first place

Ideally:

  • proper inline validation
  • clear help text at the input level
  • the forgiving format pattern

can prevent errors in the first place. But if users do receive errors, they should be told what they need to do to correct.

2
  • Should you use snackbar instead of some alert box on top of a page, and is there documentation that supports snackbar as being best practice?
    – seyikos
    Oct 21 at 21:35
  • If this is a form error, I would not use a snackbar. I would use a combination of 1 and 2 to show users what they need to correct. Snackbars are more reserved for system updates, and success confirmation. A common case is a snackbar appears after you create a new item, and you get sent back to a list page. The snackbar in my example shows a success message.
    – Mike M
    Oct 21 at 21:52
0

The essence of each of the types of feedback you mentioned is to catch the user's attention as effectively as possible. Their salience will depend in part on what else is on the screen, how each of the UI elements (including system feedback) are visually related, and on your user.

Screen size matters

Since your question doesn't mention device dimensions specifically, I'd like to point out that on large displays, showing a notification at the bottom of the screen may not be as salient as on a phone (assuming content is layed out top-to-bottom). Not just because of the distance between content and snackbar/toaster, but also because the pattern will be more heavily trained for mobile experiences.

Know your user

Toasters and snackbars are most commonly displayed outside of a user's foveal vision. Remember that for older users, peripheral vision declines somewhat. Consider who you're designing for, and how much attention you need to give to accessibility.

Appropriate context

There's certainly a use case for each of the techniques you mentioned, but remember that they each have their place. For example, if you're building a responsive interface, you may want to show a notification at the top of the screen on some breakpoints, instead of at the bottom.

One at a time

Consider the situation where some backend validation needs to be done for a form input and the request fails for some reason. In this case, you can't provide the validation feedback, and you notify of the failure with maybe a retry button. You'll only ever want to display one message at a time so as to make the required interaction clear and manageable.

HTH.

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.