The ultimate guide to designing CTAs

How to encourage conversions? How to get users to buy, sign up or submit? Read on for testing a call to action, and designing CTAs.

You are reading: The ultimate guide to designing CTAs

Every website needs a call to action to help users along in their journey. Imagine arriving at a site, navigating to what you think is the ‘right’ page but then not being able to work out how to progress to the next step. How long do you scan the page or click around that site for before you become too frustrated and leave? Is a strategically placed call to action (CTA) all you need?

Wikipedia's definition of a Call To Action

Your website’s sign posts

In the same way a road sign helps you decide the correct route to your chosen destination, a CTA will help your users understand where they can go next. Rather than an in-your-face, sales-y instruction, I like to think of them as a guide, a way to respectfully point your users in the right direction. A garish, pushy cliché might actually have the opposite effect and put users off your product/service/brand.

That’s not to say your CTA can’t be upfront, just consider at what point your users are in their conversion journey when designing them. A new user, unfamiliar with your brand or eCommerce website, is unlikely to respond well to BUY NOW on your homepage, when really what they need is more information. Knowledge is power and providing users with all they need to know before inviting them to convert means they’re in a position to make an informed decision. An invitation to find out more, read more, or explore may be more fitting. Further along their journey, after they’re more familiar with your brand and your product, is where users are likely to be ready to seriously consider converting.

A Checklist for designing and testing CTAs

That’s right, guys: Another post in list form. Here we go…

Define your objectives: What is your business’ ultimate goal? What do you want users to do on each key page of your website? What do you think they want to do on each key page of your website? Try to map the user journey, noting each mini-conversion along the way.

Put yourself in your users’ shoes: This one’s more easily said than done, but understanding customer perspective will give insight into how your website’s really performing. Maybe buy your own product, or invite users to sign up for your service and then fill out a questionnaire about their experience (I like iPerceptions). You could record users going through your website’s enquiry process through a purpose-built platform, such as UserTesting.

Be honest: If that offer on your product really is limited, or there really are only a small number of places left at your event, then you must say so, but be mindful that repetitive, forceful CTAs can be seen as gimmicky and sales-y, which can put the savvy user off.

Don’t force it: using an “Add to Basket” button on a product page is almost a no-brainer, especially when compared to, perhaps, a blogging site. When blogging, it can feel a bit false to include a CTA. Even now as I write this, I’m thinking about whether I should be encouraging readers to get in touch, or (the more natural) inviting them to share their opinion on CTA design in the comments…  If you find yourself in the same position, you‘ve got two options in my opinion: either re-think the invitation, or remove it completely.

Keep it clear: A busy page full of CTAs quickly becomes overwhelming. Try to stick to one main goal/conversion to clearly spell out what your users should logically do next. There’s nothing to say you can’t test your secondary CTAs or mini-conversions beneath what may be considered the main commitment:

Screenshot of Dropbox homepage

Place it strategically: Following on from clarity, remember users need to be able to locate the CTA easily. If it’s hard to see, they’ll find a competitor who spells it out, hassle free instead. I think the “above the fold” rule is becoming less of an issue, but it’s highly dependent on what you’re offering and who your users are. As above, if you’re selling something, try putting the Basket button near the product image and description. If you’re inviting readers to subscribe to your blog, it’d likely make more sense to offer the sign up towards the end of the post.

Make your users feel valued: All that hard-sell jargon does nothing to enhance the user journey. Using an honest, inviting, and descriptive call to action will help users understand what’s coming next, and what they’re potentially committing to.

User experience doesn’t live and die with CTAs

It’s not just about the call to action itself. Consider overall design and content – I don’t just mean whether red or green works best for your button – I mean the copy and aesthetics of the page, if not your entire site. That call to action works in conjunction with every other element: colour schemes, images, copy, whatever. And don’t be afraid of white space to help group and highlight information; US company, Open Mile, managed to increase their conversion rate by 232% simply by reducing the clutter around their CTA.

The language of conversion

Ok, let’s first talk about copy’s role in all of this. The colour of your button serves to help users know where to click, but the copy is what tells them why they should click, and what they should expect next, so use language that resonates with your users:

“I don’t know the rules of grammar. If you’re trying to persuade people to do something, or buy something, it seems to me you should use their language.”

~ David Ogilvy, The Father of Advertising

Tell users how things are going to improve for them after they click that CTA. Non-descriptive button text like “submit” or “download” isn’t doing much to persuade them to click. But how about this?

A fine example of a bright green call to action
Don’t actually click, tempting as it is, this is your guide!

The button is in a contrasting colour so it’s eye-catching, it’s surrounded by white space so it stands out, and the copy’s descriptive as well as highlighting the fact that it’s free.

Beyond the button itself, the copy around it helps encourage conversion. Basecamp does this well on its homepage:

Screenshot of basecamp's homepage

So we have a headline and summary of what Basecamp is designed to do, a highly descriptive sign-up button to invite us to “Use Basecamp”, and we’re also informed that there is a two month free trial. No wonder all those companies signed up to use Basecamp just last week.

Added bonus: A cute graphic to further illustrate what you can expect from Basecamp using happy, smiley professionals, visual representations of common elements of any project, and the organisation’s logo complete with forward-pointing-arrow. Lovely stuff.

A picture speaks a thousand words

There are other visual cues to consider outside of words, buttons, and arrows. Images can be a great way of guiding users through their journey without being pushy. This eye tracking study shows how powerful an image can be: 

sunsilk example 2 - ctas - browser media When the red head’s eyes are focussed on the actual product, users’ eyes also focus on the product.

… Thing is, it’s not as simple as “use a face looking at the thing you’re trying to sell”. This study by EyeQuant shows us that faces don’t always instantly draw attention, but that they do sometimes… You’re going to have to test what works.

This all feels a bit eCommerce-y. Does it work for blogs?

I could write a whole post on this alone, but I’ll try to keep it brief here. Firstly, we have to be realistic and understand that readers don’t usually return to a blog week-in-week-out for their next instalment of <insert industry> weekly.

If a user’s found your blog post by accident, say through organic search, they probably won’t be in a conversion mind-frame, certainly not at first. Entice readers to sign up by outlining the kind of topics they’ll receive via email, make it easy for them to connect with you and your organisation with social media links/an email address/link to a contact form.

Although this is another mini-conversion, you can also invite readers to engage with your blog posts by offering thought provoking questions for them to answer in the comments. You can then respond to their comments, which will help cement your relationship further.

So what now?

Here’s what you don’t do; don’t guess what your potential customers want. Instead, ask them. User feedback surveys and split testing will help identify what your users are looking for.

It’s tempting to look at what other similar organisations are doing and then copy them outright. Don’t. Your group of potential customers will likely differ in desire, behaviour, and opinion and with more than just the CTA being the deciding factor, you’ve got to consider how that other company’s story compares against your own.

Your choice of content should serve as a means of clarifying what’s on offer through your website. If your users aren’t actually into what you’re offering, you can’t force them into converting, however they’ll appreciate your transparency as a brand. Stringing users’ along only to find out you can’t offer them what they set out for is likely to irate people as it’s a waste of their time, and yours for that matter.

User experience and conversion rate optimisation aren’t about manipulation, they’re about offering a smooth, simple, and enjoyable user journey, and split-testing can help you to find out what that looks like.


Latest from the blog