Find out the psychology behind color and subconscious communication in UI design
This is a Justinmind guest post written by Jack Strachan, Industrial Design student at Loughborough University interning as a User Experience Designer for Bosch Power Tools in Stuttgart, Germany.
Colour is a universal language that can be used to communicate different cultures, values, and ideas. Colour psychology is well established in UX design. Colour influences everything from mood and behaviour to subconscious design decision-making. However, there is a way to make colour an even more potent part of the user experience. How? By combining it with schemas.
Why is color psychology important?
Well, UI design wouldn’t be the same if everything were black and white. Colour plays a role in everything from designing UI buttons to conveying emotion.
However, using colour as a language to communicate your brand is not as easy as it sounds. Once you embrace colour as a communication tool, the normal rules of colour psychology in your brand become more complicated. Let’s take a closer look.
Schemas and colour psychology
A schema is defined by Merriam Webster as “a mental codification of experience that includes a particular organized way of perceiving cognitively and responding to a complex situation or set of stimuli”. Or, in simpler terms, a schema is a collection of properties that our brain collects to create expectations of certain things. Thanks to schema, our brain is great at guessing what something is, even from just the colour.
This is relevant to UX design because we are always designing to improve experiences and surpass user expectations. When we relate to or challenge schemata, we are competing with a user’s expectation of what a product or service should be like; herein lies an opportunity to make the difference.
Wikipedia defines color psychology as “the study of hues as a determinant of human behaviour”, meaning that certain colours can influence certain moods, behaviours and thoughts. In design, marketers use colours to return a positive perception of their brand in order to increase conversion.
Both schemate and colour psychology are relevant to UX designers because they influence an experience. If designers have a good understanding of how colour affects a user’s mood and how to ensure their designs go above and beyond, they’re more likely to make their message stick.
How do schemas work with colour in web design?
Take a better look at most web pages. The text is black, the background is white and we are then naturally inclined to read San-serif fonts… ok, so the point is that these things make up our schema of what to expect when browsing the web. When we are talking about products we can also easily relate colour psychology to schemas. When we see red we expect a warning, yellow a hazard and white a neutral backdrop for other colors. But really this is just scratching the surface.
How brands can combine schema and colour psychology
Blindly following accepted colour psychology isn’t always the best way to make a memorable or delightful user experience. But this doesn’t mean that color should be an afterthought.
Naturally, having sweated over your brand’s colors and finally making a choice, you want to slap those bad boys everywhere you can. Website, office supplies, Twitter homepage, phone case– you name it and it gets branded, points out Val Geisler.
However, by using schemas, UX designers can ensure that brands don’t make these mistakes. For instance, making sure the color of a Call to Action button is best suited to the type of action the user will carry out. Google’s material design reinforces this use of colour schemas in their guidelines.
On the other hand, brands could use colours to challenge user schema. One of the best examples of this lies in advertising – where brands use the colour they are identified with to change or enhance the colour of an object with a common perception.
Schemas are proven methods to make a message stick. Brands can either choose to relate to user schema or challenge it. As long as they manage to peak interest, a user is more likely to remember the message.
To break this down – When schemas are used to challenge a users perception of a product or brand, that generates attention. Combine this with the use of colour psychology and you can start to control the emotions and mood your schemas influence. All of these parts make up a recipe to ensure your brand values stick.
Colour is a universal language that can be used to communicate different cultures, values, and ideas.
Product application and color choice
But that’s not all. In order to start developing a colour language throughout your brand, the final piece of the puzzle is to consider the context of the application of the product.
A direct example could be a gardening product based on the colour of the things you may find in the target user’s garden. By using a base range of colours that relate to different aspects of the garden’s personality, you can design in accordance with your brand and target user base.
This can either be done by challenging existing environmental schemas of the environment – by choosing a contrasting colour – or by relating to the existing schemas and choosing colours that can relate to it – greens or earth tones.
It’s easy to choose between the two when you know your brand’s core values – are you there to blend in or there to be memorable? Once you’ve considered the brand, colour psychology and existing schemas, colour can start to choose itself. But by testing this against the context of application, your brand will be using colour as part of your design language.
Schema and color communication – my conclusion
Colour psychology is based on our existing schemas that encourage certain emotional responses. So on a surface level, it’s easy to use colour to induce these emotional responses in our designs.
However, on a deeper level, colour can mean so much more to someone. Color design can have lasting effects on a user’s relationship with a product or brand.
With an effective colour strategy, brands can ultimately define their own design language. My favourite example is close to my current internship with Bosch Power Tools — Green defines DIY tools whereas Blue defines professional tools, and Bosch use this colour language to communicate their products.
A quick final summary of a possible colour language guide for UX
- Colour psychology defines surface level emotions
- By combining colour psychology and schemas, we are able to make our messages stick and/or ease interaction
- Application and use cases can act as filters for colour in order to define design language and the brand