VWO Logo
VWO Testing

Zero-In on the Best Designs With A/B Testing

A/B test your designs to figure out the best converting version for your brand and website.

Know more
Complies with:
VWO GDPR Ready Badge
VWO CCPA Ready Badge
VWO G2Crowd Leader Spring Badge
VWO BS 10012 Certification Badge

We tweet useful stuff daily

Related content:

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

5 Min Read

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, which is why you need A/B testing.

Try to strike a balance between your website’s conversion goal by optimizing your site elements and its 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[1] 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, VWO 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 post 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:

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 your brand’s 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

Here’s another from Salesforce

directional cues design principle

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.

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)[2].

One of our customers improved the 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.

image comparing the two versions of the a/b test on Underwater Audio

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.

More from VWO on Conversion Rate Optimization
15 eCommerce Conversion Optimization Tactics To Boost Your Sales

15 eCommerce Conversion Optimization Tactics To Boost Your Sales

A seamless eCommerce customer journey is all about the transition from “buying” to “experiencing.” The…

Read More
Shubhi Ahluwalia

Shubhi Ahluwalia

10 Min Read
How to Use Your Brand to Boost Website Conversion Rate?

How to Use Your Brand to Boost Website Conversion Rate?

In today’s highly competitive market, every brand wants to excel in their field and become…

Read More
Astha Khandelwal

Astha Khandelwal

8 Min Read
How to go From “Zero to Hero” With a Website Revamp

How to go From “Zero to Hero” With a Website Revamp

Not happy with your current website? Customers complaining about the functionality or look of it?…

Read More
Robert Brandl

Robert Brandl

9 Min Read

Scale your A/B testing and experimentation with VWO.

Start Free Trial Request Demo
Shanaz Khan from VWO

Hi, I am Shanaz from the VWO Research Desk.

Join our community of 10,000+ Marketing, Product & UX Folks today & never miss the latest from the world of experience optimization.

A value for this field is required.

Thank you!

Check your inbox for the confirmation mail