Designing Call-to-Action Buttons to Boost Conversions

A button is a button, right? You click on it and something happens. Why write an entire article on this topic?

Well, because in the world of online business, where every single on-screen element plays a material role in the likelihood of turning a visitor into a customer, a button is not simply a button.

That’s especially true for call-to-action (CTA) buttons. For those unfamiliar with the term, CTA typically refers to the action you want a user to perform in order to start the conversion process. If you’ll allow a slight oversimplification, clicking on this button is the entire reason you brought them to your site.

Unsurprisingly, there’s no small amount of psychology and nuance that goes into designing a CTA button that’s perfect for your online business. As with most things related to user experience (UX) and conversion rates, there’s a lot to this topic. 

In this article, we’re going to shine a spotlight on the relationship between the design of a CTA button and conversion rates, helping you boost your sales figures simply by rethinking and redesigning the element that kicks off your sales process.

Is This a Button?

Your button label is important for a number of reasons. The most obvious one is that it’s not always going to be clear that the button is… a button. 

Some websites have a design that precludes using a beveled, 3D block that physically resembles a button. It’s not 2002 anymore. We’re (mostly) beyond this design phase.

To solve this issue, your button label has to make it clear that the element is clickable. In other words, it needs to clearly demonstrate that the element is meant to be interacted with. This is done by including a verb in the button label. Think about words like “download,” “subscribe,” “add,” “join,” and “go.”

BreadnBeyond uses the super simple, highly effective verb “get” in their site’s main CTA: “Get a quote.”

Use Words Users Want to See

The second reason the label is important is that it must make the action seem attractive to the user. Your label must be enticing. It needs to contain words and terms that draw the user’s eye and compels them to click. People like seeing CTAs containing words like “offer,” “free,” “discount,” and “sale.” 

It’s not an easy thing to do because there’s not always space to include descriptive terms like this. 

Take a look at how InFlow overcame this issue with their primary CTA. Obviously feeling that the term “free” is more important than using a verb like “sign up,” the inventory management company placed the button next to links that already contain strong “action words.”

source: inflowinventory.com

Clarity is Everything

Nebulous promises seldom work in web copy. People want to know what they’re being offered, and nowhere is this more important than in your CTAs. The button that triggers a conversion must tell the user exactly what’s going to happen after they click it.

Avoid using cute or overly clever button labels saying things like: “Start your adventure” or “Join us on our journey.” These statements could make sense in the context of a specific paragraph of marketing copy, but they don’t work as calls to action.

A CTA is all about directness and transparency. A button is clicked to start a process, and users must know what lies waiting for them at the end of it.

Use Color Psychology

Aside from using colors that compliment your site’s existing color scheme, you’re also going to want to use a color that evokes a specific feeling with your users.

Depending on the product you’re selling or the type of CTA you’re promoting, the button’s color could play a very important role in its clickability.

Here are some guidelines surrounding colors and emotions – specifically emotions that relate to commerce and conversion. If possible, use these colors in your CTA if you want to trigger specific feelings with your site visitors.

• Use blue if you want to communicate trust, credibility, and reliability. Companies in the health and finance sector often use blue for this purpose.
• Use red if you want to communicate urgency. This is especially useful for CTAs that are time-sensitive, like a flash sale.
• Use black (especially on a white background) if your product has a luxury or aspirational angle. If you’re selling a lifestyle, black is a great color to choose for your CTA button.
• Green is a great color for products related to mental health, tranquility, or safety. It’s a color that’s long been associated with harmony and a connection with the earth.

Keep researching this fascinating topic; you’ll be able to find a ton of excellent material on the relationship between color psychology and conversion.

Don’t Lose It in the Clutter

Two things are going to make your CTA button stand out. 

The first is to simply reduce the number of visual elements that surround it. Minimalism and the intelligent use of negative space is a great way to ensure that your product page’s most important element doesn’t become a needle in a haystack.

This approach isn’t going to work for all websites. A super-minimalist design is typically only effective if it’s aligned with the brand’s aesthetics and values.

Take a look at Everyday Needs for a great example of how to use minimalism to draw attention to the product page’s most important elements. 

source: everyday-needs.com

Playa Beauty does something very similar, although this is less of a minimalist design and more just a very attractive use of negative space.

The second way to make sure that your CTA button stands out from the other elements on your page is to use a color that’s not used anywhere else on the page.

For those of you who are a little intimidated by color choice and graphic design, there are tools that will help you with this choice.

Sessions College has designed a terrifically useful, free browser app that will give you several color options complimenting your site’s color scheme. All you have to do is enter the hexadecimal value of your site’s primary color, and the app will do the rest.

Some Final Thoughts

When making a change so closely related to conversion, it’s vital that you have a granular view of your site’s current conversion statistics.

This means you need to know how every single one of your landing pages converts. And you need to be able to measure an improvement at this level. You will only know if a change in your UI is successful when you can say so for every single one of the CTA buttons on your site.

Remember: your site’s overall conversion rate is not an accurate measurement of a change’s effectiveness. So be sure to build hyper-granular analytics before making wholesale changes to your site.