Boosting your conversion rates through CTA design

The call-to-action button is the one button that serves as a holy grail for all the design work you do. The click on this button moves the needle for revenue for any company - whether you are a product or service, B2B or B2C etc.

Not using a CTA is like proposing to someone without an engagement ring. So in this issue, I want to talk about the elements of CTA button design.

For starters, a CTA or call to action is a prompt on the website (typically a button) which nudges the user to perform a specified action. All the content and design on the website is to push the user to take this specific action.

The human eye is like a magnet, but that doesn’t mean you add a giant neon button on your website that says ‘Click Me Now’ (that would work for people with sunglasses :p).

You need to understand the fundamentals of how the human eye works. This primarily works well on mobile devices but can be extended to laptops, also. 

Simplicity carried to an extreme becomes elegance. - John Franklin

👁️  Gutenberg Principle

Also known as Z-pattern, this principle talks about how the human eye moves when scanning elements of a page. Typically, we move from the top-left corner and end up at the bottom corner. 

This principle can inform us of where the ideal place for putting a button is: 

• Top vs Bottom: Since the exit point is at the bottom of the page, it is a good idea to put the button on the bottom of the page. 
• Left vs Right: When we finish a scroll, our eyes arrive most of the time on the right side, so placing the CTA button there feels more intuitive.

As an exercise, go back to the sign-up pages of popular apps and products and see where the CTA button lies. We will now see a few more tips on designing the CTA button. 

‍

Make them clickable

Ground law says that when we see elements with contradictory solid colours that are near each other or above each other, our brain will attempt to understand which of them is more important.

Hence add a little gradient or a shadow to a button. A 3D effect will make the button stand out more. In case 3D does not fall into the design scheme, make the button more rounded to give a clickable feel.  

‍

Button Size

Make the size and font of the text slightly larger than other elements of the page to make the button stand out. 

According to Fitt’s law, the further away and the smaller an object is, the longer it will take to point to it, and the closer and bigger it is, the shorter time it will take to point to it. Hence the CTA buttons must be larger. 

Use white space

White space is the area between design elements. It is also the space within individual design elements, including the space between typography glyphs (readable characters). Despite its name, white space does not need to be white. It can be any colour, texture, pattern, or background image.

The right amount of white space around buttons can make the button more noticeable. Look at how the white space can make the pricing button appear better. 

Microcopy

Strong and compelling microcopy can make the button stand out. Use the everyday language of your user instead of fancy jargon. Example: Instead of ‘Search’ restaurant, use ‘Try’ restaurant for food delivery app. This is a whole subject by itself which I will discuss in a future issue.

‍

Test, Test, Test

All theory is good, but nothing prepares you for reality. Test constantly, absorb the feedback and make improvements. 

Create a prototype to observe how many people click and what they understand through that CTA. Ask them what will happen next if they click on the CTA. Note down all this feedback and improve when most user data points out in that direction. If needed, throw the rule book out of the window.

‍

Have contrasting colours to your brand colour for the button. Make it a part of your brand guidelines. Using similar colours for your CTA button and other elements can cause your click-through rates to fall through the roof.

‍

Tool of the day

‍

Whatfont

This chrome extension allows you to inspect web fonts by hovering over them. This is a simple and efficient way to detect these fonts, and designers can take inspiration from the fonts of other websites.

Additionally, this extension can detect the services used for serving the web fonts, including Typekit and Google Font API.

‍