Design / August 20, 2018
Subscribe to receive our weekly e-flyer or other announcements.
How would you like a magic button that drew in site users and turned their sessions into conversions? That’s exactly what a good Call To Action button does–when designed correctly.
A Call to Action, or CTA, is an element of a website that calls on website users to complete an action. CTAs are important because they turn site users from visitors into engagements, ultimately creating conversions.
To create a CTA, you need something compelling that entices the attentions of site goers–something that site goers find helpful or important. To create a good CTA, follow these 5 steps:
1 – Analyze your audience
Ask “Who is my audience, and what is their end goal?”, “What does my audience want?”, and “How can I make my audience’s user journey easier?” Answering these questions create CTAs that resonate with your audience and bring you conversions.
Imagine you run a website that sells customizable pens. You can assume web users are on your site to design their own pens, so CTAs should revolve around getting users to do things like “upload my logo” or “create a custom design.” Alternatively, if you run a pest extermination website, you can assume web users are on your site because they’re in need of pest control. CTAs should revolve around going pest free, like “start your pest free journey today–get a quick quote”, or “chat with an agent to see which product is best for you.”
Analyzing your audience to determine what the audience wants, which will help you determine how to create effective CTAs. This will also lay the foundation for how you will carry out the following steps of creating a great CTA.
2 – Create color
Ask “How can I make my CTA stand out from the page, while fitting in with branding?” If you don’t know, check if your company has a style guide, which has your company’s official colors, fonts, and personality. This will help you check what colors are associated with your company, and which are ok to use.
The BSA primary and secondary color style guide (bottom right) tells designers what colors can be used in the website–from the logo to the CTA buttons.
Also look into color psychology- the association consumers have with colors. For instance, if you have a big sale, do you want to use a big red CTA button because it’s eye catching, or do you want to stay away from red because it can evoke a negative “stop!” emotional association?
When choosing colors, take into account what colors are already on your website, what resources you have, and what context colors are in. If a style guide has 2 colors (or if you have no style guide), maybe expand from the style guide. If a style guide has 14 shades of only green, maybe avoid a green CTA. Also be aware of what colors mean (especially if you’re a multinational website) as color meanings change with culture. Whereas in North America, yellow often depicts cheer or optimism, in Germany it often depicts envy. This is something you’d want to know before designing all your CTAs!
3 – Choose sizing and placement
Ask “Where on a webpage are eyes naturally drawn?” and “Where do users expect something to be?” This will help you decide placement. For instance, if a CTA leads to a checkout, put the checkout cart it in the upper right corner; if a CTA is to chat with a live person, put it in the bottom right. Why? Because it’s muscle memory to scroll to these places. By putting CTAs where people expect them to be, you make them more accessible and converionslable.
Also ask, “In what context does a person need my CTA; is it homepage material, or is it page-dependent or secondary page material?” For instance, the Poison Control website, “Call for help” CTA is on huge homepage display, as the issue is pressing, time sensitive, and a top reason why people go to the website. This differs from Disney World’s site, where the CTA to book a hotel is placed in a much smaller size, and a CTA to “buy tickets” is not even located on the homepage at all!
With such a massive CTA to call 1-800-222-1222 or get help with a possible poisoning, it would be hard to miss what to do if you suspect being poisoned.
Once you’ve set a location for your CTA, make sure that it looks good on an array of devices and screens. Does the CTA look as good on a split screen as on a projector, or a tablet? If you have animation, how will that translate for mobile viewers? Answering these questions will help your CTAs look good and perform well.
4 – Construct Copy
Ask “What do I want users to do?”; the copy should reflect this. Since the layout and color of a CTA is designed to catch the attention of a user, the copy and text of the CTA should give a clear, direct instruction of what to do once a user’s attention is grabbed.
CTAs generally feature short, quick copy with strong action words, and are usually accompanied by longer context text. This text tells a user why they should do something, and the CTA tells them how to do it.
Best Buy’s “Show Now” CTA context text tells you that there’s a sale (hinting that there’s something urgent you should do); the CTA “Shop Now” tells you what exactly to do.
Another way to leverage context is to offer a “free” appeal; this is something that can be seen in websites such as Wordstream, Box, or even Mailchimp, where the user is promised something for free if they sign up. Using tactics with extra appeal to users (like a free guide, or a limited time offer) often makes users find urgency in completing a CTA, resulting in a more compelling CTA.
5 – Continuously Test!
Play around with layout, copy, text, and color to see which yields the most conversions. from 2015 to now, the Boston Globe has changed with their subscribe now & member sign in actions–I’d be willing to bet it’s because the new design was getting higher ROI.
The final step to this is to test. Play around with the three elements from before to see what yields more conversions. If you change a button to “start your free trial now”, are users more likely to click on it than “registration takes seconds; join us now!”? If you change your location from static box in the bottom left corner to an animated pop up “Chat now!” button in the bottom right corner will more people chat? I’m guessing yes, but who knows–give it a whirl yourself!
Featured / August 16, 2018