Buttons and call to actions
Buttons come in all sizes, shapes, and colors, and there really is no one-size-fits-all solution that works every time. So rather than learning tactics, the main things to know are the principles.
“Don’t make me think” — I’m sure you’re familiar with the phrase. Calls to action minimize hesitation — “now what” — and guide visitors to the next obvious step. Our goal as optimizers is to make it clear what the next step should be.
How likely they are to take action depends on whether
- they notice the CTA to begin with,
- the next step is obvious and makes sense, and
- they see value in the next step.
When evaluating calls to action, these 3 points are the main things we’ll assess.
1. Making the CTA noticeable
Here are some guiding principles on how to make call to action buttons noticeable by visitors.
One primary call to action
For every page on your site, define a single most wanted action. That’s your primary goal, and it comes with a primary call to action. That’s the one that would stand out above others.
You can have secondary calls to action, but they also need to look secondary.
In this example Pipedrive doesn’t leave any doubt about their primary goal — give it a try. And yes, there is a secondary call to action too (“sign up with Google”).
You can have the secondary call to action also as a button, but it should be less dominating. Here’s an example:
Button is usually better than link
Buttons are bigger, and can be more colorful — so they are more noticeable. Hence, if the goal is to make your CTA visible, it’s better to go with a button instead of a link.
Here’s a nice button on Vero’s website:
There are scenarios where you might want to have the call to action as a text link. One example would be ecommerce category pages where a button might draw more attention that the product image.
Make it big (enough)
Big buttons work better. Fitt’s law stipulates that the time required to move to a target area (e.g. click a button) is a function of the distance to the target and the size of the target. In other words, the bigger an object and the closer it is to us, the easier it is to use it.
Here’s a test case study to illustrate the point. The copy is the same, but the design changed (the button size increased from a big button to a huge button). The blue version is the control, dark version is the treatment:
Result: Darker version got 135% higher clickthroughs as well as 51% higher earnings per click. Remember, the button is just one variable here, but probably a significant contributor.
I’d like to point out that there should be a limit to how big the button is. It’s something you have to work out with the designer, so it also looks good instead of awkward.
Use the right amount of white space
Notice the buttons on Ebay:
While these buttons are not huge, they stand out very well — and not only because of the color. They have plenty of negative space around them which makes them more pronounced. Leave room around your CTAs.
Use a different color from the rest of the site
If your CTA is the same color as your background color, people won’t see it. Like here:
So you want to do something like this instead:
I don’t recommend that you waste your traffic on testing button colors — do that if you truly have nothing else to test (can’t imagine that). Just pick a color that’s different from the rest and that stands out. It’s a JFDI (just f do it) kind of implementation.
Read this article on which color converts the best.
Use the right copy
What your button says can make a huge difference. It’s impossible to know in advance which call to action copy will work the best, that’s something you’ll want to test.
A good formula to use it to have your CTA finish the sentence “I want to …”.
Typically you want to keep these 3 things in mind when writing your CTA:
- 1. It’s specific: What happens when you click the button is absolutely clear. Examples: Add to Cart, Get a Quote, Proceed to Payment, Subscribe to Newsletter, Start Your Free Trial.
- 2. It conveys a benefit: Get Conversion Tips, Start Making Money, Clear My Skin.
- 3. It contains a trigger word.
Trigger words are the words and phrases that trigger a user into clicking. If the user is looking for ‘pricing’, and your link says ‘pricing’, they’re going to click on it. So in this case, ‘pricing’ would be the trigger word.
Qualitative research like surveys and especially user testing will give you insight into the specific words they’re looking for. Also, pay attention to the search keywords people use to land on your site.
Interestingly CTA “Click here” tends to work pretty well! It defies all the rules, but I’ve seen it outperform other CTAs too many times.
What to avoid: Don’t use a CTA like “Submit”. Very few people want to submit.
- The Right Trigger Words
- Mastering The Call To Action — Words, Color, Size & Location
- High Impact Button Copy (video)
Typography and content
Content is design, too. The way you present content impacts readability — both how easy it is to consume the content, and whether it gets read to begin with.
Font size and type
The first step towards getting people to read your stuff is an easy to read font size. I don’t recommend using font sizes smaller than 16 pixels for body copy. You can do 14px or 12px for help texts (instructions for form labels etc). Headlines and calls to action should obviously be way bigger. One study found that larger font sizes do have the ability to elicit stronger emotional connections.
Font size isn’t the only factor, there’s also line height.
Assess each font type separately. Different fonts have different sizes, so different fonts can look very different at 16px.
Is there a “best” font?
Not really. The key here is prototypically. All common fonts are equally easy to read. So Arial, Georgia, Tahoma — not much difference there.
What you want to avoid is using a non-traditional font type for body copy as readability might suffer.
And DON’T USE ALL CAPS for body copy since it reduces comprehension and slows down reading speed (+ it’s like screaming at your readers).
Serif vs non-serif
There has been no conclusive evidence for either style of font that supports which is better for the screen, which is perhaps why the design community is split.
For example, in the Google/IBM study, they found that serif font Georgia was read 7.9% faster than sans serif Helvetica, but that it was not a statistically significant margin. They also found that serif or not, the style of type had virtually no impact on comprehension.
However, in the Psychophysics of Reading studies, participants perceived themselves as having better performance using fonts with serif, even though they scored higher in reading speed & comprehension when reading san serif fonts. Interesting.
Don’t waste your time fretting over sans serif vs serif. Instead, focus on learning to better pair both serif & sans serif fonts together to achieve maximum readability & develop a strong sense of “character” for your words.
If you want to get kick-started, here’s a list of 20 different font pairings that are known to work well together for computer screens.
Also, as you’re pairing your fonts, make sure you’re really looking to find something that’s readable first. I’d recommend you check out font designer Jessica Hische’s I:1 test, which asks you to put the letter “I” next to the number “1” to see if you can determine the difference.