Call-to-Action: Buttons that work

Is it a bird? Is it a plane? It’s a button!

If you want to place effective calls to action, stick to a few basic principles. This article covers user attention and how to guide it so visitors turn into leads.

Online, everyone is fighting for the attention of demanding users. Human attention span is now one of the most valuable commodities there is. That is why digital experiences are designed down to the smallest detail to lead users to their goal with the right cues. One of the many strategic UX components waits at the end of a page, in the contact form or at checkout, and often makes the difference between conversion and bounce: the call to action.

In general, a call to action is a prompt to act. In marketing, a CTA is a specific nudge that gets users to take a desired action, for example through eye-catching buttons or short sentences. The actions CTA sections most often lead to are purchases and sign-ups.

Today’s users are often impatient and fickle: nobody wants to click through interfaces or deal with digital processes longer than necessary. For a CTA to trigger the action you want, you have to make it as clear and simple as possible for users, at the right time and in the right place. A precise understanding of human attention is essential for design. The following tips raise the quality and persuasiveness of your CTAs, no superpowers required:

Words have an enormous influence on the mood, meaning and impact of CTAs. Wherever you want users to act, the accompanying words need to be inviting, concise and convincing. A popular way to boost persuasiveness is an emotional approach: messages that speak to users personally and directly. Writing in a casual, personal tone instead of a formal one also removes distance.

The most important text is the one that gets clicked. Most sites still follow the common practice of using verbs in the base form on CTA buttons (e.g. “Try now”, “Learn more”), while some providers are starting to adopt the trend of direct imperative prompts from English (e.g. “Find out more”, “Try one month for free”, “Start now”). In German, such wording is still unfamiliar to many users, which can help capture attention.

Call-to-action buttons are a perfect illustration of the “von Restorff effect”. It says we remember best what differs from its surroundings. While interface elements are usually designed in a consistent style, CTAs are visually highlighted and appear “isolated”. That sends users clear signals and guides their behavior toward the desired action.

For the isolation effect, color matters more than anything else with buttons. Primary buttons need to contrast with the rest of the interface and stand out. Make sure the CTA button still fits the overall look: good visibility should not come at the expense of design or readability.

Besides color, size and position are part of a well-designed CTA button. A button should fit its surroundings so it does not take up valuable space from other content. Even worse is when tiny buttons become an obstacle for users. A study on button size and spacing set a standard that suits all user types back in 2007. According to the study, buttons between 11 and 19 millimeters, or 42 and 72 pixels, had the highest hit rate.

The rapid rise of touchscreens in the form of smartphones and tablets has fundamentally changed the button topic over the last ten years: today buttons, like everything else, often have to be designed “mobile first”. Designing for mobile means keeping both a comfortable size for tapping and the natural reach of the thumb for swiping in mind.

This is about reading flow: most users in the Western world scan pages and interfaces using the reading pattern they learned, from left to right and from top to bottom. That lets you predict how users move and guide them toward the CTA.

This near-universal reading standard should be used in the digital world. A CTA button is therefore perfectly placed as the “destination” at the bottom of the content. If you follow the “F pattern”, the button goes on the left. If you design for a “Z pattern” or the Gutenberg diagram, you will prefer the bottom right, since that area draws more attention.

Whether the button works better on the left or the right differs from case to case. If you can run an A/B test, it will pick the winner. What matters most is that readers are led naturally to the call-to-action element once they have taken in the information: the reading is done and users are ready to take the action you expect.

The influence calls to action have on the success of a digital product is considerable. The smallest details can generate many conversions or lose them. If you keep the basics of design and content in mind and keep asking whether your interface can withstand the fickle reading habits of modern users, you are well equipped to make your CTA the perfect eye-catcher.

A successful CTA also does not always need creative quantum leaps, because users are already trained to explore pages by a certain pattern and find their way around common structures intuitively. A/B tests tell you with certainty which of several options is best. You should also take inspiration from leading providers and large platforms with high user numbers and borrow the effectiveness of established, well-working structures for your own CTAs.

Conversion in an online shop is decided at the cart, shipping options and checkout, exactly where interface design and shop technology meet.