When testing a front end it’s important to be able to understand and inform your teams on what the colours they’ve used can mean. We all know some general rules of thumb; red means danger (in the West*) and yellow and black are a warning, but what else can marketing psychology tell us?

This blog post comes about following a conversation with Vernon Richards (@TesterFromLeic) on Twitter where I’d shared some insights as to what different colour treatments of his blogs could mean. A number of people has a personal preference or mentioned accessibility considerations when it came to colour, but what about taking it further? I had a look at the different treatments that Vernon had created and gave some insights on how the use of colour could make people feel.

Using Colour Psychology to Convey a Feeling

Advertising uses colours to evoke certain feelings within us, by using a different colour palette we can be told what to think about a product. This has been happening for years, meaning that everybody around has had years of training telling them “oh this colour means you should feel like this”; it’s the same as knowing that a movie scene where it’s raining should feel sad or that music is a minor key is sad.

What this means for us as testers is that every colour comes with its own emotional baggage. Whichever colour you pick for your front end comes with the associated years of training that tells me to feel a certain way. We need to be able to ensure that we can understand the trained meaning behind colour so that our UI can enhance the messaging given by our product, not detract from it.

In the above image I’ve created two mockups for a scientific journal were the only difference is the colour, one is in blue and one is in pink. Take a moment to look at these images and reflect on which one feels more scientific and a more trustworthy source of information. You’ve likely concluded that the design in blue just feels more trustworthy, which is to be expected as we’re trained to think that way.

Making a google search of “science” and looking at the images you’ll see that the predominant colours are blue, black and green; they’re also bold colours. Looking at scientific journals, science websites and magazines you’ll also see that these follow a similar trend of being grey and blue. Whenever we look for scientific imagery and content our brain is trained to associate this style and colours with the content leading to an overwhelming view that science = blue and grey.

This training also makes the reverse true, that blue and grey = scientific. You can make any product feel more trustworthy and researched just by using the same colour palette as these scientific journals. So we need to be aware of the messaging we want to convey to our users and ensure that how we display our UI matches our messaging.

What do the Colours Mean?

There are a lot of great resources out there that describe the use of colours in marketing and colours in advertising that we can use as heuristics when testing for the look and feel of our products.

Here’s a general breakdown of what the colours mean:

• Red: Seen as bold and energetic, usually used to get people to act faster.
• Orange: Seen as fun, lively and cheap, used in a lot of discount brands.
• Yellow: Seen as innocent, friendly and optimistic, used in a lot of children’s adverts.
• Green: Seen as natural and hygienic, used to convey cleanliness and environmentalism.
• Blue: Seen as trustworthy, scientific, masculine and bold, used to convey a sense of power and calmness.
• Purple: Seen as luxurious and elegant, usually used to demote a premium product.
• Pink: Seen as young, innocent and feminine and is used in predominantly female targeting products.
• Black: The colour of chicness which is used to show luxury and traditionalism.
• Grey and White: These are neutral colours and convey a sense of stability and serenity.

In addition to the specific colour we can also think about how those colours are used:

• Bold colours convey a sense that something is solid and locked in. When it comes to information a bolder colour comes across as a more factual statement, something that’s immutable and correct and should be engaged with as such.
• Pastel colours are less shouty and more whimsical, giving the sense of creativity and discussion. When this is used information could be seen as up for debate or as an opinion. I call this the Etsy effect, where a site is more friendly and welcoming but flexible in what it’s telling you.

The above picture shows the same buy item card where the only difference is the boldness of the colours. See how the left one (pastels) is more friendly but the one on the right (bolder) seems to be pushing the user into action. Based on the vibrancy or boldness of the colours used we can add an emotional intensifier; pastel orange is more reserved in showing a good deal whereas a bolder orange is a bold statement of cheapness.

Looking at Other Products

Your product doesn’t exist within a vacuum. When we look at the design and colours of a product we can look at other things that exist to see the parallels that can be drawn (based on what it looks like).

When we’re looking at testing a product we shouldn’t just consider colour in a vacuum of “oh this colour means this emotion” but remember that a user is being trained that “oh these colours mean this thing”. That can also relate to colours feeling like part of a specific industry.

Example One: Can I trust this information?

In the above example we have a series of sites using the same blue and white theme to put across feelings of information, trustworthiness and technology. The social media page here is using the same theme and colours as a scientific journal, so information on here can be seen to be correct and scientific. In the reverse, the scientific journals might be seen to look like social media, a bastion for fake news and misleading content, which can be detrimental to a user’s view of the validity of the content.

Example Two: Is this a Bank or a Dentist?

In this second set of images a bank website is using a turquoise and purple theme, which is trying to give a view of youth and fun, but this ends up looking a bit like a dentists site. Many dentist offices use turquoise and white to have a clean, fresh and minty look about them, so we’re likely to associate these colours with dental hygiene; using this colour palette for a bank could cause confusion for a user.

Sharing these insights

When I’m sharing these insights back to my product teams I like to do the following:

• Do it early: It’s a lot easier to change something at the design stage from a wireframe than it is to recode something. If usability testing comes in as a part of a bug bash or final end to end testing then it’s likely too late to change and will get ignored.
• Add meaning: Explain how the user will be feeling and thinking as way of describing issues (both good and bad). You can give views of the psychology behind elements or detail how it looks like something else so this may lead users to think / feel this way.
• Add examples: Add pictures of related logos and websites to help reenforce messages as this can help to show emotional responses too. To that end, take screenshots and dump them into your notes.
• Reenforce the good: Remember to use charisma testing and point out where colours are working well and are enhancing a message.

Example Narrative: Colours on this page highlight urgency of purchase.

The colours used on this page are being used to convey a message of luxury and urgency with information being shouted at the user.

• The colours on this page are generally bold, meaning that the messaging is quite strong and in your face.
• The use of purple gives an indication of luxury in branding, that these are higher priced items but that quality will be high. this is used in the “spread the cost” messaging to indicate that the price is high, but it’s worth it.
• The use of red for the sales and pricing gives a sense of danger, triggering a fight of flight mindset. This gives a sense of urgency, that a user is in danger on missing out on this deal and needs to act fast.
• The general page is grey and white which provokes a neutral sense and is somewhat calming, but is in danger of being so neutral as to say nothing (or the amount of negative space makes a user feel lost and helpless).

Colour psychology can be used to enhance a message. When looking at the front end of your product why not look to see what the colours you’ve used are saying to your users?

---

* Remember that colours will have cultural meaning and be different based on the country that the users are in.