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
Follow us and stay on top of everything CRO
Related content:

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

5 Min Read

“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.” 

Sounds familiar?

Instinctive sense of “beautiful” and “aesthetic” while designing a business website is definitely cryptic, unless backed by robust visitor behavior data.

It might seem right to go the aesthetic route, but, in the long run, it can be disastrous for the business goals unless backed with the right research. But worry not! We are here to help you combine beauty with brains. 

In this blog post, we have discussed five design principles that you must follow to boost conversion rate by focusing on the Call-to-Action (CTA) design.

Call-to-Action buttons help in analyzing the success of any website. The more people click your Call-to-Action, the more business you get. So, undoubtedly while preparing the design module for your website, you need to pay special attention to your CTA buttons.

Let’s get started.

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?

Control vs Variation A/b test

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 page
Image source: mailchimp

2. Use color theory and contrast psychology

Of all the visual cues, color is probably the most talked about and something that people love to test. 

Random testing is something that doesn’t really give much conversion lift. We recommend you to use an A/B testing tool containing a WYSIWYG (what you see is what you get) editor (for example, VWO.) It only takes a few clicks to start a button color test.

Or, if you want to find the perfect button color for the Call-to-Action by yourself, please consider the “emotion” that each color conveys and then test it with a valid hypothesis. 

Although choosing the color that conveys the right emotion is important, be sure to also check for a color that is in perfect contrast to the background colors on your page. Like, purple on royal blue will not work. 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 instantly draw visitors’ attention. See how MakeMyPersona uses contrast effect to make their Call-to-Action stand out:

MakeMyPersona cta changes
Image source: Make My Persona

You can use some excellent 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 by A/B testing 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 a 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 homepage
Image source: The Art Institutes

Here’s another from One: 

one using directional cues for users
Image source: One

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. Once again, let’s look at Uber. They place their signup button where it is easily noticeable:

uber grabbing user attention
Image source: Uber

While blank space under the form or call-to-action button is fine, you mustn’t overdo it.

Whitespace is an important design element, but too much whitespace between the supporting content and your actionable area can create a sense of disconnect. It can make visitors see the Call-to-Action as a separate element than in continuation of the text.

5. Establish a clear visual hierarchy

Powerful visual hierarchy guides visitors’ thought patterns, makes them naturally follow the information they need to decide along with a perfectly-placed conversion form or CTA. In short, it’s more about designing a good layout to set visitors’ expectations for maximum conversionsYou can communicate a lot with your design if you know how to establish a good visual hierarchy. Underwater Audio 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.

Underwater Audio Case Study
Image source: VWO

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. 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.”

At first, all these design principles might seem familiar and hardly useful, but the results you can achieve by following them can give a massive boost to the conversion rate of your website. Still don’t believe us? Try it for yourself.

Banner A/B testing
More from VWO on Conversion Rate Optimization
Why Your Bounce Rate Is High And How To Fix It – Top 5 Reasons Why Visitors Immediately Exit Your Website

Why Your Bounce Rate Is High And How To Fix It – Top 5 Reasons Why Visitors Immediately Exit Your Website

The most important metric that you should be tracking on your website is its bounce…

Read More
Paras Chopra

Paras Chopra

6 Min Read
Have a sales page? Here are 3 extremely simple tips to improve it

Have a sales page? Here are 3 extremely simple tips to improve it

You have a different audience than Copyblogger, Mashable and the New York Times. Their websites…

Read More
Karl Staib

Karl Staib

6 Min Read
Evergreen Principles of Persuasion To Increase eCommerce Conversion Sales

Evergreen Principles of Persuasion To Increase eCommerce Conversion Sales

Imagine there’s a cupcake fair in your community and you’re dying to relish a good,…

Read More
Astha Khandelwal

Astha Khandelwal

11 Min Read

Scale your A/B testing and experimentation with VWO.

Start Free Trial Request Demo
Invalid Email



All you Need to Know About Conversion Optimization Get the Guide