Color Usability: 4 Keys to Clockwork Conversion
Are web users more likely to click a blue button or an orange button? Is there a magical button color that converts better than all others? The answer is simple -- yes... IF you know the right formula. Whether your role is marketing, design, or communications... read on to learn a simple, ground-breaking color model that literally aids conversion like clockwork!
"What the eye sees and the ear hears, the mind believes."
~ Harry Houdini
When it comes to online content, users are quick to judge. Literally. According to a 2012 Google Research report, people form webpage first impressions in under 50 milliseconds. That's a mere 1/20th of a second!
So what exactly DO users see in their sub-second first impression of your web pages? Are you certain?? Realistically, what users actually see on pages will vary from site to site. However, these concepts remain steadfast:
- Color is the first impact factor. (The eye must physically process colors before the mind processes meaning.)
- The primary call to action (CTA) should be the most obvious element on the page.
A few years ago, I pieced these two core concepts together and found a remarkable pattern that consistently lead to better user experience and conversion rates. It's NOT about best practices or subjective color preferences. It's about science. Welcome to the "Clockwork Conversion Color Model"...
The "Clockwork Conversion Color Model" - 4 Key Principles
Set aside for a moment all you know, or think you know, about color. Forget about brand identity style guides, color psychology infographics, and even button color A/B test results. The following model is based on human physiology -- how the eye physically processes color, and how you can harness that to your conversion optimization advantage.
To connect the dots between physiology principles and the clockwork conversion color model, check out the following experiment:
Instructions: Stare at the black "x" centered in the animation below. Fix your eyes ONLY the "x" for about 10 seconds. What colors are present in the animation? (Tip: Avoid blinking or moving side to side. If needed, lean in to look closer at your screen; a larger impression of the animation is more likely to trigger the effect.)
If performed as described, you will see rotating fuchsia dots along with flashes and/or halos of lime green, fuchsia's complementary color. (The graphic animation actually only depicts twelve rotating fuchsia dots. Your eye is generating the lime green color.)
From a physiology perspective, when the human eye is exhausted by a dominant color (especially pure/saturated hues), it naturally reveals the complementary color. This foundational concept can be leveraged almost like marketing breadcrumbs ...strategically leading the user's eye to our call to action. (There's more science behind the model, but that's for a geeky discussion another time. ) For immediate actionable use, check out the following four principles that aid usability and conversion centered design.
4 Key Principles of the Clockwork Conversion Color Model (C3M):
- Use a complementary color call to action (CTA) button.
- Reserve the complementary color zone exclusively for CTA use only.
- Use pure color (no added black, gray, or white) for the CTA button.
- Use shades, tones or tints for all other non-CTA colors.
Let's explore these in more detail!
#1: Use a Complementary Color Call to Action (CTA) Button
You don't just want an obvious CTA on the page; you want the user's eye to seek it out! To achieve this affect, identify the main, dominant color of your site/page, and leverage its complementary color for the primary CTA button. This will physiologically ensure that the CTA stands out and appeals to the eye. If there isn't a dominant color -- either it's too neutral or too colorful -- the page design will likely need color tuning to leverage benefits of this model.
For landing pages, emails, or direct mail brochures with simple design, the "hero shot" featured image often dictates the dominant color. Be mindful when A/B testing featured images, buttons, and other color elements. Disrupting the complementary color principle can easily void test validity. (That is, of course, unless your test hypothesis is to prove validity of complementary color impact.)
Quick Color Basics: Complementary colors appear opposite each other on the color wheel. Black and white serve as a brightness scale for color hues.
Note: For this model, reference an RGB (red–green–blue) color wheel, where red and cyan (NOT green) are directly opposite each other. (Do NOT use the RYB color wheel where red and green are opposite each other.) Only the RGB wheel corresponds to color receptors in the human eye. (Here’s a Pinterest board with diverse color wheel examples for reference.) To determine a complementary color for the eye, simply adjust the hue value by ~180' on an HSB color palette.
#2: Reserve Complementary Color Zone for CTA Use ONLY
The human eye jumps 3X times a second to capture new visual info. To ensure it lands on your call to action, reserve the complementary color for the primary CTA button only. Buffer this color to ensure impact by reserving (not using) the CTA's neighboring analogous colors. Together this results in a 15-minute reserved zone on the "color clock" distinctly for the CTA. Failure to reserve colors in this zone will diffuse eye magnetism to the primary CTA button.
A few exceptions for the "reserved" CTA color zone:
- Directional cue arrows guiding the user's eye to the CTA may also use the complementary color. (This approach is particularly useful when the call to action potentially appears off-screen.)
- Two-way content segmentation cases where both options have equal emphasis (e.g. "patients" or "doctors") can leverage split-complementary approach for buttons colors. For example, if the complementary color was orange (4pm), the two split-complementary colors would be orange-yellow (3pm) and red-orange (5pm).
- Secondary call to action instances (e.g. "add to cart" or "add to wishlist") may optionally use a complementary neighbor color mildly neutralized as a tint, tone, or shade. CAUTION: Test this accordingly; use of any colors in this zone can decrease primary CTA conversion.
#3: Use Pure Color for the CTA Button
Pure color hues are fully saturated -- meaning no black, white, or gray have been mixed in. Eye receptors are most sensitive to pure color. Leverage it for your CTA button, so the brightness naturally hooks the eye's attention.
Since pure color can also be the hardest on the eye, especially when viewed digitally, consider using a gradient from pure color to a shade or tint for your CTA button. The added depth helps the button "look like a button" and typically provides a color backdrop that improves contrast with button label text. (See these CSS3 gradient buttons for code inspiration.)
In cases where the call to action is repeated on the page, do NOT use a pure color for CTA link text. Similar to the color dot illusion you witnessed above, text use of complementary pure color can distort focus and complicate viewing which defeats the purpose. Instead, leverage a subtle shade or tint accordingly to neutralize the brightness and ensure legibility.
#4: Use Shades, Tones & Tints for Non-CTA Colors
Now that the primary call to action button color has been optimized as a complementary, reserved, pure color, it's critical that all other colors be neutralized. Literally. The neutral scale of black, gray, and white should be mixed with non-CTA colors to respectively form shades, tones, and tints. This final step is key for both conversion and usability. Overuse of pure color can significantly distract and exhaust the eye resulting in an attention deficit and sub-optimal viewing experience. Restraining pure color use to the CTA respects the eye and provides a clean path to conversion.
Tip: Refrain from using too many color hues in interface design. Four (4) colors is sufficient for a web design palette -- main/accent color, link color, CTA color, and a grayscale option. (Note: The link color should ONLY be used for links.) Leverage shades, tones, and tints accordingly for your non-CTA color selection to achieve varying emphasis and style.
As a general rule, it's wise to let the "hero shot" featured image and primary CTA color stand out as stars of the stage page. All other elements serve as stage hands or background extras. Ensure other colored elements (including logos) don't steal or detract from the show.
Recap of the Four Key Principles:
Ready to put Clockwork Conversion Colors to work?
Check out my SlideShare presentation below for several examples to clarify concepts and inspire color physiology improvements that can aid conversion ...like clockwork! Feel free also to post questions, feedback, or A/B test results in the comments below!