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‘:

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.

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.

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.

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?

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.

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.

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:

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:

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:



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

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


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:

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

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?

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?

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:

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

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.