5 Tips For Creating An Effective Call To Action Button

ComeInWereOpen Most people who own or run a web site want their users to do something when they come to the site and see the content. You might want the user to:

  • Buy something from your site
  • Contact you for a quote
  • Sign up for a newsletter
  • Download your free eBook

But how do you get them to do that? Do you just hope for the best? Have a tiny link that won’t interrupt their enjoyment of your beautiful design and great content? Have a massive button that they can’t miss?

Call to action buttons are the best way to grab attention, but you need to make it clear exactly what it is you want the user to do. Here are five tips to keep in mind when designing a call to action button or advert.

1. Language

Keep the message short and use language the visitor will understand. Don’t talk about procurement when people want to buy. Start a call to action with a verb such as “Sign Up Now,” “Download,” “Buy Now,” “Get A Quote.” The home page on Twitter (below) has a fairly large green button calling users to “Sign Up Now.”

While it’s important to keep the text on the button short and snappy, it’s helpful to also explain the value behind the action the user is taking. On the Twitter page, it’s a simple line inviting you to join the conversation.

twitter

2. Color

Bright and colorful buttons grab attention. It’s also important that there is good contrast between the button color and the web page or Div background. Amazon’s main content has a white background but in the sections containing the orange Add To Cart buttons, the background is light blue, a complementary and contrasting color with orange.

AmazonCart

3. Size

Yes, the old joke about size matters. But size does matter when you’re trying to get noticed and in general, it’s fair to say that big is beautiful when it comes to designing call to action buttons.  The size of any element on the page dictates the priority or how important that element is on the page. If you really want someone to do something, forget about being subtle.

Are you thinking about buying the CSS Anthology book from Sitepoint? On that book’s page you might notice a big beautiful button offering you a free download of sample chapters.

SitepointBigButton

4. Imagery

The use of icons on buttons can add extra emphasis and draw the eye to the button. The download buttons for Firefox and Thunderbird are absolutely jumbo sized. And very pretty too, with beautifully designed icons integrated into the buttons.

Thunderbird

Firefox

5. Positioning

It’s important to be consistent with where you place your call to action button. You don’t want users to have to expend any effort whatsoever in finding the call to action.

On the Squarespace homepage you’ll see a large call to action at the top of page. You’ll also find a similar, slightly smaller button in the footer of EVERY page.

squarespace-top

SquareSpaceBottom

Taking eBay as another example, the call to action button is not particularly big or colorful, but it is consistently positioned at the top of every product page. Whether it’s a Place Bid or Buy Now button, the ebay user is left in no doubt about where to click to get their goods.

ebay

These tips can help you make decisions about your call to action button, but ultimately the best way to find out if it’s working for you is to test it. So put your big, bright, beautiful button on to the page and see what kind of response you get.

What additional tips would you add to this list?

Win an Annual Membership to Learnable,

SitePoint's Learning Platform

  • Indicium

    Some great advice here.

    However, also remember that between 40% to 80% of your site visitors (depending on the kind of site you have) will only want information about something, and will not want to interact with you, at least for now.

    It is important to ensure that the user experience as a whole is good, not just that the user can see quickly how to buy, register, or download. Additionally, the better and more informational a web page is, the more trust a user will place in you, and the more likely they are to interact with you either now, or to return to you in the future to interact.

    Of course, this doesn’t negate anything said above about the importance of clear and well-established calls to action, though.

    Indicium SEO and Web Development

  • Wytze

    Great examples. I’ve heard recent evidence from a Dutch website called Yunoo.nl (similar to Mint.com) that the exact size, shape, and text of a call-to-action button can make a huge difference in how many people actually click it and follow through. In their case the button is ‘Sign up’, so that’s a big deal.

    Google Webmaster Tools and others allow you to present different designs of a single page with for example a subtly different button, then measure the response rates for these different varieties. Great way to test some of your suggestions.

  • http://www.baymard.com jamieappleseed

    Make it easy for people to order when they order.

    That’s why Squarespace’s idea of putting a clear button in the footer of every page is a good idea. People will notice it and know it’s there so when they’re ready to order it’s a straight-forward process for them.

    The concept of secondary buttons also play into this. If you have two actions user’s could/should take, and one of them is more likely than the other, the visual dominance of those buttons should reflect this. Let’s take “Sign up” and “Login” as an example, two options many sites offer. Then you’ll definitely want “Sign up” to be the big fat Call to Action button, and then possibly place a button or link (way smaller in size) in near proximity that allows the user to “Login”.

    The same goes for “Save changes” button and “Cancel [changes]” link in web applications, you’d want to give “Save changes” more visual importance since this is the action that the user is most likely to make.

  • NetHaggler

    Excellent Tips.

    Thanks for sharing them here.

  • Keeton

    Great article! I stopped everything I was doing to make a call to action button for http://linktrack.info/.

  • cdrees

    Thanks for the info. If possible, it would be nice to see a follow up that drills down into the effect of color, size, etc., on conversions with some actual tests..

    I’d also like to get some feedback on the call to action button I recently updated for my site..

    http://www.palaestratraining.com/training/IT-Certification_Cisco-Certification-Training/24/Cisco-CCNA-and-Security-Combo.htm

    Thanks very much!