How To Design Compelling Call to Action Buttons

by 8 10/19/2011

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:

Citi Bank Online Marketing

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.

Like this:

Max CDN

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.

Pixel Union
Get the Most Attention Above the Fold

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:

GoWalla
Putting the “Action” in Call to Action

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!”

Tumblr

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.

PCH

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.

Campaign Monitor

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:

Business Catalyst

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:

Hosting

Summary Checklist

To keep all these best practices top-of-mind, here’s a quick checklist that summarizes the do’s and don’ts:

DO:

  • 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.

DON’T:

  • 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

About 

Sherice Jacob helps website owners improve conversion rates with custom design, copywriting and website reviews.  Get your free conversion checklist and web copy tune-up by visiting iElectrify.com.

Get our Daily Newsletter

Get conversion optimization, design and copywriting articles delivered to your inbox FREE

8 COMMENTS

Stephen Turner

Some nice tips and screenshots here. I would add one more thing: A/B testing. It’s easy to make two versions of your design, show each one to half your customers, and actually measure which has better conversions. You might be surprised at the results!

October 21, 2011 Reply

XuDing

I really like how CampaignMonitor position their Call To Action buttons.

October 24, 2011 Reply

SocialAmigo

Very nice post – like very much like the visual reminders of what’s good and what’s not. citi (and the rest of those horrible banking sites) should know better. As a follow-up to this post, I found this article recently about tablet-friendly websites. the section tat applies here is the touch-interaction vs. mouse interaction section. We need to keep this in mind too going forward.

http://www.cikmarketing.ca/all_blog_posts/website-design/how-to-make-your-website-tablet-friendly/

socialamigo

October 24, 2011 Reply

Tony

An excellent post, its amazing how simple it can be when you know how. Some excellent tips that I will definitely use

Thanks a lot

March 15, 2012 Reply


Leave comment

Some HTML allowed

Get conversion optimization & A/B testing articles FREE >>>