The Next Generation of Visual Website Optimizer is launching in April 2014 See What's Coming

5 Design Principles To Instantly Boost The Conversion Rate Of Your Website

Posted in Conversion Optimization on July 2nd, 2013

“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?

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?

Call-to-action button in the container

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:

mailchimp-blur

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 AB 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 “feel” 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 AB tests:

Use color theory to increase conversion rate

Although choosing the color that conveys the right feel 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:

Valet Creek's Contrasting Call-to-Action

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:

The Art Institutes' Directional Cue

Below is another example of directional cues from Think Eye Tracking:

Think Eye Tracking's Directional Cue Example

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:

Dailymile

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.

Too much whitespace between the supporting content and your actionable area can create a sense of disconnect and 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.

Underwater Audio Comparison Image

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.

Smriti Chawla

Content Marketer at Visual Website Optimizer by the day, SEO enthusiast by the night. I love reiterating quotes and collecting weird people. You should follow me on Twitter.

The Complete A/B Testing Guide

Know all that you need to get started:

  • What is A/B Testing?
  • Is it compatible with SEO?
  • How to start your first A/B test?
Show Me The Guide


Tags

11 Comments
Rui
July 4, 2013

Great article.
Five point to stay always in mind!

Kevin
July 4, 2013

Another GREAT blog. You guys sure give me good ideas :) Going to try to put a border around a button. Thanks!

Dave@ConversionStudio
July 5, 2013

The visual hierarchy example is really interesting, just wish I could find designers who fully understand the psychology of conversion.

Smriti Chawla
July 5, 2013

Thanks for dropping by, guys! I hope these principles work out for you. Please do share your experiences if you try them out. :)

Rob Jenkins
July 6, 2013

Great examples of how subtle changes can make a difference. Will be working to implement more obvious call to actions in the near future.

Smriti Chawla
August 2, 2013

@Rob – Keep me posted!

Keith Eneix
October 9, 2013

Excellent article Smriti. I just wrote about my experience on our fannit Blog. We are now using VWO to do split A/B testing for all of our customers. It’s amazing how just a small change can increase conversions by so much. Here’s my story so far.

Smriti
October 28, 2013

Good to know you’re using VWO, Keith! I hope the suggested changes help you get great conversion lifts! :)

Noodweer
January 1, 2014

Nice guide !

Kate William
January 27, 2014

Funnily enough, when I started out in advertising/direct marketing 18-odd years ago, we were always told that sending a mailing out in a yellow envelope increased results.

I was also really pleased to discover from your post that our logo and site colours incorporate all three colours women love. Given our target audience is female, our instincts are clearly working fine!

Smriti
January 29, 2014

Good to know about your logo, Kate.

But even if it is offline, I’d insist there’s no standard color that will ‘always’ win. There got to be a reason. For example, on websites, it is often about contrast.

Leave a comment
Required
Required - not published


8 + = thirteen

Notify me of followup comments via e-mail.

RSS feed for comments on this post.

I ♥ Split Testing Blog


Stay up to date

Recent Posts

Write for this blog!

We accept high quality articles related to A/B testing and online marketing. Send your proposals to contribute@wingify.com