Colour psychology in commerce

Colour does not add a pleasant quality to design — it reinforces it. These are the words of the impressionist Pierre Bonnard. How do they relate to e-commerce? If you want to influence customers purchase decision in the store, you must use persuasion to strengthen your message. You have a whole set of tools for this - one of them is the right use of colours. How does it look in practice?

The colour has power. How do we know that? Just think of the Coca-Cola, and you'll see the red. It's not the most reliable experiment, but it shows you that colours are related to the way we interpret the world. In short, people are visual beings. This is confirmed by research - our brains are able to process images that we have only seen for 13 milliseconds. What can we learn from colour research in an e-commerce context?

  • Colours affect the overall perception of a website's appearance: data from the Institute for Color Research show that people make a subconscious judgment about a person, environment or product within 90 seconds of first seeing it. Moreover, between 62 and 90% of this judgement is based on the colour itself. What colours we use in a shop will affect the recipient's first impression and how they remember the page. This is important, given that 52% of shoppers do not return to the website because of its overall aesthetics.
  • Colours affect brand perception: according to researchers at Loyola University, colour increases brand recognition by 80%. With the right choice of colours, shoppers can recognise the brand more quickly among the vast array of other products available on the market. Colour can, therefore, strengthen consumer confidence in the store.
  • Colours affect the purchase: 92.6% of respondents to a 2004 study by Seoul International Color Expo stated that they attach the greatest importance to the visual layer when buying products. For 84.7% of them, colour accounts for more than half of the various factors relevant to product selection.

Colours & psychology

How to select the right colours for your store to increase sales? When you think about the fact that the human eye distinguishes about 10 million different colours, this task seems to be a mission impossible. However, the psychology of colours comes to the aid of the psychology of colours.

You have surely heard that colours influence our emotions, e.g. blue provides peace and safety and yellow provides energy and optimism. Research on this subject was conducted in 2004 by scientists Kayah and Repps. The results showed that 75% of the participants combined yellow with happiness, but also with excitement and energy. As far as blue is concerned, over 60% of the participants said that this colour makes them calm, and 10% indicated happiness. It seems that it's enough to reach for these studies to choose the best colour for the shop. Unfortunately, it is not that simple.

Why? These tests were conducted under laboratory conditions. Therefore, they may not have a practical impact on e-commerce. Moreover, scientists still haven't found answers to many questions concerning the perception of colours, e.g. whether there is a relationship between colour preference and personality, and yet people with different temperaments and characters are reaching the shops.

When choosing a colour for the store, keep an eye on it:

  • The perception of colours by people from different cultures - colours means something different in different latitudes, e.g. red in Western culture is perceived as a threat, anger, love, passion, excitement. Meanwhile, in Eastern and Asian culture, it means joy, happiness and celebration.
  • The perception of colour by people of different ages - according to a survey carried out by Joe Hallock, our preferences for colour may change with age, e.g. when people get older, their preference for violets increases, while their preference for green is decreasing.
  • Colour perception by men and women - there are studies that say blue is the most popular colour among both women and men. The most disliked colour, on the other hand, is brown for men, and orange for women.
Color psychology
Figure 1: Graph showing gender preferences for colours
The results are based on a survey of 232 people (79.3% came from the USA and the remaining ~ 20% from 21 other countries). Źródło: www.joehallock.com/edu/COM498/preferences.html#favbygender.
  • Colour perception by people with visual impairments or vision disorders - about 8% of men and 0.5% of women have various problems with distinguishing between selected colours. In this case, the choice of colours determines the availability of the shop for as many users as possible, regardless of their health condition (e.g. visually impaired people) or situation (e.g. while driving a bus, when it is more difficult to concentrate). Awareness of this is important when you want to highlight an element in the shop with colour, e.g. the call to action button.
Color psychology
Figure 2. Amazon seen through the eyes of a person with a red recognition disorder
The call to action buttons are no longer as clear as in the original, but the person with the defect can still recognize them. A view generated by the Chrome - Colorblinding plug-in. Source: amazon.com

#Tip

How to ensure that blind people can "see" the colours of products in the shop?

Blind people "read" the content of the website using synthetic speech. One of the elements that will provide them with free access to information is the correct description of images and graphics using alt tags in the page code. In alt tags, place what is in the image in a shortened form.

Example:

<img src=“image.jpg” alt=“Red bag. Classic cut. Gold metal decoration by the flap. =“image tooltip”>.

This way, the person using the screen reader will have access to information about the product colors.

Forget about the fortune-teller

The use of colours is only part of the overall shop optimisation strategy. The conversion is influenced by many elements - from copywriting (product descriptions, claim slogans), through the way the assortment is presented (photos, graphics), navigation design, to the page loading speed or how you guide the consumer through the entire purchasing process.

Unfortunately, there is not much accurate research on colours in e-commerce or a list of best colours for shops. Relax, however, we are not completely helpless when it comes to choosing a colour for an online store.

Design is all about functionality and usability - not about whether a given colour is pretty or not. A colour is a tool that helps to direct the user's eye to the place we want to emphasize. A good webshop interface uses colour to draw the user's attention to a particular place (e.g. towards the action buttons) and influence their overall experience of using the site. Therefore, instead of speculating, research to better understand your customers and their color preferences.

Colour tests in the e-shop

So how do you know if a particular color is a good choice?

Idea 1: User preference test before implementing the store

To select the colours that will work for your customers, it is worth collecting feedback from your target group. The earlier you do this, the better. The perfect moment? Definitely, before the design of the site is released or before major changes are made to the site's colors.

You can carry out the survey using preference tests. This test shows two or more color variations of the page and then asks users a number of questions.

#Glossary

Preference test (preference mapping) - participants interact with several projects and review them to determine which they prefer and why. They compare aesthetics, interactions and/or content. Preference tests are used in marketing and brand research, but can also be adapted to other areas, such as testing the usability of a store.

How to prepare for the preference test?

  1. The purpose of the study - determine what you want to study. Take into account the utility aspect of the service, which also includes aesthetics. In our case, we examine how users perceive the colours used in the service.
  2. Select a group of users - you can research your own group of users by sending them a link to the test or use the users offered by research agencies or testing tools.
  3. Prepare project versions - you will show them to users as the first stage of the test. Users choose one version to which they answer questions next.
  4. Prepare questions - this is the most difficult stage of preparation, as badly asked questions can have a negative impact on the quality of answers. The basic question you can ask is about users' associations with the colour scheme of the selected project - respondents should choose it e.g. from a tag cloud. In the in-depth research you can ask more questions, e.g:
    • What did you like most about this variant of the store?
    • What in three words would you describe the chosen design?
    • How do you feel about the shop design on a scale from 1 (very unpleasant) to 5 (very pleasant)?
    • Mark the words that you associate with this project (comfort, safety, splendour, creativity, concentration, etc.)?
    • How likely or unlikely are you to trust this company?

Will the preference test indicate unequivocally which version of the page will convert better? Not exactly. Remember the data from the beginning of the article, which says that colour is one of the elements that influence the overall impression of the recipient on the shop, the perception of the brand and, consequently, purchase decisions. Therefore, the result of the preference test can be treated as a directional indicator for choosing the right color scheme.

Idea 2: A/B test of the call to action button

The effective colour of the call to action button in an online shop is a topic that arouses a lot of emotion and controversy. A few years ago Oli Gardner from Unbounce wrote about the so-called BOB, or Big Orange Button - claiming that orange is the perfect colour for the CTA button. Does this mean that everyone should use this colour? Of course not, because there is no such thing as "universal colour that affects conversion". In such cases, the basic rule is: I check.

To see if the color change will affect the conversion in the webshop, do an A/B test in which you compare the two color variations of the button. .

What to keep in mind when doing an A/B test?

  1. Test every change in button colour - every colour change is a new A/B test.
  2. Change the colour of the button for testing according to the colour scheme on the shop's website. The call to action buttons do not function independently - they are surrounded by other elements of the page, e.g. if the base colour is green and all buttons so far have been green, test the variant with the colour contrasting with green, e.g. red.
  3. Test the button colour, without changing other elements at the same time, e.g. the content of the call to action or its location. If you change more than one thing, you will not know what affected the conversion.

Can changing the colour of the call to action button affect the conversion? Yes - one of the known examples is a test conducted by HubSpot, which showed that the red button on the website was 21% more effective than green. Another example: Andreas Carter Sports changed the colour of the "Add to Cart" button from green (which was the base for the shop) to blue and reduced the number of abandoned baskets by 50%. Interestingly, for many fashion brand stores, the colours of the action buttons correspond to the overall colour scheme of the brand - yet they don't blend in with the environment and form a coherent whole.

#Bad practice

Not without a reason, only 7% of e-shops (from the global TOP 100 list by Alex) choose grey as the colour of the "Buy" or "Add to Cart" button. The button in the picture below does not stand out on the product card, which may adversely affect conversion. The color of the button is blurred and the contrast between the text and background is too low.

Color psychology
Figure 3: Wrong color selection on the call to action button. Source: bellemaison.com

#Good practice

Big e-commerce players are doing a lot to optimize conversions, so it's worthwhile to look at what colours they use on the buttons. Amazon has chosen orange (the so-called Big Orange Button). eBay has chosen blue, which, according to the psychology of colour, is a good colour if you want to make customers feel that they've made the right purchase decision.

Color psychology

Figure 4: Selection of colours of call to action buttons by e-commerce giants. Source: ebay.com

To be remembered

The most important thing in choosing the right colour for an online store is not at all… choosing a colour. It's more simply a combination of many elements, i.e. maintaining contrasts between individual colours, choosing the colours of action buttons that will stand out on the site or the appropriate display of the range. Remember also that something that worked for someone else will not necessarily work in your shop - so always do your own tests. There are so many elements affecting conversion in an online store that, unfortunately, changing the colour alone will not solve all the problems associated with increasing sales.

The article was published in "E-commerce & Digital Marketing" magazine, no. 11/2019