CTA design tips and guidelines

Call to Action elements have a tremendous impact on the company conversions and are correctly considered as the most important element of your interface.

14.7.2020

Lia Crupi

UX / UI designer

Just like the traditional face-to-face selling, you are trying to sell a service, a good or a content to users through your website, but with a big disadvantage: between you and your customers there are entire continents, multiple time zones and the limitations of coding. Call to Actions (CTA) – those buttons that tell you to buy, click, download or sign up – are your closing arguments, the pivotal step that turns visitors into customers and brings conversions. For this reason CTAs demand their own design rules, and the success of your CTA is the success of your entire brand.

What is the CTA button?

A Call to Action button is an interactive interface element used to induce people to take certain actions - such as purchase, contact, subscribe etc -  that are important for the conversion for a particular page, for example.

Traditionally, effective CTA buttons are easy to notice - bold buttons containing microcopy with a particular call-to-action - intentionally created that way so that people couldn’t resist clicking: “Learn more”, “Buy it now”, “Start for free”.

Why are CTAs  important?

Studies proved that the overall attention span has decreased to around 8.25 seconds in the past few years, due to people being bombarded with all kinds of information. The result is that users´ attention is more difficult to catch.

By only focusing on certain key elements, you could increase their significance and efficiency resulting in better conversion rates - read our post blog about the Pareto Principle, in order to find out how to identify those key elements. 

One of those key elements is the CTA button which is essential for most websites and products. They are designed to allow the user to take specific actions; creating an account, adding to cart, purchasing a product, and many more. When designed well, these buttons not only allow the user to effectively navigate through your product but are critical in conversion flows.

What does a CTA button look like?

Clickable

Any CTA´s priority is to make users click, so their design should coincide with the objective and that's why it’s important to appear clickable.

What can make a button look clickable? First of all, it must have a 3D effect, such as a slight gradient or a small shadow. If a button with a 3D effect doesn’t suit the chosen style, clickability in a flat design can be achieved via rounded edges, for example.

Big

Size makes an element be more noticeable. Since CTAs’ prior goal is to draw users’ attention, designers usually try to make them stand out. With some limits: a Call to Action button can be big enough to be quickly found but not too big to spoil the visual composition and hierarchy of the layout. Apple established that CTAs in mobile UI should be at least 44Х44 pixels, while Microsoft recommends 34Х26 pixels.

Bright

Color choice makes the process slightly more complicated for designers, because they must consider some aspects such as brand colour, background colour, target groups, etc. 

But one condition is important to keep in mind while choosing colors for CTA: the contrast of buttons and background colors must be enough big to make the CTAs stand out from the other UI components while matching web accessibility standards.

Other recommendations to keep in mind

Write compelling copy and be concise

Less is more, but concise doesn’t only mean short. CTA buttons are meant to initiate an action so words are crucial to catch user's attention, persuade her and lead her to the right action.

According to experts around the world, the most common Call to Action copy phrases are compressed into 6 basic categories (source: 6 Call To Action Copies That Convert):

  1. Sign up

  2. Subscribe

  3. Try for free

  4. Get started

  5. Learn more

  6. Download Free/Now

Use contrasting colors and give them a visual hierarchy

It is important to clarify your primary CTA when actions come in a pair: “log in & sign up”, “confirm & cancel”, etc. To do so, create a visual hierarchy so that one action stands out over the other.

Always try to make the primary CTA button more prominent by using a contrasting color to capture user attention, while the secondary action could be represented using a ghost button or just a simple text link.

Moreover, color influences the Isolation Effect when it comes to buttons: the element that most prominently differentiates from similar objects, it is as well the most remembered.

Use white space

White space, also known as negative space, is the area between elements in design composition.

White space is not just a background - and definitely not white only - of a visual composition, it is also a powerful tool for emphasizing UI elements: with the right amount of white space around a button becomes more noticeable.

Moreover, white space sets the connection between UI elements. The less white space between the components, the more connected they are.

Keep user flow in mind

As we mentioned, a CTA is supposed to grab attention and lead the user to the right actions such as buy or download. But a CTA alone is not enough, no matter how convincing it is.  The path that a user follows while scrolling the page’s content is highly important as well. Buttons, together with a good copy design, can encourage a natural reading flow and you can direct your visitors to certain information or to act upon certain elements.

One last recommendation: test, test, and test

If you want to make sure something works well, you need to test it. 

One efficient CTA testing methods is A/B testing. It compares two versions of a digital product, with different CTA buttons, placement, size, color or microcopy and find out which one performs better.

The effectiveness can be measured by clicks, number of subscriptions, or sale-leads, for example.

Other tools can help checking accessible colours pairing - very useful for that is Stark plugin.

Takeaways

In general, Call to Action elements have a tremendous impact on the company conversions and are among the most important elements of your interface. We at Contrast know how to make your Call to Action button stand out and grab the necessary attention it demands.