Creating a Fabulous UX: Are You Smart Enough with Colours?

You have completed a website design for your client which looks stunning and functions exactly like the approved wireframe and everyone from your team is happy with it except the client. Sounds familiar? Okay, read on. You asked your client the reason for disapproval but the client can’t explain it except saying he/she is not finding it right and asks you to change the colours.

Probably you never thought that colour could be the culprit! As a web designer, you are already aware of the importance of colour schemes but given the fact that colours involve personal, social, cultural and psychological preferences, how do you understand that you are using the right palette for your clients and their audience?

Colours evoke different kinds of emotions and play a vital role when it comes to user experience. The colours and the context you choose for your website and its different elements starting from your text, bars to highlighting calls-to-action are crucial factors to make the user experience of your website as positive as possible. Visitors will have sharp reactions depending on the emotions the colours evoke and this is why website and UX designers need to thoroughly understand user preferences and the psychological tendencies that strongly impact the user experience.

However, when we talk about the role of colour in UX design, we refer to a lot more factors than just choosing an attractive colour palette. So, what are those factors? They are colour psychology, the psychological effects of different shades of the same colours, and accessibility. Here in this post, we will cover all these aspects of using colours to create a great user experience and maximize conversion rates.

What is Colour Psychology?

Colour psychology is a vast, complex and subjective topic. But we can break down certain finer aspects to make it more relatable to website design and UX design.

Some colours such as white, black and gray are used in almost every digital design and so they are referred to as universal colours in UX design. But the factor that can have an immense impact on a user’s perception is the use of other colours that are combined with these universal colours. The colour combination, however, will depend on the kind of website you are creating and the target audience. For instance, a complex corporate website design will evoke a completely different emotion or perception when orange is used as an accent colour than a modern minimalist website design that uses orange as their primary colour. Therefore, subtle differences in colour schemes can have completely different psychological impacts.

These emotional associations are influenced by certain factors such as culture, gender, industry, etc. Let’s take a closer look at these factors to understand colour psychology.

Cultural Influence in Colour: Cultural differences across regions do have an impact on interpreting the meaning of certain colours. For example, in some parts of Asia, the colour white is usually associated with mourning while in some Western cultures, the same colour is associated with purity, hope, and innocence. Some colours such as orange, yellow, green, on the other hand, usually have positive connotations in most cultures. Designers should always study the cultural implications of the colours based on the target group or audience before they incorporate them into websites or digital designs.What if the website or the product targets a global audience? Well, in such a case, designers have to make sure to balance the colours and imagery in accordance with the interest of the service but avoid negative cultural connotations at all costs.
The Impact of Gender: The role of colour in determining the quality of the user experience is also linked to gender. There are several studies that have established that men and women prefer different types of colours.Although it is difficult to segregate the colours in terms of gender based preferences, it has been observed that men have more inclination towards websites with dark colours or dark design schemes and women tend to interact more positively with websites that have lighter and brighter colour schemes. Some men are likely to be put off by websites with muted colour palettes while some women absolutely dislike websites with dark backgrounds and saturated accents.It is also interesting to note that the emotional reactions to or perceptions of the same colours are also quite different among men and women. For example, men find websites with darker colour schemes to be fun and exciting while women find the same as elegant and expensive. However, mid-tone colour schemes are surprisingly appealing to both genders.
Brand and Industry: Beside the above two factors, brand values, brand image and the industry play a vital role when choosing a colour palette. Colours are the key to establish brand recognition and you should avoid using a colour scheme that is nearly identical to your primary competitor. Even if you use identical colour palettes, as a designer you should be able to help the brand stand out by using these colours in different ways so that people can easily identify between brands even without the logo.Brands like Starbucks and John Deere feature shades of green in their logos reflecting a connection of nature to their products. Some brands use a colour palette that defines the entire industry. For example, red and yellow colour schemes define restaurant or fast food chains and these two colour palettes are often used by brands functioning in this niche. These colours trigger the psychology of the consumer to make a purchase.So, before you choose a colour palette for a brand, make sure to understand the business, its objectives and values and how the different shades and hues can affect them. Always choose the colour schemes wisely after assessing how they can impact the mood of the target users.

The Meanings and Emotional Associations of Different Colours

Different colours create a distinct response in the brain. As a result, when a user sees a certain combination of colours, some emotional associations are created in the brain and the user tends to connect to a vibe that he/she distinctly feels. Here we have compiled the basic meanings of some colours and the common emotional associations with them.

Red: This colour is commonly associated with power, passion, love, excitement, hunger as well as danger. Being a strong colour, it has the capacity to evoke strong reactions in people. According to colour science, red triggers the pituitary gland and creates an instinctive response. It helps to grab the attention of the viewers. You can play along with the hues like lightening it to pink or darkening it to maroon to create certain emotions. Pink is feminine and is also related to romanticism while maroon is traditional and can capture subdued vibes.
Blue: It is linked to feelings of serenity, peace, trust, confidence, intelligence, truth, faith, and devotion. Brighter blues are often used to denote communication as can be seen for social media brands like Twitter, Facebook and also in the computing and high tech industries to represent knowledge and intellect. Lighter shades of blue are mostly associated with health, well-being, meditation and peace and are often used for clinics, yoga and fitness centres as well as spas. This colour also brings the thoughts of skies and seas to mind and it can be commonly seen to have been incorporated into brands catering to the airline industry and shipping industry.
Yellow: When you think of happiness, cheerfulness and optimism, light, warmth, and positivity, yellow is the colour that comes to the mind first. It is commonly used in different types of designs for both children and adults. The darker shades especially gold is popularly associated with wealth and prosperity. The human eye notices yellow before other colours and since the different shades inspire energy and creative thought, this colour is a great choice for displays and websites that are based on creative industries.
Green: Green is usually linked to nature and environment, safety as well as freshness and well-being. However, different shades of green evoke distinct emotions. For example, darker shades of green are associated with prestige, position, and wealth. Lighter shades denote peace and calmness. Brighter and neon greens are often linked to growth and renewal.
Orange: TIt is popularly linked to creativity, energy, youth, and adventure. Orange is also a suitable choice to evoke a retro feeling. The brighter shades of orange appeal more to a younger group while the lighter shades are more popular in the upscale market.
Purple: It evokes the emotions of royalty, superiority, mystery, and mysticism. It is often preferred by creative individuals. The lighter shades like lavender are linked to sentimentality and reminiscence.
Brown: This earth colour is linked to resilience and straightforwardness but not all shades of brown attract a positive response from consumers. Shades like terracotta evoke positive responses while certain darker shades or lighter shades of brown are perceived as dirty and can incite negative responses.
Black: This universal colour is commonly linked to expensive, sophisticated and prestigious products. It is a serious colour that is both bold and formal. It is popularly used in the fashion industry to denote authority and elegance. But when using this colour in web and UX design, you should keep in mind that it absorbs and dilutes all the other surrounding colours which is why you need to choose the secondary colour wisely that is perfectly contrasting and complementing. Mostly, white and grey shades work well with black but it can also make vibrant and bright colours unusually stand out. It is also great for photography websites, artwork and illustration websites, and portfolio websites.
White: As discussed earlier, white colour stands for purity, cleanliness, simplicity, peace, positivity, goodness, light, and innocence. But the meaning and emotional associations change depending on the cultural regions. However, under general connotations, this universal colour is commonly found in display designs, advertising, health and medical industries, baby products, dairy industry, as well as fitness, nutrition, and technological industries.

Although these are the basic meanings and emotions linked to the above mentioned colours, it is not necessary that the emotions or moods can’t be influenced or perceived in other desired ways by working on different colour combinations, making variations in design elements or by simply altering or experimenting with the hues.

But this takes a lot of experience and finesse on the part of the designers to work with unconventional ways of combining colours and creating an awesome web design or UX design that really stands apart. Let’s understand this in a better way with a few examples.

How to Play Safe with Unconventional Use of Colours in UX Design

You can begin the experimentation with accent colours. For example, if you are designing for a law firm website, you can think differently about using some unconventional colours besides the traditional ones to appeal to a larger but appropriate audience. The popular traditional colours used in web designs of the legal industry are gray, navy blue or darker shades of blue, black and white. But to appeal more to a younger and modern audience, you can try using brighter and lighter shades of green as accent colours to make the website stand out.

Similarly, to create a modern insurance website targeted to a larger audience especially millennials, you can create an innovative design by incorporating accents like fuchsia combined with the traditional colour schemes. For real estate websites, you can try out experimenting with shades of peach and yellow to leave a distinct impression in an industry that is dominated by red, green and blue.

But how to use unconventional colours in UX designs and yet play it safe? The trick is to follow a simple theory of 60-30-10 Rule to create visually interesting and well-balanced colour palettes. This involves using one psychologically neutral colour that constitutes 60% of the colour palette, one complementary colour that constitutes 30% and a third colour as an accent that constitutes the remaining 10% of the colour palette. Practicing this rule helps to minimize the risk of stepping too far outside the conventional norms within a brand or entire industry. Accent colours can add a pop and elevate the design while making it unique and memorable. But when choosing accent colours, you should focus on user patterns and make it easier for users to understand, enjoy and interact. An intuitive user interface should be able to direct both the user’s attention and interaction.

Once you learn this art of using unconventional colours in UX designs, you can easily make the brand stand apart from its competitors.

Accessibility and Usability of Colours

When it comes to colours, the discussion remains incomplete without addressing accessibility and usability. According to research, approximately 0.5% of women and 8% of men have some form of colour blindness, the most common form being having troubles differentiating between shades of reds, yellows, and greens. When designing websites or user interfaces, you should keep this point in mind too. Avoid using colour combinations that could be difficult to distinguish for people with colour blindness. You can increase the value contrast between colours to improve the accessibility of your colour palette. You may also take the help of some colour accessibility testing tools to improve the user experience of your website or app.

The usability of your UX design is another significant factor that you should focus on when creating a colour palette. Colours play an important role in guiding the users through your website and app. For example, if you are designing a food app or website and you place an eye-catching orange-red box with the call-to-action for “Order” in the front and centre will help users know exactly where they can place the order without scrolling down page after page.

Conclusion

Colours serve as a tool to get your users to engage and interact with the content on your website or app and have a remarkable role in the quality of the user experience. The choice of colour also impacts the conversion rates effectively. Take a look at your website or app and identify which colours will initiate maximum clicks on your call-to-action buttons. Perform A/B tests to determine the colours that bring you a higher conversion rate.

As a web or UX designer, you should thoroughly understand the psychological impacts of colours on users besides the aesthetics. Capitalize on the emotional associations of colours and create a unique and well-designed colour palette to create great user experiences.