15 Rules for Building Killer Calls to Action + Examples to Inspire Your Own
Article
by
David Vranicar
A call to action is a signpost on the path toward a goal. Like a mile marker nudging a runner along during a marathon, or an arrow pointing a hiker to the summit.
Calls to action let your visitors know where they are, and what they should do next. There are a million different ways to use CTAs to inspire certain behaviors. Heck, you could probably find 10 different CTAs on this page. Download. Subscribe. Learn more. Share.
Websites are always trying to get your attention and, after that, get your action. Here’s a call to action example from Amazon. At a glance, it looks like Amazon just wants you to sign up for Amazon Prime. And that’s true – this call to action is indeed designed to generate Prime signups. But there is lots going on in this CTA.
Look at the Without Prime column:
The headline is black, cramped, and boring
The prices are in red and look like a warning
Instead of using a button, which makes people think “click,” they just use text
The text reminds you that you’ll be “without fast, free shipping”
Now let’s look at the Prime column:
The headline is soft blue and has a smiley face
Instead of red numbers, which say “STOP!”, they use green numbers, which say “GO!”
That yellow button jumps off the page
The text in the button talks about “benefits”
So much goes into a good call to action. This post will look at nine things to keep in mind as you build CTAs for your store, along with call to action examples of each. Shall we?
Calls to action, or CTAs, are used by websites and apps to trigger certain behaviors. Calls to action come in various formats – including buttons, images, and text – and encourage people to take specific actions. In terms of ecommerce and dropshipping, they commonly implore visitors to browse products, sign up for newsletters, and share content on social media.
1. Not All Calls to Action Are About Sales (Not Now, Anyway)
In ecommerce, the ultimate goal is sales. That’s why so many ecommerce call to action examples are for sales – they tell us to buy or shop or add something to our basket. But there are plenty of CTAs that have nothing to do with generating sales. Or at least they have nothing to do with generating sales right now. Instead, lots of calls to action are designed to generate leads, inform shoppers, and encourage sharing.
Let’s look at some call to action examples that encourage users to take all sorts of actions besides making a purchase.
The Social Proof CTA
The mattress images about these customer reviews from Casper are clickable, each displaying the reviews associated with that particular model. The product photos are essentially CTA “buttons” and each one shows visitors just how much customers loved their Casper experience. They also top it off with a convenient “Shop” button to help users get even closer to the point of purchase.
The Social Sharing Call to Action
There are numerous calls to action in these two images from HubSpot, and none of them has anything to do with sales. This CTA marketing tactic is designed to make it easy to share HubSpot’s content on social media, email, or anywhere else (the last icon is “copy”).
The Mailing List CTA
In these three images, we see a discount, then a free download, then an offer to answer questions. In each one, the CTA is designed to get an email address. You can build an email list to send marketing materials and additional offers to nurture future sales. Unlike CTAs that say “Buy now!” these CTAs essentially say, “Let us email you so you might buy later.”
There are no rules for where you place your CTAs. Here we see that Foodora, a food delivery service, wants visitors to do one of a few things. You can either choose whether you want to start an order for delivery or pick-up:
And jobseekers are encouraged to apply for a position with the company, in a banner at the top of the site. This is right above the CTAs to log in and toggle your language. This menu sticks to the top and stays with you as you scroll.
As you get further down the page, you can browse their business lunch offerings or join the email list if you’re not ready to place an order yet.
We’re big fans of call to action marketing with dynamic placement, as well. For example, if you want to try Shopify's free trial, you can do it at the top of every page with the sticky navigation menu.
HubSpot also does a good job of getting their CTAs in front of visitors, no matter where you might be on the page. This image shows how a HubSpot page responds when you scroll down a bit: The top two calls to action (Subscribe and Get started) stay pinned to the top, and the sharing CTAs stay pinned to the bottom.
One final example of great call to action placement from ColourPop. This heart lets you add an item to your wishlist. Not only is the design catchy – a heart is better than a rectangle that says Add to wishlist – but it also doesn’t intrude on the product image itself. It’s always there, but never in the way.
3. Supporting Text Gives Extra Juice to CTAs
A call to action can only say so much. Many CTAs are roughly the size of a button, so there isn’t always space to brag about features or deals. These next call to action examples prove that you can make your CTAs more clickable with some supporting text.
Red Bull’s actual call to action here contains two words – SAVE NOW. But those two words have lots of help. Starting at the top with the headline – HOLD THE RHYMES – catching users’ attention. Just below that, there’s a note about a 25 percent discount. SAVENOW isn’t the focal point. Instead, SAVENOW is just the vehicle to take advantage of all the cool stuff on the next page.
Here are some CTA examples from car manufacturer Tesla. First, Tesla lets visitors know that if you want to shop now, you can get a full refund in seven days or 1,000 miles. Choose from the EXISTING INVENTORY, go for a CUSTOM ORDER, or Visit a store. Text is used to set expectations, explain options, and guide the visitor exactly where they want to go.
Next up is a CTA example from Audible, the audio book outlet. The call to action itself is enticing and informative, with the word “free” repeated and reassuring language like “try” and “Cancel anytime” reinforcing that there really isn’t any downside here.
This next call to action from Struggle Bear encourages visitors to add their products to their shopping cart with supportive copy meant to placate any buyer hesitations. They remind shoppers of the free shipping for qualifying orders and hassle-free returns. Notes like that might offer the final little push toward a purchase that ADD TO CART never could.
More harmony here between the CTA and surrounding text from REI. Clearance, save, and Shop the deals absolutely support each other: They’re all focused on getting a good deal. Little turns of phrase like that can have a huge impact on the effectiveness of your CTAs.
4. CTAs Don’t Have to Be Boring Buttons
Websites all across the web are doing interesting things with CTA design. After all, there’s no rule that says CTAs have to be colored rectangles.
Here, for instance, is a newsletter signup, and the word Subscribe is nowhere to be found.
This CTA design from Boss is embedded among dozens of products. It absolutely captures the visitor’s attention: You expect to see another article of clothing, and instead you get an invitation to look at a new collection.
Never a slouch when it comes to design, Apple cooked up a beautiful call to action for the iPhone X. Can’t decide where to click? Doesn’t matter. The entire thing is linked, so you can click anywhere on the screen with this new-age CTA.
Here are a few more beautiful call to action examples. There are standard CTA elements like Shop now, but in each of these, the entire screen is a clickable call to action.
5. Stand-out Calls to Action Can Guide Visitors Where You Want Them
If there are certain products you want to push or certain deals that you want shoppers to be aware of, you can adapt your calls to action to nudge people exactly where you want them to go.
SKINNYDIP does exactly that with this Sale call to action. They’re happy for you to click on NEW IN, PHONE, or other menu navigation options, but the CTA encouraging visitors to check out the sale stands out. And of course shoppers love a sale, so it’s a win-win: SKINNYDIP shows items that are ready to move, and the shopper immediately learns about the best deals.
The software company Zendesk uses this tactic to funnel people to its “Suite” and “Sunshine” products. When you hover over the Products tab on the Zendesk website, lots of options pop up. But these two options pop up bigger than the rest with a special dedicated design treatment. The size and placement of this call to action show that Zendesk wants you to check it out.
Here’s another call to action, from Nike, that immediately catches the eye. You can Shop now, which would make any ecommerce store happy. The other option, though, is Customize and buy. The subtle inclusion of a color wheel catches our attention and reinforces the idea that you can get creative with your customized shoe design.
6. Being Tricky With Calls to Action is Lame
Every now and then you’ll find calls to action that are a bit misleading. These are no fun.
Instead of using the strategy we just discussed – creating eye-catching CTAs to direct visitors toward best deals and services – these CTAs do the opposite. They use colors and placement to guide users toward items that they specifically don’t want, often to prevent the customer from churning.
To cancel your subscription at this website, you have to answer a couple of questions. No big deal. But the last step is submitting the cancellation – and then things get tricky. There are two buttons, and everything about them is counterintuitive. For starters, they’re inverted: Generally when two buttons are side-by-side, the button that means “proceed” will be on the right. Here, Submit Cancel is on the left. In addition, the Back button is colored, which instinctively draws the user’s attention.
Here’s another example of deceptive CTAs, once again relating to a subscription cancellation. When you signal your intention to quit, you go to this page. You get one last sales pitch to renew your subscription:
After you scroll through the sales pitch, you can go ahead and confirm the cancellation:
After you click Yes, it’s all over. Or so you thought. Instead, clicking Yes simply takes you to another page:
You’re forced to scroll some more, and eventually submit answers to questions. And then, you have to cancel again.
At this point, you’ve answered the same question – Are you sure you want to cancel? – two times. You’ve also navigated across multiple pages, and if you dropped out of the process at any point, the cancellation wouldn’t go through.
This kind of thing has all sorts of downside. The best case scenario is that the churning subscriber – who is presumably already less than 100% satisfied with the service – succeeds with their cancellation. The worst case is that the CTAs confuse the user enough that the cancelation doesn’t go through. That would mean (a) they have to go through the cancellation steps again, or (b) they are surprised next month when they are billed for a service they thought was canceled.
7. It’s Fine to Use CTAs More Than Once
With calls to action, sometimes you have to repeat yourself. And that’s fine. Most sites do. In fact, there’s an average of 2.68 calls to action per webpage.
If your CTAs are tastefully designed and create value for shoppers – for example, leading them to the best deals or newest offers – then they won’t mind seeing them more than once. Or more than twice. Or more than… well, let’s just take a look at a few call to action examples that utilize the say-it-more-than-once strategy.
This page from Gymshark gives users every chance to shop. The placement of these calls to action ensures that, on desktop or mobile, the visitor is always in close proximity to a button that’ll help them shop.
Let’s check back in with Audible. Each and every CTA button on their homepage has the words “free” and “try,” which is surely no accident. They also sprinkle the word “trial” throughout the page.
8. Be Careful With Calls to Action That Require Apps
In the beginning, CTAs were mostly intra-site. In other words, the “action” in “call to action” kept the visitor within the website they were already on – visit a page, go to checkout, add something to a basket.
Then we saw an explosion of social CTAs. In addition to browsing products or making purchases, calls to action started encouraging users to post images on Pinterest, share articles on Twitter, etc.
The next evolution: using calls to action to let people share stuff on apps. Here, for example, are some of the new icons that you’ll find on the web – WhatsApp and Slack are the first two. WhatsApp is a mobile messaging app that also has a desktop version; Slack is a desktop and mobile workplace collaboration tool.
CTAs that encourage sharing are awesome. But when you incorporate apps like WhatsApp and Slack into your calls to action, it requires integration with technology that is not simply off-site, but also off-browser. And even in 2018, these integrations are not always smooth.
Here’s what you might see when you click on the Slack CTA. Nobody wants to click on a call to action and then see a note that you need to contact your administrator.
Same thing can happen with WhatsApp. Instead of sharing an article via WhatsApp, you might be asked to sign up for WhatsApp – even if you’re logged in to the desktop app.
9. Use CTAs as Navigation Tools
Calls to action are great navigation tools: You benefit because you can guide your visitors exactly where you want them to go, and your visitors benefit because they have a clean experience navigating your site.
Here’s a call to action example from United By Blue that’s designed to help visitors navigate the massive selection of categories and subcategories available.
On sites with endless options, CTAs like this can save your shoppers time and effort as they look for products. And we want to do anything we can to reduce the time it takes them to get to checkout.
10. Keep it Consistent
Over time, you want to train returning users to take specific actions on your site. If you have different call to action buttons that go to the same page, don’t use different ones that say “LEARN MORE,” “SHOP MORE,” and “BUY NOW.” This can be confusing — the user won’t be so sure on where the link will take them.
As they come back to their site, consistency will create a sense of familiarity and make it easier for returning users to navigate. Check out iHeartRaves writes the call to action copy on their homepage: They always say SHOP followed by the product category for links that go to product listing pages.
11. Clear Over Clever
Much like consistency is easy for users, you want to make sure the copy is clear. While it’s certainly tempting to use the clever pun, cutesy copy, or fun spelling you thought of, it’s best to be straightforward.
Call to action copy should be easy to read and understand – save the creative stuff for elsewhere on your site or in other channels.
Beth Macri Mathematics uses GO TO NECKLACE BUILDER and VIEW THIS PRODUCT for their call to action buttons. This is direct, and users know exactly what will happen should they choose to click.
12. Mind Your Placement
One place you need to have a call to action? Above the fold.
Above the fold is industry lingo for what you see before you scroll down on a page. This gives users a place to click without having to scroll down on your site.
You also want to keep hierarchy in mind. You likely have a primary call to action – the one thing you really want users to do on your site. But if a user isn’t warm enough to convert yet, you’ll want to direct them somewhere else. This gives you a chance to nurture them and convince them to buy when they’re ready.
Evelyn & Bobbie’s main calls to action are dark blue boxes, but their secondary ones are further down the page with a more subtle white design.
Here’s another call to action example from The Giving Manger. They use text for the least-desired action (More payment options), while the two more desired actions – ADD TO CART and Buy with PayPal – have a more eye-catching visual treatment.
13. Inspire Action
Calls to action are meant to make a person do something that you want them to do. There are two main ways you can do this: through the copy and through the design.
How do you write a call to action?
When it comes to copy, create urgency and focus on action-oriented language. In one analysis of call to action phrases and examples, 94 percent of website used action-oriented verbs like “learn,” “start,” “read,” and “request.”
How do you design a call to action?
Color psychology states that red creates excitement, yellow inspires confidence, and orange gives a sense of security. Use this as a guide, depending on how you want customers to feel when purchasing your product (or recognizing the need to purchase your product) – and your brand aesthetic.
United By Blue is action-oriented, with call to action buttons that say FIND OUT HOW and SHOP NOW. The word “now” has urgency, making it more powerful than a simple SHOP.
14. Brevity is Your Friend
When a user sees your call to action, you want them to instantly recognize what clicking will do. Long, wordy calls to action can easily be skimmed over for being too long, and the user might even mistake it for a banner or headline instead of a clickable call to action.
In fact, the longest call to action in this analysis was just nine words. Death Wish Coffee, for example, simply says SELECT GRIND instead of something longer like CHOOSE WHICH COFFEE BEAN GRIND YOU WANT TO TRY.
And for their email sign-up CTA, a basic SUBSCRIBE instead of GET ALL OF OUR NEWSLETTER UPDATES:
If your call to action is too long, write it down. This could work great for supporting copy above, below, or next to your call to action. Highlight the verb closest to the action you want the user to take. Keep that as your call to action.
15. Test, Analyze, and Optimize Your CTAs
Ultimately, as many best practices as you want to read up on about calls to action and how to optimize your ecommerce site, there is no one-size-fits-all answer. Every website is different – selling different products to different audiences at different price points.
The only thing that’s universally true is that the only way to find out what works best on your website is to look at your own metrics. Start by establishing benchmarks. Once you have those, look at the analytics periodically and compare them against different time period.
Run A/B tests, watch recorded user session replays, analyze heatmaps, and analyze clickthrough rates and other related KPIs to see what resonates with your audience. Iterate – and test again.
What Makes a Good Call to Action?
We’ve got 15 CTA rules to keep in mind as you build your store. Let’s recap what we know:
Not all CTAs are about sales (not now, anyway)
CTAs can serve lots of purposes, from increasing social engagement to encouraging newsletter signups.
CTAs can appear just about anywhere
Calls to action are worthless if no one can see them. Pin them to your top navigation or have them appear when visitors scroll.
Supporting text can really give life to calls to action
A call to action might just be two words – Shop now – but those two words can be more effective with text that supports the CTA.
CTAs don’t have to be boring buttons
Bored with buttons? There is no rule against making an entire section of your website a clickable call to action.
Stand-out CTAs can guide visitors where you want them
If you have certain products or offers that you want your visitors to see, use colorful, attention-grabbing calls to action to get them there.
Being tricky with calls to action is lame
While you can use call to actions to deliver value to your customers some use call to actions to trick them. Which isn’t cool.
Sometimes asking once won’t work
Don’t be shy with your CTAs. People scroll, they get distracted, they might not be paying attention 100 percent of the time. Design your call to actions to help people. Then, nobody will mind seeing them more than once.
Be careful with calls to action that require an app
Incorporating social media and email into your CTAs can really help boost engagement. Just be careful when you take that next step and put CTAs featuring apps like WhatsApp and Slack on your site. The tech isn’t always flawless.
Use CTAs as navigation tools
You can use CTAs to funnel your traffic where they want to go.
Consistency is key.
Over time, you can train returning users on which CTAs to click to more quickly and easily navigate your site.
Focus on being clear over being clever.
It’s tempting to flex your creative muscles, but it’s best to keep CTAs to-the-point.
Mind the placement of your calls to action.
Do you have a CTA above the fold? Are your CTAs overtaking each other? Knowing where to put CTAs avoids confusing your users.
Inspire action.
You want users to do something, so use language that’s focused on that action. Always include a verb.
Keep CTAs short.
Nine words or less is the general rule of thumb.
Test, analyze, and optimize your CTAs.
You never know what’s best for your site until you try it. Don’t be afraid to experiment and constantly improve for more conversions.
