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

“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
The Misadventures of an eCommerce CRO Practitioner – A Ballad

The Misadventures of an eCommerce CRO Practitioner – A Ballad

Not once upon a time or very far away, there was an eCommerce site, selling…

Read More
Aditi Gupta

Aditi Gupta

6 Min Read
Email Marketing 101: Optimizing For Higher Conversions

Email Marketing 101: Optimizing For Higher Conversions

Exceptionally popular among digital marketers, email marketing is an age-old strategy that still effectively helps…

Read More
Nelly M.

Nelly M.

8 Min Read
Death by CRO: 4 Common & Deadly CRO traps to avoid (includes free survival tips)

Death by CRO: 4 Common & Deadly CRO traps to avoid (includes free survival tips)

Experimentation has been the cornerstone of all successful organizations. But many fall prey to the…

Read More
Mani Makkar

Mani Makkar

6 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

All you Need to Know About Conversion Optimization Get the Guide