Color Psychology of UI /UX Design — A Love Story!
Why is color important?
Color plays a vitally significant role in the world we live in. Color influences everything from mood and behavior to subconscious design decision-making. Color can sway thinking, change actions, and cause reactions. As a powerful form of communication, color is irreplaceable.
Color psychology is the study of how colors affect perceptions and behavior.
The effect of color can be a perspective of one another. We can not say different people would gain the same emotions by just looking into the same color. The idea of color psychology has been in the discussion for many years. A popular theory on color psychology is that a person’s mood can be influenced by the color, light and the surrounding. In the early stage of improving psychology, a famous color theory was brought out about regarding colors and emotions which was called “rose of temperaments” which was ideated by Goethe and Schiller, matching twelve colors to human occupations or their character traits (tyrants, heroes, adventurers, hedonists, lovers, poets, public speakers, historians, teachers, philosophers, pedants, rulers), grouped in the four temperaments.
What emerges from studying color, color psychology, the human ability to perceive color, and our tonal preferences, especially when it comes to UI/UX design — is that all can be influenced by a surprising number of factors including age, gender, cultural, and language background.
Does age affect color preferences?
When marketing your business, it is necessary to know who your target audience is, in order to tailor your marketing efforts accordingly. When researching users and their demographics, age is an element that should be examined carefully. Your target audience’s age influences their perception of marketing materials, especially considering that color taste and preference varies based on age.
In the book Color Psychology and Color Therapy, Faber Birren investigates which colors are desirable for different age groups. Considering the color psychology of blue and red, he found that blue is consistently preferable throughout life. As people mature they favor colors of shorter wavelength (blue, green, violet) rather than colors of longer wavelength (red, orange, yellow).
Gender differences: Men vs Women
Gender-related differences in human color preferences, color perception, and color lexicon have been reported in the literature over several decades. Research on color perception indicates that men favor bright, contrasting colors, while women prefer softer shades. Both men and women like blue and green, but many women adore purple while this color repels men.
Additional research in studies on color perception and color preferences shows that men were more likely to select shades of colors as their favorites colors with black added, whereas women were more receptive to tints of colors with white added.
When designing a website with a specific target audience (e.g. e-commerce only for women’s or e-commerce only for man’s clothes), choosing the right color can be quite significant, especially when it comes to increasing the purchase rates.
Cultural differences in color preferences
Besides age and gender, one more factor that influences our color preferences is our cultural background. Perceptions of color can also be strikingly pan-cultural.
This visualization from Information is Beautiful indicates that cultures tend to hold more color associations in common than the literature on this topic usually suggests.
For example, in this visualization, it’s clear that red is strongly associated with the emotion of passion (number 62) across multiple cultures. Of course, it also has different meanings that are more unique to specific cultures.
In China and India, red is a wedding color. In South Africa, it’s one of mourning. So red is a color associated with times of great emotion across multiple cultures, although the specific life events (marriage and death) are rather different in nature.
In one study, people from four cultures (Japan, China, South Korea, and the USA) were asked to make word associations for eight colors. The study revealed both similarities and differences in the association’s participants made between words and colors.
Across all the four cultures, the subjects associated blue with high quality and red with love. Consistently across all four cultures, black was seen as both expensive and powerful. In the three Asian cultures, purple was seen as expensive but for US participants the opposite was true; purple was seen as cheap. This seems to reveal color perceptions can have much in common between cultures, as well as some striking differences.
It’s crucial for those involved with web and user experience design to look at the cultural connotations of the color palettes based on the relevant target audience for the website or product. For instance, designers can pay less attention to the implications the chosen palette may have in other cultures when the product is primarily targeting a particular culture. To prevent negative cultural connotations, for products that target a global audience, a balance between the colors and imagery is required.
The 60–30–10 rule
The 60–30–10 rule is a theory for making color palettes that are aesthetically pleasing and acceptably balanced.
60% is your dominant hue, 30% is a secondary color and 10% is for accent color.
The purpose is that one color, usually something rather neutral makes up 60% of the palette, to add the overall unifying theme of the design. An additional supplementary color makes up 30% of the palette and should contrast with the 60% to create a visually striking effect. And then a third color is used as an accent for the rest 10% of the design, which should complement either your primary or secondary color.
The 60–30–10 Rule helps to visually organize color, keeping your design from getting cluttered and confusing with too much color usage. This approach makes it much simpler for designers to set up the trial and error with original or uncommon color palettes without going too much beyond the anticipated norms within a business brand or industry. Choosing a set of some uncommon hue can lift the aesthetics and design. Additionally, it can be the first move toward generating a brand palette that is much more progressive than one of its competitors, thereby setting the brand apart, making it more distinguished and remarkable.
Impact of color on conversion rates
Let’s delve into the exciting stuff, the psychology of colors in business and the colors that increase the purchase rate. In other words, the colors that sell.
How can we use color theory and psychology to get people to click on a button? What colors are going to boost the conversion rates and improve the bottom line?
The importance of the color of the CTA button is one of the hottest debate topics in the world of conversion and optimization. For every expert who claims that an eye-catching red is the best color for a button, there’s another one who says that green is the best because the green color is safe and means “go.”
HubSpot shared a test that showed how a change in the color of a CTA button made a drastic impact on signups.
Even though Hubspot initially estimated the green button would lead to a higher conversion rate and perform better, the red button outperformed by 21% more clicks.
Here it’s the most important to remember that what works on one website/app, doesn’t necessarily work on another.
Saying that one color converts better than another is simply wrong because there is no universal best color. However, there are rules of thumb that can help you use color to your advantage. One of them is the psychological principle known as the isolation effect which states that an item that “stands out like a sore thumb” is more likely to be remembered.
For example, if your website or app uses a lot of green, users probably won’t notice a green button right away, no matter how well red buttons performed in another company’s A/B test.
It’s essential for the visual hierarchy of the whole page to make a call to action that stands out. Color contrast is important because if the button color does not get the attention of the potential customer you don’t get the sale/sign-up.
Color and Accessibility
Design isn’t just about aesthetics — it’s about functionality and usability, the two principles that are arguably the most important to any UX designer. Colour is a tool that can help guide the eye and good UI uses color to direct not just the user’s attention, but also their interactions with the entire experience.
One particular challenge that UI/UX designers face is accommodating visitors with color blindness, or color vision deficiency (CVD). In 2017, The World Health Organization estimated that roughly 217 million people live with some form of moderate to severe vision impairment. That statistic alone is reason enough to design for accessibility.
In some cases, individuals cannot decipher between red and green, while in others, blue and yellow appear the same. In some cases, individuals may perceive no color at all.
Here are some useful tips for creating color blind-accessible designs:
Add enough contrast
The Web Content Accessibility Guidelines (WCAG) developed by the W3C provide a formula to calculate the amount of contrast between two colors, which results in a contrast ratio.
To meet W3C’s minimum AA rating, your background-to-text contrast ratio should be at least 4.5:1. So, when designing things like buttons, cards, or navigation elements, be sure to check the contrast ratio of your color combinations.
Avoid overlaying text on backgrounds with similar color values. While this causes difficulty for most readers, individuals with CVD may be unable to read text on backgrounds with similar color values. In other words, your web page may just look like a plain block of color with no text. This doesn’t mean that you can’t necessarily use the color combination you want, just make sure to adjust the color values so they are adequately distinct.
Don’t rely entirely on color
If you rely on color only to communicate crucial system information or alert messaging, people with visual impairment will have difficulty perceiving them as important.
To ensure accessibility for things like error or success messages or system warnings, make sure to incorporate messaging or iconography that clearly states what is happening.
Be thoughtful with the most commonly indistinguishable colors. The more you know about your users’ ability to absorb your content, the more informed choices you can make about your designs.
****
Color psychology is rather complex to understand and learn. However, it may become an efficient tool in designers’ hands helping to understand users and their demands.
Summarizing this article, here is a list of some useful tips to consider:
- Choose colors wisely. They have a deep influence on users.
- Learn your target audience. The color preferences and meanings depend on many factors including age, gender, and culture.
- It is always a good idea to test the UI colors with representatives of the target audience.
- Try to make the color combinations wisely, in the best way for the users’ perception.
- Design isn’t just about aesthetics — it’s about functionality and usability, and accommodating users with color blindness or color vision deficiency is vitally important when it comes to identifying and tailoring websites/apps designs to their specific needs.
- Test, test, and test everything on your website/app, from CTA button color to background/imagery. Don’t make presumptions on what works best on another website/app, because it doesn’t necessarily will work on yours, and in most cases, it won’t.
