0

As per

Material Design - Errors pattern there is only one color for displaying errors and warnings.

Their buttons have either Primary, Accent, Default or Warn color.

In this case Warn is Error. However coming from Bootstrap and other UI libraries world Warn is Orange and Error is Red.

I am wondering if there was any reason wht Material design dropped the Warn for Error.

Improve this question

2 Answers 2

Reset to default
1

Are you thinking like a programmer?

Programmers benefit from the warning/error distinction. It's good to know I have an unused variable, but it isn't going to break the system. But if I am referencing a file that doesn't exist - I'd appreciate the error message.

With users, it doesn't quite work that way. Typically you are either green or red when it comes to interaction. The field either has a valid input or it doesn't. This goes well deep into the formal definition of functional requirements, which are boolean in nature. Non-functional requirements (NFR, or soft requirements) are not boolean, they involve a spectrum to which there's a acceptance criteria, but that has little to do with warnings.

Also, when it comes to information in UX, there is a clear place for warnings - "Your account will be deactivated if you don't pay".

But as far as interaction goes, what use cases are there for warnings? In a form, what does a warning means? What should the user do after seeing a warning?

Would be nice if some people can give examples where warning can be useful in interaction (not information).

Improve this answer
2
  • e.g. "Clear: - Orange Warning button - Click this and you will have to type all over again. "Delete" - Red Danger button - Click this and you will permanently remove something.
    – bhantol
    Commented Jun 23, 2017 at 0:21
  • @bhantol - Nice one, and I can clearly see a reasonable line of argument forming here. But from a UX perspective, both serve as a potential increase in performance load, for which you typically either put guards (eg, delete confirmation) or undo. There is also the question: Why just warning and error? Why no warning, severe warning, error, critical error? Once you are in the spectrum domain quantifying the breakpoints can be painful, sometimes impossible.
    – Izhaki
    Commented Jun 23, 2017 at 0:38
0

Because relying in color to convey messages is not a very good idea. Also, it leaves room for confusion. For example, let's say your primary color is red... which color would you use for an error if red is the color of your CTA?

On that page you mention, see what it says about colors:

Color

Error text should reflect your product’s color palette. It’s recommended that you use a contrasting color for error states, such as a warmer hue like red or orange.

Error text should be legible, with noticeable contrast against its background color.

As you may see, you can use color FOR TEXT. However, block elements are a different story.

So, while color is still used sparingly for form messages, it's better if you avoid it on block elements, specially buttons. Instead, Material suggests an element based approach to transmit warnings and error messages. These elements can be inline messages (like those shown on forms) or they can be any kind of dialogs, like snackbars, alerts, bottom sheets, empty states and so on.

If you visit those links, you'll see how Material gets rid of color in favor of a content+context approach, displaying the most appropriate kind of message (warning, error or alert)

Finally, what Izhaki said: while there are uses for a warning, are you sure you need them? Most of the times I see a warning is incorrectly used and serves to no other purpose than to create friction

Improve this answer

Your Answer

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

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