Website call to action tips – how to write better buttons

Watch this article as a video

If you prefer a video format, Tomasz walks you through the CTA tips that will increase the conversion rate on your website.

Tip #1 – Improve the hierarchy of CTA buttons

Start with button levels. This helps you guide the user through the hierarchy of your page and nudge them towards the right action. And by “nudge” I don’t mean just straight-up psychological manipulation. User experience is a motivating factor here as well and using the correct website button levels improves your interface.

In order to do that, you introduce multiple levels of buttons: primary, secondary, and maybe even tertiary. Plus, you still have a choice to use in-line links.

Primary Calls to Action

Primary buttons are the ones that you’ll have everywhere on your website. They point to an action that you want people to take the most. That is to find out more about your services, get in touch, and so on – the primary conversion. Our CTA tips will help you come up with buttons that people want to click.

Secondary buttons

Now for secondary buttons, they are less “in your face” and more common. Not everyone is ready to buy from you right away, so you need to guide them to additional information. You don’t want to give them a dead end and say “convert or leave”.

Secondary CTAs assist the user with finding out more about the current piece of content that they’re reading. It’s a highly contextual piece of the interface.

For example, on the Home page, you could have sections about your products or services. Under each one of them, you might have a secondary button that says, “read more about X” and then lower down you’d have “learn how we help you with Y”. Secondary buttons need to be visibly less important but still easy to spot.

Your primary call to action might be visible at all times, i.e. in your navigation, so it’s important that the two levels don’t clash and fight for the user’s attention.

Tertiary buttons

There’s a scenario where you need a third level – usually very plain text which “pops” a bit more than in-line links. This can often sit next to a secondary button. Let’s say the secondary button guides a user to the next step, but you have it on good authority that 10-25% of people will be ready to take a different action right away. You can give it to them via the tertiary button, without confusing the majority that still need to know a bit more.

“Scroll to” buttons

Finally, there are “scroll to” links which help users move down the page without scrolling. They’re common in tables of content that take people to a specific heading, to an FAQ section, and so on.

Remember all these different levels and use them accordingly.

Tip #2 – Keep the Calls To Action consistent

This is the most important for primary calls to action. The first rule is that primary CTAs need to be universal across the website, please! Users will associate that button with a single action. If it changes all the time, it will become confusing.

Obviously, there are exceptions, but you shouldn’t even change the text of that link. If I see a red primary button that says “Get in touch”, and then “Buy now” on a different page and maybe “Donate to our charity” on the next one, that’s a lot of cognitive load. Two of these should be secondary. Can you guess which? I’ll leave my answer at the end of the article.

The above scenario is still somewhat acceptable, though. These are different pages, after all. But you shouldn’t use different labels for a primary CTA on the same page. You’ll go to jail. Seriously.

Make them the same, and direct people to the same place. If they read more about your company and then make a U-turn to that page, you’ll be glad you didn’t confuse them. Reducing cognitive load helps make your CTA buttons more effective.

Tip #3 – Use verbs in your button labels

Language is super important. I’d say even more so on the Web. Writing website copy is much different that what they taught you at school.

In terms of CTA buttons, give users a bit more context of what is going to happen when they click on the button. It can’t just be like “Contact form” and that’s it. Make it self-explanatory and actionable.

Tell people what to expect when they click it. Don’t shy away from writing long CTA labels. You can go for ”Send us a message” or “Ask about the product”. That’s okay. It’s not too long!

If you give clients a demo, don’t just say “Demo”. Even “Book a demo” isn’t that great. It’s lacking context. Maybe a niece interrupted them to play and they’re coming back to your site after an hour. The additional context will save them so much time. Say “Book a [PRODUCT NAME] demo”, or “Book a demo of our spreadsheet software”. All they need to do is read one button to know what happens next.

One neat trick that we always use at NerdCow is asking ourselves how we feel about that button. Of course, from the perspective of the user.

“Why do I want to click this now?”

“What do I expect to happen when I click this?”

“Should I click the button now?”

Answering these simple questions gives you a ton of ideas for button labels. Try it and let me know how it goes.

Tip #4 – Mind the order of your CTAs

This one encompasses the previous three tips. But this time, it’s more about telling a story, rather than the design or the layout.

Do you know how many brand-new visitors you get? It’s probably the majority. They might know your brand but they’re not sure what you do. (And if most of them know you, great job of raising awareness. 👌)

But even then, if you visit NerdCow’s website and you know we’re a web agency, do you click “Schedule a call” right away? I’ll give away a bit of a “trade secret” here – most of you wouldn’t. Everyone wants to learn about the company. Who is Dawid, who is Tomasz, and are there any others? Do they like kittens? What is it like to work with them?

Placing a big, red “CONVERT RIGHT NOW” CTA at the top of your website isn’t always the best idea. Create a free-flowing conversation with your user. Answer their questions, lead them to the “About” page, and explain your services or products.

Yes, it’s true, people often leave a website after just seconds. But it’s not because they don’t see a credit card input right away. That’s not how you solve this problem.

Instead, you want to imagine you’re explaining this to a random person on the street, maybe your grandma – someone who does not know about it. What’s their first question? That’s your first button! Spoiler: it’s probably secondary, at best.

It’s just like explaining how the universe works to a five-year-old. You would start by saying that our planet is round. That’s it. But later in life, you could explain it’s actually elliptical and what it means.

Build on top of that knowledge as people travel through your website. Don’t overwhelm them from the get-go.

Bonus tip – the Fitt’s Law

Fitt’s Law is one of the digital psychology laws that I love. It talks about the time to click at the target (your call to action) based on its size and the distance from the average mouse pointer position.

What does it mean for your website?

Try to keep buttons and all the actions close to the important information. Don’t make people drag their mouse pointer across their entire screen. Try to keep in mind that some people have really large screens, while others have small ones.

This will be more of a task for your web agency but just have a quick sanity check. Is the button too far on a large screen? Is it too big on a small device? You can eyeball it and if something looks off, ask your agency if they think the same.

So, do you have ideas on how to improve your CTAs after reading this article? Let me know in the comments, and don’t be shy – if it’s just one, that’s awesome. If it’s more, you’ll see a bigger improvement. No need to worry about the past mistakes. We’ve all made them before getting here 😊