detail-cloud

Making the most out of a CTA

Design thinking
23.12.2022
Aamir
Aamir
Digital Producer

Okay, the user has opened my website and navigated to the page I want.

Now what?

This is where CTAs - or Calls to Action - come into play.

A CTA is an interactive element on web and mobile apps. They are intended to encourage users to take a particular action within the website e.g. sign up, subscribe, donate, buy, read more - the list is almost unending. The point isn’t necessarily about the action itself but to make that action as attractive as possible to the user. It’s a call to action after all.

You are probably used to seeing CTAs as buttons, which is their most common form. In fact, you’ve likely come across more than a few on this very site. These buttons are inherently made for clicking, but if the offer isn’t attractive, it loses its value.

Here are some critical areas which should be considered when including a CTA on the page:

Prioritise one CTA action

What is the main action you would like the user to engage with? Focus on one.

Avoid promoting multiple different CTAs on the same page. Users will be less inclined to select multiple CTAs on a single page and you can risk overwhelming them with choice. Make it clear to them where their focus should be - prioritise one offer and make it as attractive as possible. By doing so, you’ll make their user journey that much more effortless.

Be mindful of placement

CTAs can’t just be thrown onto the page without a thought. You must consider what placement is most effective.

Generally, CTAs should live beneath some explanatory information about the related area. For example, a subscription sign up CTA should live within a content block which informs the user what is involved as part of this subscription/why they should sign up.

Placing CTAs too far up the page can discourage click engagement. Users need to be given some context behind the action before they decide to commit to it. However, placing CTAs too far down risks being missed by users who don’t scroll further. Users shouldn’t have to scour for the next step in their journey. This is a balancing act to consider.

Choose your label wisely

A label is the text that resides in a CTA and can very well determine a user’s choice to click or ignore. Labels must be simple, concise and action-oriented.

Most importantly, users should be able to clearly understand what will happen if they select the CTA. It is good practice to use everyday language for this reason. Using labels such as ‘Learn more’, ‘Read more’ ultimately don’t give enough information to the user to invite them to click. These vague labels are also not accessible for users that require screen readers to view webpages.

Let’s consider a user who wishes to purchase a product online. The label ‘Add to cart’ is far superior to a label like ‘Add’. The former gives much more specificity to what the CTA does and how it benefits the user journey. And it’s no coincidence that this phrasing has become a staple for e-commerce.

Design to attract

The final thing to keep in mind is the design of the CTA itself. No matter the placement or labelling - if a button isn’t presented nicely, it’ll not get attention.

Firstly, the CTA should appear clickable. This can be achieved through gradient colouring or simply a stark colour choice. There should be sufficient contrast with the background to ensure the CTA can stand out to the user. It must also be of an appropriate size so users can recognise and read it. This is especially important on mobile where buttons should be large enough to click with a finger.

Putting it all together

Let's look at an example from one of our sites, World Mosquito Program below:

World Mosquito Program screen recording gif

This is the newsletter subscription banner.

  • The CTA button has been placed beneath brief explanatory information about why the user should subscribe.
  • The label ("Subscribe now") is short, direct and provides the necessary urgency with capitalisation.
  • The light blue text attracts attention without getting washed out by the rest of the banner.
  • The button also reacts on hover - highlighting that it is clickable while encouraging the user to make that click.

Conclusion

Remember: the offer alone isn’t enough to draw users - they need to be guided to take action. By considering these areas, you will ensure your CTAs can effectively attract the attention you’re looking for.