The User Experience And Psychology Of Colour

Featured image for The User Experience And Psychology Of Colour

There is a lot of psychology in colour, and while I don’t claim to be an expert, every now and then I come across something that seems to be rather counterintuitive.

I suppose there are some cultural influences on colour as well, and people need to take these sorts of things into account when designing sites, but there also seem to be some ideas that cross over cultural lines.

Today I want to take a quick look at the colours that I would assume we’d all connect with a certain response – say the colour of success, the colour of failure, and what colours you expect to see in form fields when you are doing things right or wrong. What colours come to mind when you think of a ‘Success‘ message? What colours come to mind when you think of doing something wrong?

I’ve set up a very quick, very simple test to have a quick look at this topic. You can head here to take the test so we can have more than just my opinion on the topic.

Once you’ve done the test feel free to leave a comment at the end of this post sharing your thoughts on colours and design. Read on to see a comparison of a few popular sites, the conventions they follow and some quick insights from the test you just took.

Why Colours?

I have to say I’d never thought about this until I came across a success message on GetClicky.com (a service I love) that told me I’d successfully completed adding my Feedburner URL to my account in a colour I affectionately refer to as ‘warning red‘:

image

I actually thought I made an error somehow (without reading the message – my bad) then went back and repeated the task before I realized I was being told I had successfully completed the task. In ‘warning red‘.

I had to think about this for a moment; why would I associate red with failure? Was this just the strange way my brain was wired, or is there a convention here that we’ve all learned to follow?

I decided to look at forms on several popular sites and see what conventions (if any) they followed. The sites I chose to take a look at were Gmail, Twitter and Facebook – all very popular sites that (should) have put some serious thoughts into their designs and usability.

The Sites

Gmail:

Example: Gmail username, unavailable.
They have used red text to show you that the name is unavailable, which seems sensible to me. They want to draw your attention to the fact the username is taken, and to tell you that you need to select an alternative.

image

Example: Gmail username, available.
Here they have gone with blue text. I’m not quite sure why they’ve done this, although perhaps our test results might shine some light on this. Everything is as it should be, so they just want you to move on to the next step.

image

Example: Gmail password, weak.
Again they have gone with red text to draw your attention to your passwords strength. They obviously encourage more secure passwords and are trying to encourage you to make changes.

image

Example: Gmail password, strong.
Here they have chosen green text to indicate a strong password, as opposed to the blue text when your username was available. Perhaps they use green text for behaviour they encourage?

image

Twitter:

Example: Twitter Name/Username/Password.
As you can see, Twitter uses several different colours to indicate different things. They have gone with green text to show the first field is OK, red text to show the username is taken, and grey text to show the password is too simple (I typed 123456) – interesting little security measure actually. So far green is looking to be the colour of success.

image

Example: Twitter passwords.
Very interesting to see Twitter uses a range of colours to communicate different meanings with regards to passwords, starting with a red-ish colour, and progressing to green to show different levels of security for your passwords. Really simple, visual way to communicate their message.

image

Facebook:

Let me say this: I was actually kind of surprised how hopeless the Facebook sign-up process is – it doesn’t point out any errors until you’ve clicked on the sign up button, and it seems only to be capable of pointing out one error at a time. Anyway, on to the colours:

image

Example: Facebook sign-up.
You can see Facebook has gone with red text to warn me that I need to enter my date of birth before signup. It’s pretty obvious, and stands out very well. Strangely it can only display one error at a time, and doesn’t provide helper text to tell me the requirements of their fields – for example, passwords longer than 6 characters, and only being allowed one capital letter in your name – yes, it stopped me for this. At least they are consistent with the red text though.

The Getclicky experience

So, back to the Getclicky example – red text for confirmation. I tweeted the Getclicky team and here is the response I received:

image

Now, this is an interesting point – they use red because it is better for attracting users attention, and regardless of what message they are trying to communicate. A quick look around the site shows the trend:

image

image

image

Of course, when it comes to comparisons with the competition they follow the green=positive/confirmation message:

image

And what’s this? Red text for unsaved changes, with green text after it’s been saved:

image

image

Interesting; a bit of variety in there, but by and large they do seem to enjoy using red to try to communicate their message. They could still do with being a bit more consistent though. Let’s see how this matches up with our results.

The Results:

Here are the results as of writing from our quick test (you can take it here if you skipped over it):

As you can see, green is the colour people most associate with success, with 76% of respondents choosing this colour to mean success. No one chose red:

image

A whopping 88% of respondents chose red as the colour of failure – glad to see it’s not just me:

image

Interesting results for this one: 71% of respondents chose red as the colour that stands out of the most (from a limited selection, obviously), and 18% chose green. Do you think this means we should use red to communicate all our messages in the future?

image

In this task, 59% of people chose purple, and 35% chose blue. I’m not sure I can think of any sites that use this kind of purple colour in any way, but there are a number of sites that use this shade of blue with Twitter and the Tweet button coming to mind. Do you think these numbers would affect how people interact with the buttons?

image

88% of people went with green for the message ‘you’ve successfully completed the task’ – it seems a large majority of people associate green with success or confirmation:

image

Red is the overwhelming favorite in the results so far – 94% of respondents chose red for warning text:

image

What does it all mean?

So it turns out it isn’t just me that associates red with failure and green with success. I am all for innovation in design, but there are times and places where conventions should be followed, and in my opinion this is one of them.

While our results show that from this limited selection, red is the colour that stands out the most, that doesn’t mean we should use red to communicate all of our messages. The results show that using red text as a positive confirmation is counter-intuitive and could make things more confusing for your users.

I think Twitter is the best of the examples we’ve looked at here – they use colour extremely effectively to communicate a wide range of different messages, and while this may only save a small amount of time or frustration, it really does help people reflect more positively on the service.

Red text isn’t nearly enough to stop me from using Getclicky (and in fact I would recommend it to anyone), but small tweaks like this could really lend to a more positive user experience. As it stands the site isn’t even 100% consistent on it, which makes it all the more confusing, and consistency, along with following certain conventions really is key.

The takeaway message

Conventions are generally there for a reason, and it certainly looks as if people are very accustomed to the meanings of colour on the web – while some colours might stand out more than others, using green text certainly isn’t going to mean people are going to miss out on the message.

Consistency is also a key component. If you are going to do it somewhere on the site, you should probably do it everywhere on the site. If you’ve got things set up one way in one area, and a different way in another you will just confuse your users and produce a frustrating experience. Keep it consistent.

And the key point: usability testing is the best, most reliable way to know what your users want – after all, everyone interacts with websites in different ways. The audience of this site is different from another, as are the conventions we think should be followed. Test for your site and your audience to know what will work best for you.

As I’ve quoted before; “Build it and they will come. Build it well and they will come back“, and after all, isn’t that what we are all aiming for?

Do you have any thoughts on colour and design? What colours would you use for success of failure? Is there something else you would like to see tested? Be sure to let us know in the comments.

Popular Articles

53 thoughts on “The User Experience And Psychology Of Colour

  1. Yes, right colour choice can be very important in website development. And a designer should take into account a colour psychology, so that a colour stectrum will suit to a main website goal and activity.

  2. I’d like to know how many people who didn’t choose red for failure or green for success, were actually color blind.

  3. This is very interesting as an analytical exercise for the colour choices associated with success vs failure/warning messages. It does raise the question in my mind about how effective the red/green contrast can be for people with red/green colour-blindness. Teaming a colour with a conventional icon (e.g. a tick or a cross, as per one of your examples) is helpful in this situation. Definitely something to consider when usability testing.

  4. hey that’s great article

    i am fully agree with this article. designer only design the product. user experience area is very broad.

    User experience refers to the way a user perceives his or her interaction with a system. User experience design encompasses both interaction design and visual design and seeks to promote an interface that is pleasing to the user. The study of user experience often focuses more on the psychological impact of interacting with the system than pure usability does, and user experience experts will spend their time performing both ethnographic and psycho-graphic research to construct their interfaces. User experience design is more qualitative than usability, though the two are not necessarily exclusive.

    Usability differs from user satisfaction insofar as the former also embraces usefulness
    More efficient to use—takes less time to accomplish a particular task
    Easier to learn—operation can be learned by observing the object
    More satisfying to use
    Learnability: How easy is it for users to accomplish basic tasks the first time they encounter the design?
    Efficiency: Once users have learned the design, how quickly can they perform tasks?
    Memorability: When users return to the design after a period of not using it, how easily can they re establish proficiency?
    Errors: How many errors do users make, how severe are these errors, and how easily can they recover from the errors?
    Satisfaction: How pleasant is it to use the design?

    Thanks
    UXgru.. uxrevision.com

  5. Some interesting research. I definitely agree that red = fail and green = success and I think it’s best for sites to stick to this convention, as it’s pretty well recognised!

  6. This has got to be one of the most interesting article about Clicky I’ve ever read. :)

    I absolutely agree that it might be confusing to some people. Green good, red bad – that’s tradition. But ultimately what I care about most is that the message is as visible to the user as possible, and your results for that test show that we definitely achieve that goal. In my non-scientific opinion, messages that the average site spits out are too easy to miss, even by a guy like me who lives and breathes web sites and sees every detail of every page he looks it.

    As for the two inconsistencies you mention:

    – The comparison chart needs to use multiple colors so the yes/no/kindas stand out from each other. So in this case we want to use the green good, red bad association. But in all other places on the site, when I want you to see something more than anything else on the page – it’s red. That’s all I care about, that you see the message. If it potentially confuses someone psychologically, I’m ok with that – at least they’re seeing the message that I want them to see. (Although I have noted that you didn’t even read it the first time because you thought red=bad ^_^)

    – The saved/unsaved thing, well that page is kind of strange since it’s not a typical form. So when you make changes to that page, I want the “unsaved” message to stand out big time so people don’t miss it, so they know they have to click the “save” link to save their changes. I consider “unsaved” to be one of our standard messages (hence in red), but once it’s saved, it doesn’t need to stand out anymore.

    I appreciate your analysis and feedback!

  7. Colour blindness: some of those schemes seem to do little to warn or confirm other than change colour. For example, if you were red/green colour blind and were looking at the Clicky comparison chart, visually there is little difference between a red circle with a small minus sign inside versus a green circle with a small tick in the middle.

  8. Quick note – I also don’t really read the messages, but look at the colours of messages, if it’s in red I look to see where I’ve gone wrong automatically…

  9. Great article!

    Green for sucess, yellow for caution and red for failure had been a standard for years. If you want to change that you should have a very good reason.

  10. I am red/green color blind and I can confirm that using Red for error conditions and Green for success conditions is very annoying. For people like me, using a different color for success ( such as Blue) is very helpful.

  11. Thanks very much for the reply, and glad you enjoyed the article. It’s neat to get insight from your perspective as well. I’m suppose most people would probably read the text, but when ever I see red I just think ‘fail’. I know I should read, but I guess this is quite a strong mental association.A few people have raised the issue of colourblindness as well, which is a pretty interesting point – not sure if you ever tested the design with anyone who is colourblind? Anyway, I really do enjoy using Clicky – some really neat features in there – and as I said, the colour thing isn’t even close to enough to stop me using it. Keep up the good work.

  12. Thanks for your comment – this really is a very good point, and something everyone should consider. Ticks and crosses really are a good idea. Cheers for raising this.

  13. There might be some subtle shades of different meaning between some of the terms being used in this article and in the comments. We’re talking about red meaning ‘failure’ but also (Sean below) as ‘bad’. I suspect in other contexts (e.g. morality), people might think of black or dark colours as bad, and white as good (coming from night and day). It probably depends on context, and exactly what kind of ‘failure’ you mean. Maybe dark colours (e.g. the purple) are more ‘gloomy’ and we tend to feel gloomy if we fail.

    Red is also commonly used to colour ‘delete’ links. Is deleting something the same as failure? One other concept often associated with red is ‘danger’. Perhaps that comes from the sight of blood, or of certainly brightly coloured, poisonous animals or plants? In this sense red means ‘look out!’. Perhaps delete links are red because deleting something is potentially dangerous – we might not get that data back. Putting invalid data in a form field could also be seen as a sort of danger – we’re being warned that our action hasn’t worked.

    If you tested this in China, I imagine that a lot more people would have associated red with ‘success’, since it is an auspicious colour in that culture. So you might want to consider how you colour failure messages if you were designing something primarily for the Chinese market, for example.

    Aside from the psychological implications of colour, there are these conventions building up on the web. And of course as interaction designers, we need to pay attention to these.

  14. Thanks very much for the thoughtful comments Ben.

    Interestingly enough the first few people who took the test were Chinese, and they also expected the colours to have the same meanings as Western users. A quick look at some popular Chinese websites (Tudou.com, Renren.com, 163.com) shows they follow the same convention of using red for warning messages, despite the fact that red is an auspicious colour there.

    One of our Facebook fans left this link on our page: http://bit.ly/h7UNMv – it’s from the Japanese stock exchange, and shows how red shows positive growth in stocks, and green the inverse which is an interesting reversal of roles. Nonetheless, if you look at traffic lights from all around the world as an indicator, every country I know of uses red as stop and green as go – which I suppose is a very similar message to what I’d imagine red and green to mean on websites.

    I think the key point is where ever you are working, and whatever you are working on, you should look closely at your audience and perform testing to be able to develop a site most targeted at your audience. That’s my two cents anyway.

  15. Interesting that most people chose purple as the colour that stands out the most (I didn’t, I chose the blue). I think it is possibly chosen as standing out precisely because it isn’t used that much. It strikes me as a bit like putting a horse next to a zebra and then asking someone who works in a safari park which is the one that stands out.

    Somewhat ironic too that this website makes quite a lot of use of red for things that aren’t warnings e.g. the Related Entries links and the Popular Articles and Recommended Resources headings. Even the names of commenters are in red.

  16. I have to say red is definitely a color that is nearly always associated with stopping, caution, or danger and green is generally associated with succeeding or proceeding. As far as standing out though, I am most in favor of contrast over color selection. I believe if your page’s background has a dominant red color, then red text is going to stand out less than say blue might. For links I have to say I’m a big fan of mouse over effects as well. I think once there is motion involved it is just begging to be clicked. Not that the motion should be overwhelming in any way. I like the underline on mouse over for text links for instance.

    One thing I find kind of a toss up about red though is that most associate it with either danger or even anger, but many seem to forget about it standing for passion. Think how much we see it around Valentine’s Day. I have to say red is the most confusing and hardest color to decide on when and where to use.

    Great article by the way. I’m always fascinated by the psychology side of web design and development. I tried to take the test as unbiased as problem, trying to click my decisions without thinking about it from a designers point of view and trying to choose instinctively. I was surprised for whatever reason, I associated failure with blue. I think my brain went straight from failure to depression, hence the choice in blue.

  17. This is an amazing article. I’ve shared this with my co-workers!

    I agree with the concept and theory behind the association with colors. Nice job Jacob

  18. We’re trained from an early age that green means go, yellow means slow down or watch yourself, and red means stop. It’s reinforced in almost every elementary school classroom in America as a disipline tool. Teachers mark things that are incorrect in red, I use red to do edits for co-workers. Makes perfect sense, I’m surprised that designers don’t default to those colors for those purposes out of some subliminal habit.

  19. Thanks a lot Bryan, I appreciate it. Glad you’ve found it useful. I’m glad it turns out I’m not the only one who sees things in this way. Cheers.

  20. Thanks very much fo the thoughtful comment David. You are right about red having mixed messages; I guess we can separate in our head what each message is trying to communicate, but we can get confused when conventions come in to play – like the red text for warning messages.

    It’s been quite interesting to see the results of this test, and fascinating to see different reactions to the colours as well. Blue = depression is certainly an interesting possibility, and puts yet another interesting spin on things. Evidently there is a lot to consider when choosing colours in your designs! Thanks again for sharing.

  21. So red is “warning/negative” and green is “ok/positive”. Did we really need a huge article to explain that?

    I think I knew that already :)

  22. I suppose the easiest way to accommodate colour-blind people with the red = failure, green = success scheme (apart from identifying the text with a clearly visible tick or cross) is to carefully choose the shading so the two types of text appear to be different. You’d want both to have a clear contrast from the background, but perhaps red having a greater contrast than the green. It wouldn’t surprise me if there’s a tool somewhere that simulates how a colour-blind person would perceive a page / image, or resources / tips from support organisations for colour-blind people.

  23. Do you have any data on which color combinations users will look at for the longest period of time? You are correct about using conventions and my hope is to identify overall UI color schemes that result in the longest sessions possible.

    Great article!

  24. There was a glitch in my mind when I answered the first question, which color indicates success. I thought of blue beeing a color I connect with a succesful business and not success in completing a task, hence my answer there is wrong, should have been green instead of blue.

    Interesting thoughts on color though.

  25. A few years back I had a client that insisted on having prices in “warning red” as opposed to green, because they said they stood out more. I know that Amazon do this, but I do not feel it is a sensible approach, given that red numbers are normally associated with threatening letters from the bank.

    Although in saying that, I’d love to see some A/B testing on this.

  26. Cool test and articles…. agreed with the other comments, this psychology extends far beyond the Internet, so it makes sense to understand and use these conventions. Using color to convey a simple ideas is a very powerful tool.

    Red is associated with Failure (remember getting English papers back in grade school? or a big fat F?) Red also means Stop (stop signs, stop lights, warning signs). It is used for to represent strong emotions, love, anger, or even violence and danger.

    Green is associated with money/financial success, “go” (stop lights), as well as nature (plants/growth).

    We are practically set from birth to view colors this way, I think. So, it makes total sense.

  27. Great article. Interesting that red and green have a fairly standard meaning even internationally, with blue being somewhat positive/neutral (I also thought blue for “business success”).

    One thought with regard to the test – when asking which color stands out most/least, I wonder if the position of the color in the grid has some effect on the choice. It may not matter for “red”, but it might make a difference between blue and purple just because people are likely to look in the top left first.

  28. Thanks, the article is very interesting and important, it forces to think on this subject that I think the most important criterion for a good article! Psychology of color is a very contentious issue at times. For example, if you design web pages is made in red or on the page there are several colors in a small amount each, then of course the red links or other labels will not stand out and evoke emotion. I know an example when the red warning site were white, and caused the same reaction as red in Google. Actually, I think that the ideal can be considered white site that is important information, any color will attract attention. And that’s what weirdness I’ve noticed: despite the fact that the green color most people think of the color of success, the color of money, the pages made in this color, and many sleep. Have any ideas as to why the most inconspicuous, in the opinion of most people, the purple color, was considered a royal color, the color of high origin, color, rich in Rome?

  29. Sean, I think you might be missing one really important fact.
    User’s don’t read.
    That in combination with reloading the form (in the Clicky example Jacob illustrates above) and display a success message in red will have an impact on the usability.
    Yes, the user will notice you message but not read it. Many users will associate the feedback given with failure and look at what went wrong in the form (which is what happened to Jacob in this case).

    Maybe it would be better using a graphical element to attract the users attention rather than the color of the text?

  30. Very interesting. But for your tests you should have considered different orders of the color blocks/squares. Means: a color “standing out” depends on its environment too.

  31. Good article Jacob. I agree that sites should follow these (somewhat obvious) usability guidelines in terms of their user interface, but some designers are under the impression that they can increase clicks just by painting everything red. Unfortunately, they seem to be correct at least part of the time, because one site that I did got a 7% increase in clicks when we changed the sign up button from green to red (?). I do agree with you that tactics such as this shouldn’t be employed when somebody is trying to fill out sign up forms, though.

  32. Hey Jamie, I’ve had several clients that wanted sign up/buy now buttons in red, and just for fun, I did a week long test of green vs. red buttons, and the red buttons won! Weird, huh?

  33. I think that making all site messages red is kind of a bad idea for obvious reasons. People know and accept that green is go and red is stop, therefore if they see a red message they will assume they have been stopped. Of course red might be more noticeable but at what cost? IT will hurt the experience drastically in my opinion to have success messages in red. Just my $.02. Awesome article though!

  34. Thanks for your comment Christopher. Interesting to see the results of your test; I think these things are partly cultural and partly from learned conventions. Maybe to start with red is more likely to attract peoples attention, but you can imagine if all the buttons, signup forms etc. on the web turned red, people would still start paying more attention to the other colours.

    I’d almost go so far as to say, using red for non-warning messages feels a little like an abuse of power – as designers and developers we can control these kind of things, and we should understand peoples expectations of how websites and messages work, so even if red did lead to a temporary bump in signups, it’s still not necessarily the right thing to do. Well, that’s my thoughts on it anyway.

  35. No question that web site designers should take the American cultural conventions of the stoplight into account, but I was expecting this article to have something to say about the psychology of visual perception and/or emotion-perception analogues. Isn’t this the social anthropology of color?

  36. Awesome article! I use the Clicky service too and I was confused several times by the red messages. Did I make an error or something? In time I get used to it, but it’s definitely counter intuitive – not all messages need to stand out in red. In my opinion, Twitter does it better than anyone else. Fortunately, the guys at Clicky decided to change things and I’m glad they listened to YOUR voice, Jacob.

    Regards, @VaultNews

  37. I just think of the traffic light system.

    Everyone is brought up from a very young age to understand how that works – so it makes most sense to follow that convention.

Leave a Reply

Your email address will not be published. Required fields are marked *

* Copy This Password *

* Type Or Paste Password Here *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>