A complete guide to call-to-action design
By: Hsin-Jou Lin
Tags: UI, Resources, UX, UX Design, Design Systems

Von Restorff effect

Von Restorff effect, aka isolation effect. The effect predicts that when multiple homogeneous stimuli are presented, the stimulus that differs from the rest is more likely to be remembered. In order to catch attention in the first glace, the button color should have a stark contrast to the background color. I would suggest using the button color to be an unused color among the interface.

Accessibility

According to Web Content Accessibility Guidelines (WCAG) 2.0 level AA requires a contrast ratio of 4.5 for normal text and 3 for large text. This is the tool that I like most, a quick test of color accessibility.

Placement

Here comes an old topic, is above the fold a myth? To me, yes and no. The CTA placement should depend on what is next. A decade before, best practices suggested the CTA is putting on the top, above the fold.

However, many times moving the CTA below the fold has shown to have higher conversion rate. Especially, for some complicated offers, users tend to learn more about the offer before taking actions. In this case, if the placement of CTA is above the fold, the user may lose the chance to convert. Out of sight is out of mind. What’s more, it is all about how you motivate your user to take that action.

Whitespaces

A great way to make your CTA stand out is to place nothing around them. See below.

Alignment

Also, Atlassian design system defined what alignment should be.

Right align the primary button to visually support navigation when using buttons to prompt a user to move through a sequence of screens (e.g. getting started guides).

Center align buttons for benefits modals and other models, with the primary button on the right.

Left align buttons for single-page forms and focused tasks, and sort by importance from left to right.

Button size

Button size is a goldilock, and we should find the sweet spot between “not too big” and “not too small.” A good rule of thumb is as below, and to set container width to the size of the text label with 16 dp padding on the left and right.

In iOS design guideline, it recommends a minimum of 44×44 pixels for any clickable design features on mobile device.

Button shape

Let’s talk a little about human brains. Our brains are programmed to avoid pointy things. Therefore, to trigger the action, CTA button shape is suggested to be a rounded edge.

Here is a study showed that,

Rounded edges are used the most : roughly 54% of the time.

: roughly 54% of the time. Completely square is used second most : 28% of the time.*

: 28% of the time.* Pill-shaped comes in last: 18% of the time. However, in the past few months, this shape is being used more (26% more compared to the beginning of the year). It looks like a button that’s begging to be pushed**.

* The statistics was done by 2016

** Apple Human Interface Guidelines defined push buttons as the rounded-edged buttons.

Something interested, there was a debate on the dropdown button, should it be a rounded corner shape or pill shape? The answer is, for a better user experience, it is suggested to use a rounded corner shape.

Takeaway

Button color

Use a contrast color for primary CTA, which should also be adjustable when on light and dark background.

A/B test for correct use of colors in the right context

Placement

Should be at a prominent position on the web page

Button Size

Desktop — 48 px height

Mobile — minimum of 44 px height

Button Shape

CTA button — pill shape

Dropdown button — rounded corner shape

Before working on the CTA design or design system, I would definitely recommend you to review more as possible. Design system Repo has its gallery for design system reference. Check this out!

Reference

Button color

Placement

Button size

Button shape