Paint it Black… UX, Colour Psychology and Web Design

Paint it Black… UX, Colour Psychology and Web Design

In this article we’ll be focusing on the psychology of colour, colour associations, brand style guides and colour blindness.

Psychology of Colour

Good designers know that at the heart of any great piece of design work, an important decision had to be made around colour choices. Why? Because designers know how much impact colour choices can have on how we perceive design. There have been many scientific research studies into the impact colour has on perception over the years, revealing some interesting results.

In 2012, Lauren I. Labrecque and George R. Milne carried out a research study entitled Exciting Red and Competent Blue. In it, they revealed that specific colour hues can provoke emotional connections, associations, and responses that can significantly impact peoples perceptions of brands, products, websites etc.

Meanwhile, Further studies into colour psychology and perception have produced headlines such as:

  • Colour can improve readership by 40%, learning from 55% - 78% and comprehension by 73% Click to Tweet
  • 62% - 90% of snap judgments about people, environments and products are made based on colour Click to Tweet
  • Colour increases brand recognition by up to 80% Click to Tweet
  • We perceive brands more favourably when their primary colour meets our perception Click to Tweet

Colour and Purchase Making Decisions

Colour has also been known to play a huge part in our purchase making decisions, a factor that companies such as Apple Computers have been keen to exploit.

In 1998 Steve Jobs, Jonathan Ive and Apple Computers introduced the desktop computing world to the iMac G3, the first desktop computer of its kind to feature translucent and brightly coloured ‘Bondi Blue’ plastic.

The introduction of the iMac G3 in August 1998 took the desktop computing market by storm, igniting a media frenzy. After all, this was a market that had only ever seen before ‘white or beige’ products. The G3, with its splash of colour and futuristic looks therefore captured the markets attention and got people to say “Hey, I want one of those”.

The introduction of the G3 also had a tremendous impact on the Apple’s bottom line. In 1997 Apple Computers was declared almost dead, after suffering a yearly loss $878 million. However a year later, under the renewed guidance of Steve Jobs, Apple Computers reported earnings of $414 million and declared its first profit in three years. These incredible results were underpinned somewhat by the remarkable success of the iMac G3 and the renewed public opinion that Apple was once again an exciting, innovative technology manufacturer.

 

iMAc-G3-colour

An advertisement for the iMac G3 in 1998  Source: Cereusarts

The Use of Colour in Branding

So, we now know how colour can impact our memory, perceptions, and purchase making decisions. Let’s now consider how colour can impact our perception of brands.

In the afore mentioned research study Exciting Red and Competent Blue we saw how colour can provoke emotional responses that can alter our perceptions.

Further studies, such as The Interactive Effects of Colours have gone as far as to claim that ‘brands can increase the likelihood of creating a positive perception by using appropriate colours in their branding’ (i.e. a users perception of a brand increases proportionally when they feel the colour being used in a good ‘fit’ what is being sold).

When designing corporate branding we can therefore use these two studies to help guide our colour selections by enforcing us to think – How do we want our branding to make our customers feel? and also what perceptions are we trying to give consumers?

We can see both of these principles in context when we start to consider the use of colour in the branding of some of the worlds leading brands.

colour-pshychology-branding

The colour psychology of branding – using colour to stimulate emotions. Source thelogocompany

Notice any distinct patterns emerging?

  • Exciting Red = Red is perceived as warming, exciting, and sexy and is often used to convey messages of urgency i.e. SALE NOW ON. It’s for this reason this hue is often connected to the entertainment industry with companies such as Nintendo, Nextflix and YouTube all featuring red as the dominant colour in their corporate branding.
  • Competent/Trustful Blue = Blue meanwhile is at the opposite end of the spectrum and is associated with feelings such as trust, strength, professionalism and dependability. It’s for this reason this hue is often connected to technology brands and banking institutions such as Dell, IBM, Intel, and American Express.

Colour on the Web & Brand Style Guides

The colours organisations use in their website will be largely dictated by the organisations branding. Often the organisation will have produced a ‘Brand Style Guide’ that provides regulations and guidelines for how the brand should be represented including topics on such items as the treatment of logos, colour values, and in some cases even copy guidelines.

Brand Style Guides are not a new concept, marketeers have been using them in some form or another for a number of years now to ensure consistency in printed marketing material. However despite being used in non digital environments for a number of years now, I’m still constantly surprised by just how many organisations have been slow to adapt the style guides for working in Digital environments.

In my experience, even when working with large multi national clients and leading design agencies on digital projects I often come across Brand Style Guides like the following for Starbucks which haven’t been adapted for working in Digital Environments.

starbucks-brand-guidlines

Starbucks brand guidelines. Source armymwr

When working online, special consideration need to be given to a number of different items that don’t need to be considered when working in non digital environments such as the use of web fonts, call to actions, iconography and colour values.

You might find the colour values itemised in the original Style Guide are listed as Pantone or CMYK values as they have been written in context for producing print material only. As such colours will need to be translated to Hexadecimal or RGB values to be used in the digital environments.

Furthermore you may wish to adapt some colours slightly or introduce secondary colour pallets to pass accessibility standards or provide added flexibility for colour coding areas of the website, making sure call to actions stand out etc. As such a digitally adapted style guide should look more like this example from HCA containing button sizing and styling options, icons, colour rulings and more.

hca-style-guide

HCA Style Guide

For those new to creating Digital Brand Style Guides I’d recommend reading Front End Style Guides (A Pocket Guide) by Anna Debenham which provides a great introduction to Digital Style Guides as well as some real life examples from Mail Chimp and the National Health Service (NHS).

Furthermore http://styleguides.io/ provides a great collection of free resources on Style Guides from stand out authors all over the web such as Brad Frost and Anna Debenham herself. Adobe’s Kuler is another useful free online tool that allows you to experiment with creating your own colour pallet online and even allows you to take inspiration from others in the Adobe community through user submitted colour pallets.

adobe-kuler-colour-selection

Adobe’s Kuler provides you with an colour wheel interface where you can quickly build custom colour pallets and take inspiration from pallets created by other users.

Colour Blindness & Accessibility

Other key factors to consider when using colour in web design are Colour Blindness and Accessibility Guidelines.

Did you know?

Colour blindness affects approximately 1/12 men and 1/200 women in the world. Click to Tweet
In Britain there are approximately 2.7 million colour blind people (c. 4.5% of the… Click to Tweet

That’s not to mention other users who may have some form of visual condition. Depending on the nature of you website this could make up quite a significant number of your user base.

It’s therefore important when we produce our website designs we ensure we provide the best possible experience to all users, including those who may be visually impaired.

We can ensure this by checking we have enough contrast between the colours we are using in our designs to provide strong visual boundaries between elements and stop colours from ‘bleeding’ (mixing) into one another.

The BBC do a great job here to protect the user experience of visually impaired users by setting clear guidelines around the use of colour. The BBC have dedicated a whole section in their Future Media Standard Guidelines to the use of colour and colour-contrast standards.

Web Accessibility Guidelines

The Web Content Accessibility Guidelines (WCAG) 2.0 provides a number of recommendations on how to make Web content more accessible. The guidelines are reviewed by W3C Members, software developers, and other W3C groups and interested parties. In order to pass WCAG 2.0 AA standards websites must meet the following contrast ratios:

level AA

  • 4.5:1 for normal text
  • 3:1 for large text (14 point and bold or larger, or 18 point or larger).

Level AAA

  • 7:1 for normal text
  • 4.5:1 for large text (14 point and bold or larger, or 18 point or larger).

Colour Contrast Analysers

So how do I test colour contrast ratios? Well, the answer is surprisingly easier than you may think.

There are many different free applications available for testing colour contrast ratios. A few of my favourites are the free Desktop application Colour Contrast Analyser and the web based Snook’s Colour Contrast Check.

Both of these tools provide a contrast rating score in the form of an ‘A’ score. In terms of contrast standards, you should aim to pass AA standards as a bare minimum; AAA results (as we’ve already explored) are better, however they require a lot of contrast, too much of which could have a negative impact on your designs or limit your colour pallet significantly.

Both of these tools also differentiate between normal and “Large” text which is 18pt and above (or bold and larger than 14pt).

snook-colour-contrast-check

Snook Colour Contrast Check

Simulating Colour Blindness

Going a step further, if you’re using applications such as Photoshop to produce your designs, you can simulate 2 of the most common types of colour blindness using the pre set tools available.

To view your design through the eyes of a colour blind user, simply select from the menu View -> Proof Set Up -> here you can select two options for colour blindness:

  • Colour Blindness – Protanopia
  • Colour Blindness – Deuteranopia

Using the Window -> Arrange command you can then preview how the website would appear for colourblind and non colour blind users side by side as I’ve done with the Thomson Holidays website below.

thomson-website-colourblindness

The Thomson website as viewed through the eyes of a colourblind user

Tl;dr

Colour can have a remarkable impact over how users perceive your design. When using colour it’s therefore important to be aware of colour connotations and their emotional connotations. Furthermore, when designing for digital environments make sure your style guides are digitally focused, have web orientated colour pallets and strong contrast ratios to provide a smooth and seamless user experience.

For more insights on Behavioural Psychology and design see our Behavioural Psychology and Design libraries.

Related Posts

Ads

Ads

My Social Footprint

Send this to a friend