Using the Psychology of Color to Boost Your WordPress Website Conversions

Color Theory

Color theory is a topic so broad and diverse that numerous books have been written about it. So we’ll stick to the basics here. Essentially, color theory can be broken down into three major parts as it refers to web design:

1. Contrast. In layman’s terms, contrast is the difference between two colors. Contrast serves two functions in web design: it establishes readability as well as draws the viewer’s attention towards a specific element on the page. Whenever you are in doubt, the best practice is to choose a very light color for the background and a very dark color for the text itself.
2. Complementation. Complementary colors are found opposite each other on the color wheel. For example, red’s complementary color is green and blue’s complement is orange. When used correctly, these colors can accent each other and make a very effective color scheme.
3. Vibrancy. This refers to the general mood particular color sets: the brighter, warmer colors (red, orange, yellow) tend to energize us while darker, cooler shades (green, blue, purple) tend to be more relaxing and tranquil.

Color Meanings and Culture

Colors have different meanings across different cultures. The way we perceive a certain color may not be the same as someone from Japan or the Middle East.  When planning a website, it’s important to understand who your target audience is and how that particular culture views color associations. Web Designer Depot has a great breakdown of colors and their meanings cross-culturally. I’ve summarized them here:

Red

• In western cultures, such as North America and Europe, red is the color of passion and excitement. It symbolizes danger, love, excitement, and power but it can also carry a negative connotation when connected to the countries that used to belong to the Eastern communist block.
• In Eastern and Asian cultures, red represents happiness, joy, and celebration; and as such it is often worn by brides on their wedding day because it is thought to bring good luck and happiness.
• In the Middle East, red represents danger and caution. Some also consider it the color of evil.

Orange

• The West sees orange as the color of harvest and autumn. Traditionally, in the United States orange signifies the fall season beginning in September through to Halloween and then Thanksgiving in late November.
• Indian cultures consider orange a sacred color while in Japan, orange symbolizes courage and love.
• Finally, the Middle East associates orange with mourning and loss.

Yellow

• In Western cultures, yellow is associated with warmth, summer, and hospitality. Oddly enough, in Germany, yellow is associated with envy whereas most of the rest of the world associates this feeling with the color green.
• In Eastern and Asian cultures, yellow is not only considered sacred but imperial as well. In India, it symbolizes commerce.
• Contrary to that, in Latin America and Egypt, yellow is associated with death and mourning. The rest of the Middle Eastern cultures view yellow as the color of happiness and prosperity.

Blue

• Many Western cultures use blue for bank logos because it represents trust and authority. It’s also associated with the birth of baby boys and considered to be calming, soothing, and peaceful. In a negative context, it represents sadness and depression.
• In Eastern and Asian cultures, blue is associated  with immortality and strength. Contrary to the western world, blue is a feminine color in China.
• In Latin America, blue is often associated with religion due to the high presence of the Catholic church.
• The Middle East sees blue as safe and protecting as it is the color associated with Heaven, spirituality, and immortality.

Green

• While Western cultures associate green predominantly as the color of the Irish and luck, green also refers to nature, the environment, the protection of environmental causes, and progress. In a negative context green symbolizes envy or jealousy.
• In Eastern and Asian cultures, green is the color of nature, fertility, and youth. However, it’s also associated with infidelity and exorcism.
• In Latin America green is the color of death.
• For the majority of the Middle East green represents strength, fertility, luck, and wealth and is most commonly associated with Islam.

Purple

• In Western cultures, as well as most Eastern and Asian cultures, purple is the color of royalty and is associated with wealth and fame.
• On the other hand, Latin America and Thailand see purple as the color of  mourning and death.
• The Middle East sees purple as symbolic for wealth.

Pink

• In Western cultures, pink is the color of femininity and signifies the birth of a daughter. It also represents sweetness, childhood, or fun.
• In Eastern and Asian cultures, pink is also considered feminine where it also signifies marriage. The exception is China which, as stated above, sees blue as the feminine color.
• In Latin America, pink is often used as a color for buildings, while the Middle East doesn’t tie pink with anything in particular.

Brown

• Western cultures associate brown with the earth but also health or even barrenness. Brown is stable, dependable, and wholesome.
• In Eastern and Asian cultures brown is the color of mourning while in Latin America brown discourages sales and is generally considered disapproving.
• Middle Eastern cultures associate brown with the earth and comfort.

Black

• The Western world sees black as the color of finality, death, formality, and mourning, as well as the color of control and force.
• In eastern and Asian cultures, black represents masculinity and is the color for boys in China. It also symbolizes wealth, health, and prosperity, while in Thailand and Tibet, black is most closely associated with evil.
• Like in the East, Latin America associates this color with masculinity and mourning.
• Interestingly enough, Middle East uses black to symbolize both rebirth and mourning.

White

• In Western cultures, white is the color of purity and peace. It is the color associated with weddings, hospitals, and holiness.
• However, in Italy and Eastern and Asian cultures, white is used for funerals and represents sterility, mourning, unhappiness, and misfortune.
• In Latin America, white has many of the same associations as in North America and is connected to purity and peace.
• Similarly to black, the Middle East associates both purity and mourning with white.

Color and the Conversion Funnel

A conversion funnel helps you visualize and understand the flow your potential customers go through after they land on your website and take the desired action. In its most basic form, the conversion funnel has four main elements: awareness, interest, desire, and conversion. Let’s break them down:

Awareness

Awareness is all about attracting potential customers or clients to your site. This is the part of the funnel where they get introduced to your brand. They get familiar with your business, your company culture, and your mission statement. This is where colors start to play a major role. By knowing who your target audience is and knowing the emotions you want to evoke, you can start planning your overall color scheme.

Interest

At this stage, you are working to pique the interest of your website visitors. You want to guide them to explore further and dive deeper into your website. Your energy should be focused on polishing headlines, images, banners, and writing a compelling copy.

Desire

Now that you have their interest, you have to make them really want your product. Your website’s imagery, great product options, videos, and testimonials should provide all the necessary information that they need in order to take action.

During the website planning stage, you should choose 3 colors that will represent your brand’s website. The general rule of thumb is typically to use neutral colors such as white or black for the background and use your main brand color to create a visually striking effect. Your primary brand color could be used for links, navigation menus and headlines. The third color should be an accent color from your brand palette that will serve one specific purpose. That brings us to the fourth stage of the conversion funnel.

Conversion

This is where the visitors take your desired action or in other words, convert. What that action is, depends entirely on you but the main goal is that they take action. This is where you need to draw their attention to that one single action. The best way to do that? Use the accent color from your color scheme. This is where you want a color that compliments your color scheme but is contrasting enough to draw the eye to your main call-to-action.

In other words, if your website uses mainly blue then it would make little to no sense to make your call-to-action button a darker shade of blue. Using a color like orange or a shade of yellow or red would be more beneficial.

Do, however, make sure your call-to-actions contrast with your brand colors enough to stand out, but not clash. You want it to draw people’s eye, pushing them toward conversion, not scare them off with an unappealing color scheme.

How to Color Optimize Your WordPress Website

Now that you know what colors mean and how the conversion funnel works, let’s discuss how to come up with a color scheme for your website that is optimized for conversion.

Planning your website color scheme is an integral part of your conversion strategy. Your personal color preference matters very little in this respect. Before you even embark on that stage, you should bear in mind what the primary goal of your website is and who your target audience is.

Based on your audience, your color scheme will be different if your target audience is female then that of someone whose target audience is teens and young adults.

While you may think that you can’t go wrong with pink if you are targeting women, you might be surprised to find out that roughly 35% of the women prefer blue as their favorite color, followed by green and purple.

Estēe Lauder makes a great use of blue on their website:

While Colour Pop targets the same female audience but with a purple color scheme:

To further complicate things, Jimmy Choo targets a female audience, too, but it  focuses its website colors on an elegant black and white scheme which is meant to provide a sense of luxury and sophistication.

Men, on the other hand, prefer blue, followed by green and black, while the younger population prefers blue, green and purple, with purple becoming increasingly popular with older age groups.

Dewalt does a great job with its black and yellow color scheme; black being a third favorite color for men and the color that signifies masculinity and force. Yellow provides an excellent contrast color in their call-to-action and tagline.

How to Determine the Best Color for Your Call-To-Action

Unfortunately, there is no clear-cut answer to this question. In terms of call-to-action buttons on the web, red, orange, and green are predominantly used. When you consider the fact that green usually signifies GO it’s no surprise that many have tried to translate that to the web. However, a number of studies have shown that green is not the optimal choice for a CTA.

A study by HubSpot shows that their red button outperformed the green one with a 21% increase n conversion rate.

Similarly, a study by Dmix shows a dramatic increase in conversions when a red button replaced the green one, improving conversions by 34%.

Amazon, on the other hand, shows that orange can be used effectively as a call-to-action color. If you look at their website, you’ll notice their most important call-to-actions are orange, which is an excellent choice for a company that wants to come off as approachable as possible.

10 Best WordPress Plugins to Increase Your CRO

Because you shouldn’t have to go this whole color optimization thing alone, we’ve put together a handy list of plugins you can use to ensure your color choices are actually working for you.

Wrapping Up

We’ve covered a lot today. The main takeaway about color optimization you should know is that there is no clear-cut answer here. Each website is unique and as such, each website will have a unique conversion rate optimization process.

As a starting point, however, you can narrow the potential colors of your call to action buttons to a few options that are in line with your theme or present a significant contrast. Avoid choosing colors that might have a negative connotation to your target audience. And don’t forget to test, test, and test some more and pick the winning color based on those results.

Bear in mind that color itself isn’t the magical solution. Your color choice is only one part of your marketing strategy, so be sure to complement it with stellar copy and a nice design. Otherwise,  your color choices won’t make much of a difference.

What are your favorite CRO techniques? Which color performs best for you? Let us know in the comments below.

View original post at WPMU