4

I've read some questions and answers on a few websites, including this one but it doesn't seem to answer what I'm looking for, which is:

What are (generally speaking) the best colors to show both messages of approval and error messages in a form?

I've read about some psychological reasons why using green for approving and red for an error seem to be the best, but I'd like to know if there are any studies or data on what color should be used to show these types or messages in forms.

Improve this question
5
  • 4
    Related: ux.stackexchange.com/questions/16317/…
    – Midas
    May 3, 2016 at 11:18
  • 2
    I don't think you will get an objective answer on this one, beyond the usual red/amber/green paradigm (hopefully I'm wrong!). The only thing to add is that colour should not be the only visual mechanism of an error, there should be some kind of copy or iconography to help inform the user.
    – Midas
    May 3, 2016 at 11:29
  • @Midas Yeah, I'm aware that it's a very specific question. I was talking to a UXD-teacher I know from the past, and he told me that these colors come from the fact that punishing is more effective than helping a visitor, i.e. if you tell someone with a red text what they did was incorrect, it is less likely it will go wrong again compared to when you show it with a yellow or black text. On the other hand, treating someone with a green icon when they do it right, is also highly effective.
    – MJB
    May 3, 2016 at 11:46
  • @Midas My issue with this though, is that it doesn't seem very userfriendly (to "punish" a visitor because it might be more effective), which is why I am looking for data! :)
    – MJB
    May 3, 2016 at 12:08
  • Why would you think it is "punishing" someone for not providing the information you were asking for? Have any of your users ever complained about the color of error messages? When I googled this I found quite few sites which explain that when they used a different color for error messages their users did complain about it not being red. This question has come up before here so you can look at it to see if you can find what you are looking for: ux.stackexchange.com/questions/16317/…
    – SteveD
    May 3, 2016 at 14:24

3 Answers 3

Reset to default
1

It depends on where this solution will be used. In western culture Green and Red has implied meaning which is very different to Chinese culture.

http://translation-blog.multilizer.com/color-localization-infographics/

As others have commented, you should not rely on colour alone to convey meaning, i.e. couple the colour with an icon and the copy should re-enforce the meaning, e.g "Save Successful" or "Error detected: email address is needed so that we can contact you about your order".

Improve this answer
3
  • I know that I shouldn't rely on color alone, I'm if anyone has data on what color should be used. And I am targeting western culture.
    – MJB
    May 3, 2016 at 13:24
  • When you say you need data on what color should be used, what do you mean by data?
    – SteveD
    May 3, 2016 at 14:12
  • I mean data from research or testing.
    – MJB
    May 4, 2016 at 6:02
0

The best color for displaying pop-up message is green and red. If there is no error then the output message should be reflected in green color and if there is any error then the output message should be reflected in red color. As we would choose these colors just to make it simple to the users because as a UX prospective you have to made it simple and clear. Hope you understand folks :)

Improve this answer
2
  • You are making assumptions, can you back this up by any data?
    – MJB
    May 3, 2016 at 13:04
  • Hello MJB, the simplest example that you are asking is Traffic Signal, RED signal is to stop and GREEN signal is to go. In the same way, we can go just for the simplicity of the end users. Thanks :)
    – Vivek Mehta
    Sep 28, 2016 at 19:26
0

If your website or software cannot handle regions, I would go:

  • Green for approval
  • Red for error

Why? Because the traffic light, whether region you are in the world are pretty much universal and understood. They all follow the same code.

To clarify the messaging and avoid misunderstand with color (also for our colorblind friends), I would add an icon next the explanation text of the approval/error. A cross icon for error and check icon for approval.

If you are REALLY concerned about that misunderstanding. Just change the icons for traffic light icon with the right light for the right situation.

Improve this answer

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.