The all-in-one guide to high-converting CTA buttons

I've been summarizing a lot of tips for improving conversion rates, leveraging cognitive biases in UI design, and UX writing best practices. 

Here are 30 rules for designing high-converting call-to-action buttons. 

Included in this guide: general guidelines, design tips, UX Writing, cognitive biases worth knowing, and dark-patterns to avoid. Enjoy! 

General tips:

1. Be consistent with your messaging

Remember this: conversion rate optimization is not about optimizing a certain step, it's about optimizing the entire funnel. 

Be consistent with your messaging and set the right expectations across the entire funnel: your ads, your landing page, your App Store product page, etc. 

Without a consistent message, your users will feel misled and bounce. 

 

2. Focus on the user

Nobody cares about the internals of your product. Focus on what’s matter the most for the users: the bottom line, the benefits, the outcome. 

3. Aim to establish trust 

Make sure to address any concerns the users might have before taking an action. 

There are many techniques to build trust (social proof, testimonials, a reliable rating system, security certificates, etc.), so make sure to use them wisely (continue reading for some practical examples). 

4. Minimize the number of CTA buttons to 1

Too many options lead to friction, and friction slows down users and makes them think before they act. 

You want your users to figure out quickly what’s going on (“why am I here?”) and what they need to do next (“oh, click here?”). 

Aim for 1 CTA button. Unless, of course, friction is your kinky thing...

5. Longer path to action = bigger drops

Minimize the number of steps/fields required to complete the action. 

Every extra step that comes before the user hits that precious button reduces the chances of that action will take place.

6. Value first, commitment later

Give the users a glimpse of the future before they commit. 

Personal details, credit cards, push notifications, camera/location access rights, or any other request for commitment before the user sees some benefits out of it will reduce conversion rates. 

Get them to hit that button first, worry about the rest later. 

Remember: every word counts.

Make sure to carefully select your jargon, and always double-check your terminology assumptions. 

As the recent Apple Podcast terminology change (from 'subscribe' to 'follow') shows, sometimes a single word can make a huge impact on conversion rates. 

Design: 

7. It’s called a Button. Make it look like one

• Not a link,
• Not too small,
• Not a shy, pale noob,
• A big, fat, juicy, bold, colorful button. 

8. Make it stand out

Place the button in a place where it's easy to find. 

According to the Von Restorff Effect, when multiple homogeneous objects are presented together, the object that differs from the rest is more likely to be noticed and remembered.

Use size, color, position, texture, shape, shadows, saturation, gradients, and fonts to make the button stand out. 

9. Make it easily accessible. Always.

Accessing the CTA button should be bulletproof, regardless of the screen size, orientation, and language used by the users.

• When designing for desktops, test on laptops 
• When designing for mobile, test on the smallest popular smartphones 
• Make sure the CTA button is always visible, noticeable, and easily accessible

10. Place it above the fold

It's a mobile world, place that button above the fold. 

11. Use rounded corners

They say buttons with rounded corners convert better. 

Why is that? 

1. Humans are used to avoiding sharp edges and prefer curved objects 
2. Rounded corners are easier on the eyes
3. Rounded corners are easier to process and point the focus to the middle of the button. 

I’ve never A/B tested it myself, but I don’t argue either. 

12. Triple the white spaces 

Get rid of all the borders and separators, and triple the whitespaces. 

And by "whitespaces" I mean both outside of the button (margins) and inside the button (padding).

13. Size matters, don’t be weird

A button should look like a button. If you stretch it too much (which might happen when using auto-resize) - it blends with the design and can be easily missed.

Microcopy & UX Writing:

14. Keep it short and simple 

Don’t ask your users (or visitors) to read long text. 2-5 words should be more than enough for a CTA button. Find the ways to turn a long sentence into a short, few words phrase. 

15. Don’t use vague, generic words

• Submit
• Enter
• Access
• Complete
• Learn
• Read More 

Meh... Just because those terms are often used by other products doesn’t mean they’re engaging. 

16. Instead, use strong action-oriented words

Examples for strong, action-oriented words: 

• Get
• Try
• Book
• Download

17. Emphasize the benefits 

What benefits will the users achieve by proceeding? Describe the good things that will happen by clicking the button instead of describing what the button does:

• Use “Find flights” instead of “search”
• Use “Make song available offline” instead of “download song"
• Use “Book a massage” instead of “book”
• Use “Get your free report” instead of a generic “download”
• Use “Start training” instead of just “start”

And remember: when describing the benefits - use the terminology the users use. They don't care if the song will be downloaded and stored somewhere, they just want to know it will be available during flights. 

18. Use friendly text formatting

Make it easier for users to skim through the text: 

• Whenever numbers are involved – use numerals. 
• When including dates in your text – add “today”, “tomorrow”, and “yesterday” whenever relevant. 
• Phone numbers are harder to read when presented as one block of digits, use punctuation marks to make the number easier to scan. 

19. Decorate the button with a “click trigger”

Sometimes, a piece of extra information next to the button is all the users need in order to better understand what’s going on, clear anxiety, or address a concern.

These short sentences can help trigger the anticipated click, and are often called “click triggers”. 

Here are a few “click triggers” examples product managers and UX Writers can follow to improve CTA conversion rates: 

Set the right expectations 

“Why am I here? What comes next? How long will it take?”

Add a short, concise sentence below your CTA button to address those questions and set the right expectations:

• “1 click checkout“
• “Only your friends can see this post” 
• “10 minutes read“

20. Clarity = Conversion

Here’s a great example taken from my post 10 lessons learned from asking our users to pay.

To make a long story short: when we discovered that some users are not clicking the “Book Now” button because they’re concerned that it will trigger the payment process - we simply added a short text explaining that it’s not going to happen. It made an impact and minimized the drop in this page: 

21. Eliminate security concerns

Users hate risks (this is known as the zero-risk bias. To eliminate potential concerns (especially when payments are involved) - emphasize your product security strengths. 

Make it stand out by using security logos and icons (if you have a certificate use it, if not - google it). 

If you’re offering a money-back guarantee or a free trial without asking for a credit card - show it.

22. Eliminate privacy concerns

Unknown outcomes lead to poor conversion rates (this is known as the ambiguity effect) especially when privacy is involved. 

Eliminate possible privacy concerns by committing to keep your users' details safe and respect their privacy. (And remember that promise when 3rd party companies offer to buy your data for a lot of money...) 

23. Be convincing

Social proof can "convince" the users that it's safe (and recommended) to "click that button". It can be achieved by placing testimonials, company logos, user reviews, counters, awards, media mentions, next to the CTA button. Overused, yet still highly effective. 

24. Nudge the users to click

If you’re currently running a special campaign or provide a special deal - make sure to emphasize it. 

Users hate losing much more than they love winning (known as the loss aversion bias) so leverage it by emphasizing the potential loss of not clicking the button (i.e. “stop wasting money”).

Remember, using this technique is perfectly legit if you’re telling the truth, but please don’t turn it into a dark pattern.

25. Use scarcity and urgency 

• “This exclusive deal ends in 5 hours!”
• “In high demand - only 7 rooms left” 

Looks familiar? 

I’m not a huge fan of this technique, but a little kick in the butt can help improve buttons click-through rates. 

Just be credible and don’t fake scarcity just for the sake of pressuring the users to make the transaction. Use it when your stock is indeed limited or time is of an essence. 

26. Offer immediate benefit 

Users prefer smaller-sooner reward rather than a larger-later reward (AKA: Hyperbolic Discounting). Offer a small discount (or free shipment) in return for immediate purchase. This small addition can nudge users to act quicker. 

 

Dark patterns to avoid:

The following tips are the "don't". Make sure to avoid them. 

27. Don't use confirmshaming 

Don't know what confirmshaming is? Continue reading…

Unless, of course 😈… you prefer to remain dumb, forever lost in your endless stupidity…  

Got it? That's confirmshaming, and it's a popular dark pattern designed to pressure users to click. 

My recommendation: don't use it. 

28. Don't use deliberate misdirection

Another popular dark pattern where the UI intentionally distracts users from the standard option by using misleading design or misleading microcopy. 

This cannot end well... 

29. Don't hide the button...

Sometimes clicking the button is a bad thing for the business (for example: canceling a subscription or unsubscribing from a newsletter). 

A common dark pattern is to try and hide the main action button hoping that some users will give up. 

Like most dark patterns, this technique might lead to small short term wins, but it doesn't pay off in the long term and can negatively affect the company's reputation.

Last tip ahead:

30. Final tip: never assume you know how your users will act

Following best practices to improve conversion rates can sometimes lead to the opposite results. In some cases, a change might improve conversion rates in a certain page/step, but cause some damage in one of the next pages/steps. 

It's hard to predict how a certain change will impact the behavior of users (especially in B2C products), so it's important to measure every product change, and A/B test the experiments.

Before you go...

Hey, make sure to subscribe to my occasional newsletter and become 23% more awesome than average. 

I promise I don't spam, payment is safe and secure, there are thousands of subscribers, this offer ends tomorrow, and we are running out of posts 😱, so hurry up and subscribe!

That's it for this one, here are some more UI guides if you're really bored and lonely: 

• 20 UI rules for designing data tables that don't suck
• Visually distorted - when symmetrical UI looks all wrong
• Product-led growth - the pocket guide every product person should read