8

A bit similar to this question Material Design - How to display a log in error

Though it doesn't address how to do this on a larger screen (i.e. desktop browser) since snackbar at the bottom as an error message is a bit weird on a larger screen, please see image below.

enter image description here

Official material design guidelines doesn't include any web-related guidelines for this case.

I'm currently using angular 5 and angular-material which is designed to work both on desktop and mobile.

Improve this question

2 Answers 2

Reset to default
11

The material design guidelines have a section called Errors.

For your use case, it recommends:

If two or more fields have incompatible inputs:

  • In the text field, indicate a fix is needed. Add an error message below.
  • Display a message at the top of the form, or screen, summarizing the fixes needed and any additional explanation

This is what it looks like on mobile:

enter image description here

I imagine in your case, the bulk message could appear right below the "Sign in" heading.

As for snackbars, it goes on to say this:

The snackbar contains app feedback about a peripheral error. Snackbars are transient. Don't use them for critical, persistent, or bulk errors.

Improve this answer
5
  • This is exactly what I mentioned in my answer. Thanks for validating!
    – Bhupi
    Apr 25, 2018 at 8:05
  • So I guess, it'll look somewhat like what any other front end framework will look like.
    – Bk Santiago
    Apr 26, 2018 at 3:31
  • 2
    The link has been an archived one now: material.io/archive/guidelines/patterns/… Does the new version of Material design not like it any more?
    – Jian Chen
    Jul 5, 2018 at 5:20
  • 1
    @JianChen From a cursory look, it seems there's no guidance on errors in the new HIG version at all, beside a very basic one for text fields. As the new version introduces a more flexible design system, perhaps the Errors page simply hasn't been upgraded yet? Either way, there are no recommendations that would advise against it, so the error patterns still seem valid to me.
    – Tin Man
    Jul 5, 2018 at 10:02
  • 2
    Banners might fit this purpose, there's also a nice comparison between snackbar, banner and dialog: material.io/design/components/banners.html
    – brunettdan
    Dec 25, 2018 at 21:01
3

I would do away with the snackbar completely on the larger screen. I would do inline error messaging on larger screens right below the control in error along with highlighting the control in red as shown in your screenshot.

If you are married to the snackbar then below is my recommendation 1. Move the snack bar to the top on larger screens. Add animation so that the snackbar drops from the top of the screen. 2. Expand the snackbar to cover a larger area than shat you have currently. I would go about 3 times if not more as tall as you have it now

Material design specifications are said to be responsive but some of them do fall flat for larger screen renderings. But well nobody is perfect!

Let me know if that helps!

Improve this answer
1
  • Married to the snackbar is the biggest form of commitment I have heard of
    – George Dimitriadis
    Dec 20, 2019 at 11:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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