How To Design Compelling Call to Action Buttons
Why does a particular call to action fly, while another crashes and burns?
What are the design considerations behind creating compelling call to action buttons?
This article will shed some light on the subject, and guide you in creating a high-flying call to action button.
Position is Paramount
The positioning of your call-to-action button is crucial to ensuring it gets the attention you’re aiming for. Putting ample amounts of white space (in the form of margins and padding) around the button will help offset it from the rest of your content. Too often, a call-to-action button is more like an afterthought thrown in at the last minute by the designer, and the result is that it (predictably) gets lost in all the clutter. Even big corporate sites with bottomless pockets aren’t immune.
How many calls to action do you see in the image below:
When it comes to getting your call-to-action button recognized, make sure it’s large enough (compared to the other elements on the page) and colorful enough, the call to action should not blend in with the design.
Along those same lines, if you’re going to have a call-to-action button on your page, make it clickable. Our eyes instinctively go to the middle of the page when we first view a website. The design below was created by a company that specializes in user interfaces! Logic tells us that the large button in the middle hogging all the space is clickable – but it’s only for illustrative purposes.
If they were to use heatmap tracking, the results would likely show an inordinate amount of clicks on that huge button, that is not clickable.
Putting the button “above the fold” (in the first third of your site’s overall screen space) also helps ensure it’s the dominant force on the page. GoWalla does a great job of including their call-to-action button not just in the top half of the page, but also after explaining exactly what the service is and does – making you want to sign up and experience everything they have to offer:
The best call-to-action buttons use action-oriented words like “Get”, “Download” “Add to Cart” rather than simply “Learn More” or “Continue Reading”. The latter two calls-to-action are passive, which subconsciously tells us they’re not worth acting on…at least not right now. Unless the teaser copy before the call-to-action button is so titillating that we’re chomping at the bit to keep reading, it’s likely we’ll look around a little more before making that click.
Tumblr is the perfect example of getting people to take action. It structures its sign up form more like a checklist, and lets you immediately start posting. Email? Check. Password? Check. URL? Check. That’s all there is to it. And they put the exclamation point on the end with a powerful call-to-action, “Start posting!”
Publishers Clearing House makes excellent use of urgency in their call to action. The urgency in a call-to-action answers the question, “Why should I do this now?” Background use of arrows here also helps direct the eye to the button.
Having Multiple Call-To-Action Buttons
Sometimes, you just need two call-to-action buttons on a page. It’s understandable, especially if you want to funnel customers into different groups. Take CampaignMonitor for example. They showcase two call-to-action buttons of different colors, making “View Features” stand out a bit more than “Try it for Free”. Both are the same size, and spaced equally, letting customers decide which path they want to take right from the start.
If you have two alternatives and want to make one much more visible than the other? Simple – make that button stand out much more than its partner. Here’s how Adobe BusinessCatalyst (formerly known as GoodBarry.com) did it:
Having the Chat with us button grayed out almost makes it appear as if that option isn’t available. In that case, most people would go ahead and give it a try – by clicking the much more noticeable red “Try for Free” button. I wonder how many hours (and how much money!) Adobe live chat agents have saved by making that choice practically invisible?
Hosting companies or service companies with several packages take this idea one step further, by putting the best option at the forefront of their call-to-action section:
To keep all these best practices top-of-mind, here’s a quick checklist that summarizes the do’s and don’ts:
- Use ample whitespace, margins and padding around your call-to-action button to offset it from your content.
- Use an alternate color not ordinarily found on buttons elsewhere on your site.
- Make sure your call-to-action appears in the first third or first half of the user’s screen space (“above the fold”)
- Convey a sense of urgency along with the button, such as “Offer Ends October 15th” or “Available for the Next 30 Subscribers Only”. Make sure your button lives up to that claim by removing it when you’ve met that limit.
- Transform bland calls-to-action such as “Call Now” to actions where the user is in control, such as “Request a Callback”.
- When giving the user several choices, make each button an alternative color, or stack them so that the most important choice is at the top, followed by the next.
- With two choices of equal value (i.e. “Take a Tour” or “View Pricing”) you can place buttons side by side with some added space for breathing room.
- To highlight your best deal or package, use a panel-style summary with the premium package in front of the others.
- Ease the user into the process by having them perform a few simple actions in order to get started (such as Tumblr does).
- Show a mouseover or hover state when the user moves their mouse over a button. This further implies that it’s clickable and not just a standard graphic.
- Include a prominent call-to-action button that isn’t clickable.
- Have several calls-to-action on one page without any real direction to draw the eye in.
- Let your call-to-action get lost in your content by making it the same size or color relative to all the other page elements.
- Use a call-to-action button solely on your homepage. Give users several ways to take action –even if they’re on your About Us page, they should easily be able to start from there.
- Avoid using bland and overdone text on your button (like “Submit Form”) unless you can follow it up with text that explains what happens AFTER they click. Here’s a link to some excellent studies that can help you improve your call to action.
Have you discovered a particularly compelling call-to-action button in your tests? Have you found a call-to-action button that left you scratching your head and wondering “WHAT were they thinking?!” Post your thoughts below in the comments!
Image courtesy of battlecreekcvb