The most important things to know about Call to Actions: Design and Copy — Part 1

Aurélio Jota

Published in

Youse | Design Chapter

4 min readDec 8, 2016

Go to part 2

Introduction

Call to action in web design — and in user experience (UX) in particular — is a term used for elements in a web page that solicit an action from the user. The most popular manifestation of call to action in web interfaces comes in the form of clickable buttons that when clicked, perform an action (e.g. “Buy this now!”) or lead to a web page with additional information (e.g. “Learn more…”) that asks the user to take action.

Button design is a visual cue that helps attract prospects’ attention to the call-to-action. In other words button design answers the question, “Where should I click?”.

Button copy on the other hand helps prospects make up their minds in the last critical moment and answers the question, “Why should I click this button?”.

Shape

The two most popular button shapes are rounded and square edges, and the shape that works best for you will largely depend on testing. And don’t overlook this factor; button shape can and does impact conversion rates, as evinced by the example below, which illustrates the results of a ContentVerve button shape test.

Size of call to action button versus surrounding elements

In web pages, the size of an element relative to its surrounding elements indicates its importance: the larger the element is, the more important it is. Decide how vital certain site actions are, and size your call to action buttons accordingly.

Lifetree Creative exhibits this idea of size to indicate importance with their call to action button. Compare the size of their button with the company logo. To grab the user’s attention, the call to action button is roughly 20% larger (in width) than the logo. Even though the logo is placed higher on the web page, your eyes are drawn to the call to action button because of its larger size in relation to surrounding elements.

White Spacing

The use of whitespace (or dead space) around a call to action button is an efective way of making it stand out in areas where there are many elements.

Placement

The placement of call to action buttons on a web page is critical to drawing the eyes of visitors. Placement in prominent locations such as the top section of a web page can lead to higher landing page conversions because users will likely notice the call to action button and take action.

Color (contrast matters)

Michael Aagaard says: My best advice is to use common sense and contrasting colors when you design your landing page buttons. The good old “squint test” is always helpful. Put together your page, take a few steps back, squint your eyes, and see if your button stands out.

I usually start by experimenting with an orange or green button, simply because they often perform well in tests. I don’t think there is any deeper psychological reason, it just seems that they stand out on most landing pages due to the average design. Again, it’s all about context, and I’ve seen tests where e.g. a purple button has outperformed both green and orange variations.