If you care about improving conversions and sales on your website, you need to care about color.
Humans have used color to communicate for millennia, from the earliest cave paintings to today’s street signs. Color communicates in ways that words and images aren’t able to, and using color effectively can be a powerful tool for any site.
Today, you’ll learn how to use color psychology to make your site easier to use and generate more conversions and customers.
Along the way, we’ll explore a little bit of the meaning behind different colors, and a few pitfalls you need to look out for as you include color in your design.
Let’s jump in!
How to use color to improve usability
Let’s start with the easiest way to use color on your site: improve usability.
If your current site is confusing or difficult to navigate, you can add a few bits of color to make things easier on the eye and improve the user experience.
Especially now that most website traffic comes from mobile devices, we have less room to communicate our message and need to make things as clear as possible.
That’s where color can come into play.
By using the right type of colors in the right ways, we can offer a richer, more efficient user experience.
Use contrast to guide user behavior
The first step is to use contrast to show users what’s important on your site. For example, you might have a page where people are likely to exit. You can use colors to draw readers in and keep them engaged.
For example, this blog page on Crazy Egg only uses bold colors (green and blue) for links.
This means the user is drawn to taking an action, like subscribing to the newsletter or reading more articles. Contrasting colors like this improves your engagement metrics.
You can also use contrasting colors to highlight navigation or separate areas of a site.
Use bright vs. dull colors to lead the user
Another useful tool in the world of color psychology is using grayed-out or dull colors to indicate unpreferred or disabled actions.
You can see this every day with buttons and options that are gray. It naturally indicates that the option isn’t desirable.
You can also use it to simplify your site. Make less-important navigational elements gray and hide them in plain sight.
Use symbols in combination with colors
Symbols are a perfect partner to colors. They are versatile, simple and should be clear and understandable.
While color in most circumstances contains more prominence than a typical symbol, using them together simply makes things even more clear.
How to use color to guide user actions
Chances are, your only website goal isn’t just one that’s easy to navigate. You probably also have specific actions you’d like users to take, like signing up for an email list, buying a product, or requesting a quote.
If that’s the case, you can use color to influence purchase decisions. Here’s how.
Use positive and negative colors
A great way to do this is to use positive and negative colors to indicate a “correct” and “incorrect” option.
Society and nature have wired red and green so deeply into our subconscious that no other two colors share such opposing meanings.
One of the most obvious examples of this connection is the international color code in standard traffic lights.
We see green as a positive, progressive color, so words like go, yes, good, accept, and up all can be related to the color green.
Red indicates the opposite of green, with words like stop, no, bad, reject, and down. Red has a negative or hazardous meaning and increases the heart rate and indicates urgency.
A great way to use red and green is with basic actions like add and remove or to draw attention to a setting.
Even LinkedIn, which has a color palette of almost entirely blue, uses green to indicate enable settings, and red to show notifications.
You will quickly notice other examples around the web.
Start, create, post, and new are often in green, with red encompassing actions like end, delete, disconnect, and cancel.
Use bright, warm colors for attention and alerts
There’s the reason the notifications on your phone, on Facebook, and just about every platform are red—they work!
Bright, warm colors like red, orange, and yellow are best for attention and alerts. Orange is a particular favorite to indicate excitement or call to action.
If you combine a bright color with a powerful symbol, you can make the message even more effective.
For example, I use an orange warning symbol on my site to draw attention to my SEO webinar.
If that symbol was blue or green, it just wouldn’t have the same effect. If you need to draw the reader’s attention somewhere, use a bright color like this.
Use grey for less-desirable options
There’s an additional color in the positive/negative relationship. That’s grey—a neutral, middle-ground color. It’s a great accent color you can use it to draw attention away from a secondary option.
For example, this opt-in page on Ambastha Athletics uses gray to put the attention on the signup button.
Plus, you’ll notice he uses orange to catch the visitor’s eye and draw attention to the “heck yeah!” newsletter subscription form.
Conclusion
If you’re serious about improving your site, you need to take a deep dive into what the colors you’re using represent.
Without looking into the colors you’re using, you might be discouraging customer actions for something that’s important, or drawing focus towards something by accident. By using and understand the meaning behind colors, you can improve user flow and increase conversions.
To start, look to any problems users seem to be having on your site. How can you use color to make common actions stand out, keep people engaged on a page, or improve navigation?
Next, you’ll want to examine user flow. You can use positive and negative colors, like red and green, to indicate a preferred action. Muted colors, like grey, can show a disabled option. And bright colors, like red, yellow, and orange, can grab the attention of a visitor.
Combining these colors can guide user behavior and improve your conversions.
What colors will you use to improve your site?
Comments (26)