Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

It seems to be taken for granted that the color red is appropriate to highlight errors. In the case of serious system errors, I agree. However, I'm having doubts that it's the right choice for user generated errors, like form validation.

It's common to see something like this:

Red colored error message

To me, this feels equivalent to blaming or yelling at the user. I've considered something like this instead:

Yellow colored error message

It feels like a message with a gentler tone even though the words are the same.

My opinion: Users don't need to feel like they caused an "error", and forms are already annoying enough as it is, especially when you've made a mistake or two (because after all, the user isn't trying to pass in an invalid email on purpose). It's just a small, correctable mistake - not a show-stopper.

System errors are a different thing: they aren't necessarily the user's fault, and they can really mean that something is broken or out of the user's control. Is there any reason why user generated errors should (or should not) be red?

* Note: I'm concerned about the colors, not necessarily the message text or icons.

share|improve this question
1  
I agree with you, basically - not sure if anything can be added to this to give you an 'answer'. –  Anonymous Jan 19 '12 at 16:14
    
Have I assumed too much about "red" being the standard, or am I just being naive? I pretty much never see any deviation from it. Even on this site, validation errors are red: i.stack.imgur.com/2K4yA.png (I also find the "oops" very annoying, but that's another topic). –  Wesley Murch Jan 19 '12 at 16:20
    
No, I think your assumptions are valid. I do recall seeing yellow/more neutral colours being used for validation errors on other sites (couldn't give you an example right now though). I'd associate red messages with being a more severe error. Whether or not this is a UX issue worth losing sleep over I don't know - or if it's something that can be researched easily or not. –  Anonymous Jan 19 '12 at 16:26
    
I'd say it's pretty significant, as every site I run has validation errors. It's been a question I've had for a long time, so I'm not exactly losing sleep over it. There must be something to it if virtually every website uses red for these kinds of errors, or maybe it's just an oversight or habit. I think if it can be answered in a non-subjective way, this would be the place, right? If not, I'll leave it up to the community to close the question. –  Wesley Murch Jan 19 '12 at 16:28
1  
Red does seem like overkill. WARNING DANGER WARNING...your zip code has only 4 digits. Seriously? On the flip side, people are used to it... –  Alex Feinman Jan 19 '12 at 16:56
show 2 more comments

2 Answers 2

up vote 17 down vote accepted

I think red is pretty much the convention in this context so you should use red for errors that need to be fixed before you can move on/send the form. Yellow is in general for warnings (eg. user perhaps should/could improve something, but it does not stop from proceeding). Yellow can be used with for example with one of those password strength thingies where bar shows how strong your password is: warn user when they give weak or very common password.

You should follow conventions (unless you have a very strong reason not to). To paraphrase Jakob's Law of the Web User Experience: people will spend most of their time somewhere else than on your website.

One important point to understand is that using conventional colors for errors is important because they make the errors more noticeable. User being annoyed by the color of error message is lot less of a problem than user not being able to complete the form because they didn't notice the error. At least in most cases.

share|improve this answer
4  
You may be onto something here with yellow being warnings, I hadn't thought of that... Does make sense. Green = success. Yellow = warning but the program flow continues. Red = program flow halted. –  Anonymous Jan 19 '12 at 16:36
1  
Or are you just saying "Whether it's a good choice or not, red is already the standard, so just use it because that's what users expect"? –  Wesley Murch Jan 19 '12 at 16:45
1  
Very good point - although red may seem loud/angry you need to consider what happens if you tone down the colour of the most serious alert what impact that has on the lesser alerts? Does it make all alerts seem the same priority? Something like Red if something has gone wrong, Amber for general alerting (i.e. 'don't forget this'). –  JonW Jan 19 '12 at 17:29
1  
"People will spend most of their time somewhere else than on your website" That's a great credo of UX. –  ajkochanowicz Jan 19 '12 at 17:56
1  
@Madmartigan Red is already the standard, so just use it because users will understand what you are trying to communicate. It's a good choice because they will understand you. If they end up having to wade through a lot of these, thus getting a "blamed" feeling, you may have other problems that need to be fixed. –  Ed Staub Jan 19 '12 at 22:28
show 1 more comment

Red for error messages and alerting to something that is of critical attention is pretty standard in Western society.

It is well used in operating systems, like Windows and OSX to use red for error, yellow for warning and green for success messages. This might be as subtle as just having a red “X” or a green tick, but they communicate the status of the message. Here are some Windows developer guidelines for colour use: http://msdn.microsoft.com/en-us/library/windows/desktop/aa511283.aspx#meaning

You will even spot this on our roads. Red, yellow and green traffic lights. Red stop signs and no-entry signs. It is a cultural reference that we are very accustomed to.

Stop sign

In fact, during a recent round of usability testing, we had some messages incorrectly coloured as warnings when they should have been error red, and the feedback from the users was that these needed to be clearer and look more like an error message. In some instances specifying red was the preference.

If the context for red is required, users generally won’t feel shouted at or feel like they are made to look bad.

Unless you have a very good reason to not use red for error messages, you should conform to cultural customs and conventions. If you do decide to use something different, make sure that you test it to make sure it works.

I hope this helps.

share|improve this answer
1  
I don't know how well the stop light analogy works here, but this is great info nonetheless. Thanks for the informative link and your feedback, we'll be sticking to convention on this one. –  Wesley Murch Jan 20 '12 at 17:16
    
Not a problem at all, happy to help. The stop light works in that it commands attention and has to be noticed, much like the user needs their attention and focus drawn to an error. –  DigiKev Jan 20 '12 at 20:57
1  
Why wouldn't the stop light analogy work here? This is all UX. These are design patterns we've adhered to for years intentionally. –  mandynicole Jan 20 '12 at 23:34
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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