This post was updated on 14/10/2016. Please give it a read for fresh insights, new research, and examples.
“Can you change the color of that call-to-action to a subtle grey instead of this striking blue? It’s so in-my-face. I think grey will go better with this soft yellow background.”
Isn’t that you talking to your designer?
According to Adobe’s 2015 report on the State of Content, with 15 minutes to consume content, 66% would prefer to view something beautifully designed vs. simple and plain. However, while it might seem right to go the aesthetic route, it can sometimes be disastrous for the business goals you want to accomplish on your website. Try to strike a balance between your website’s conversion goal and aesthetics to come up with a “design that sells.”
Although usability and intuition form the basis of a good design, you need to think beyond the basics and use design subtleties to drive visitors toward your conversion. Listed below are a few design principles that get visitors closer to your conversion goal:
1. Put Your Call-to-Action Inside a Container
Distinguish your most important page element and put those lead-gen forms or call-to-action buttons in a container, right now! It’s the most important element for your conversion. How can you treat it like any other page element?
In fact, other elements on the page, like heading and content are just supporting elements that should push visitors’ attention to your conversion goal. Make sure your visitors clearly identify in a matter of seconds what action is expected from them on the web page.
See the image below and now tell me, which one will catch your eye first?
You may even do the squint test to see if your call-to-action buttons really stand out from the rest of the page. Like, you can definitely make out that the Mailchimp homepage passes this test:
2. Use Color Theory and Contrast Psychology
Okay, of all the visual cues, color is probably the most-talked about and something that people love to test. When you are using an A/B testing tool that has WYSIWYG (what you see is what you get) editor (like, Visual Website Optimizer for example), it only takes a few clicks to start a button color test.
But random testing is something that doesn’t really give much conversion lift. So when you want to find the perfect button color for your call-to-action, it is best that you consider the “emotion” that each color conveys and then test it with a valid hypothesis. The following infographic from Kissmetrics is super helpful to decide the best colors for your call-to-action A/B tests:
Although choosing the color that conveys the right emotion is important, be sure to check for a color that is in perfect contrast to the background colors on your page. Like, purple on royal blue will not set a good contrast. But bright yellow can contrast very well with such a background. The whole idea about the contrast effect is to make your primary page element “pop” to draw visitors’ attention instantly. See how Valet Creek uses contrast effect to make their call-to-action stand out:
You can use great color wheel tools available online, like Accessibility Color Wheel to find the best contrasting colors and see if your color choices stand out.
Now you see, it’s not that red converts better than blue, or orange is the best color for higher conversion rate. It’s about the right combination of background and foreground colors to increase contrast. There’s no standard high-converting color that will work for everyone. Figure out which one converts the best for you and get some cash rolling.
3. Let Directional Cues Point to Your Call-to-Action
Directional cues immediately make visitors follow the direction where they point. Place your conversion goal where directional cues are guiding your visitors to improve conversions. There’s reason why those arrows point to call-to-action buttons or lead-generation forms on the page, you know. Here are some directional cue examples for you:
This one is from The Art Institutes:
Below is another example of directional cues from Think Eye Tracking:
Here’s another from Salesforce
4. Utilize Your Whitespace
If your visitors have to play hide and seek to find your call-to-action, they will not be amused. Imagine visiting a movie website to book tickets and not be able to locate the damn “Book now” button. It’s like hiding the booking/cash counter.
Placing your conversion form or call-to-action on whitespace makes it easy to figure them out. Dailymile places their signup button over other page elements and outside the grid to make it very noticeable:
And while blank space under the form or call-to-action button is fine, it is important to understand that you do not overdo it.
While whitespace is an important design element, too much whitespace between the supporting content and your actionable area can create a sense of disconnect. This can make visitors see the call-to-action as a separate element than continuation for the text. You can read this article to avoid negative space in your design.
5. Establish a Clear Visual Hierarchy
Powerful visual hierarchy guides visitors’ thought patterns, make them naturally follow the information they need to make a decision along with a perfectly-placed conversion form or call-to-action. In short, it’s more about designing a good layout to set visitors expectations for maximum conversions.
You can communicate a lot with your design if you know how to establish a good visual hierarchy. Read more about it in this excellent post on the Tutsplus Network (Webdesign).
One of our customers improved visual hierarchy of their homepage to see a 35.6% increase in their online sales. You can see the comparison image of their homepage below or read the complete case study.
Although all these design principles might seem familiar, the results you can achieve by following them can give a massive boost to the conversion rate of your website. If not anything else, you can bookmark this article as your checklist for high-converting design principles your site must follow.