Call to Action Buttons: A Survey of Best Practices

Posted in Tips, Web Design3 years ago • Written by 11 Comments

Call-to-Action buttons play a pivotal role in soliciting action from the user. To garner the requested action, buttons are placed on the website that allow the user to perform an action, such as buying something, or leading to another page for more information. Careful planning is necessary in the creation of your call to action, and in this article I will explain the best practices for creating effective call to action buttons. I will also present you with examples in action to give you a better understanding of what works.

In order for your Call-to-Actions to work successfully, you must first determine how they’ll fit into the overall scheme of your site. By laying the groundwork, or information architecture, you’ll begin to discover how the buttons work within the web interface. To survive in the market, you have to generate revenue. So, the successful website is that which leads the reader of web page to the desired end result (“Buy Now”…”Learn More”). Now the question arises, how can we make effective call to action buttons which work in the real world.

Factors to Consider

Size

In web design, historically the larger the element, the more important it is. The size of your call-to-action in relation to its surrounding elements is essential in converting users to take action. After all, it’ll be hard to get the intended action from your user if your button is miniscule in size and blends in with the rest of the text.

  • Use white space: A lot of what can be achieved from increasing the size of a button can also be accomplished by simply placing the button around plenty of white space. A button surrounded by white space will be much more prominent than one which is lost in a sea of text and graphics.
  • The more white space there is in between a call to action button and a surrounding element, the less connected they are. Therefore, if you have other elements that can help convince users to take action, reduce the white space in between those elements and the call to action.

ScrapBlog
You can see the effects of using a prominent color, sufficient white space, and size relative to surrounding elements to attract users’ attention. Straightforward language conveys a sense of easiness, claiming that you can “start” right away by taking action.

 

Mozilla Firefox
“Free Download” button of the Mozilla Firefox is a true revolution in terms of call-to-action graphics. Its large, unevenly shaped, vibrantly colored and detail oriented button has made its mark in the industry.

Color

To ensure the user notices your button, it’s also important to consider its color. Although there are a few choice colors for a call-to-action button, it can be worthwhile to choose a contrasting color than the background. This essentially makes the button jump toward you, enticing you to click it.

  • It has sometimes been said that a red button (and red text links) performs the best
  • Perform some A/B testing to see what colors performs best for your website
  • The performance of any button may be attributed to the contrast on the page instead of its color

 

Vuze.com visitors will have no problem finding the download call to action button. The use of contrasting color, plenty of white space, and placement on both the top and bottom of the page make this call to action noticeable and effective.

Placement

An effective button should be clearly visible on a page, and at least relatively prominent in relation to other elements.

  • On a landing page – and indeed for most pages, where this is feasible – a button should appear above the fold. The likelihood that a button will be clicked is greatly diminished if a visitor has to scroll to see it.
  • Increase the likelihood of a button being clicked by placing both at the top of the page (or above the fold) and at the bottom of a longer page. It’s likely a user may not scroll back up the page if they’ve passed it, or scroll down a page if they already see one.
  • Proximity to other page elements is important as well. Obviously for an e-commerce site an “add to cart” button that’s right next to a product should perform better than one that’s further removed.
  • In other situations, it is important to keep a call-to-action button close to such things as value propositions, testimonials and feature lists that are intended to stimulate conversions.

You can see these concepts in practice on the website for YourWebJob.com. By putting the call to action “Post a Job!” in a very prominent area, it is more likely that the user will notice it or remember it later, after they have looked at the site’s content.

Mobile Web Design
This call to action button is placed in a prominent location; it has large size and a distinctive color with respect to surrounding elements.

Mobile Cubix
Mobile cubix uses a round outline surrounding the “Read More” button and then leading it to the application that not only attracts visitors’ attention but also informs them what they can expect.

Making Its Use Known

Of course none of these procedures matter if the button doesn’t actually look like a button! You need to make it clear to the visitors that this graphic is in fact a button that can be clicked on to result in a specific action and not simply another element on the page. Graphically speaking there are a number of ways to do this, including:

  • Embossing the button
  • Placing the call-to-action text in a discreet bordered area
  • Offsetting the button from other graphical elements
  • Making it behave like a button when the user’s mouse hovers over it
  • For buttons that are not hyperlinked (and so do not automatically generate a hand symbol in the mouse over state) this can readily be accomplished with CSS.
  • A change in the button’s appearance itself on mouse over, such as a change in color, is a further signal to the visitor that the button is clickable.

Kalculator
This call to action tells users exactly what to expect: by clicking on this call to action, they should anticipate shelling out $3.99. Using the word “only” hints that this is quite a good deal, which can help make the sale.

 

Postbox adds value through the download call to action by adding that its “FREE” 30-day trial and reduces consumer doubt with the purchase call to action by stating it’s a “No Risk Guarantee!” More often than not web sites calls to action simply ask the visitor to Buy Now! without reinforcing the value or ease of the action.

SEO

A button, in many cases, is directly linked to a page indexed by search engines. Adding an <img> alt attribute will provide the search engines with text they will associate with the target page:  if you are targeting keywords on that target place, you should employ them in your <img> alt.

To get the most out of your button, your image’s alt attribute (or, depending on the browser, an <a> title attribute) may be displayed to a visitor when they mouse over the button, providing yet another opportunity to reinforce or your call-to-action (“start your trial today!”).

Additional Resources

5 Tips for Creating An Effective Call To Action Button

How to Create a Slick and Clean Button in Photoshop

10 Techniques For An Effective ‘Call to Action’

14 Written Articles

11 Comments Best Comments First
  • Nikhil Malhotra

    Monday, July 18th, 2011 12:46

    1

    I agree “call to action” buttons are important.All the factors mentioned in the writeup are very much to the point.
    Thanks for sharing:)

    0
  • Renato Alves

    Tuesday, July 19th, 2011 04:24

    5

    Recently I’ve been redesigning my own blog and these tips will be of great valuable when creating the call to action buttons.

    Thank you so much!

    0
  • shinee

    Monday, July 18th, 2011 17:27

    4

    Call to action is essential in webdesign, and specially in ecommerce. It’s very interesting to compare the “add to basket” buttons on many websites, they are often different of what we espect. Wich one transform’s the best ?

    0
  • Flavio Mester

    Monday, July 18th, 2011 20:40

    3

    Very useful, thanks.

    0
  • Maicon Sobczak

    Monday, July 18th, 2011 16:17

    2

    The call to action buttons are becoming progressively part of the web pages design. To learn from the past usages turn the purpose more accurate and efficient. Well done list.

    0
  • Gavin

    Tuesday, July 19th, 2011 09:44

    6

    Nice post guys but Smashing Magazine covered this back in 2009 and you’re using the same examples they did 2 years ago…
    http://www.smashingmagazine.com/2009/10/13/call-to-action-buttons-examples-and-best-practices/

    Sorry to pee on the bonfire, but originality wins the day.

    0
  • Shanna

    Tuesday, July 19th, 2011 23:24

    7

    See? Big shiny buttons always win.

    0
  • Ellery

    Monday, March 19th, 2012 21:41

    11

    It is always good to hear this advice – even if it was previously posted elsewhere. Nice article – always useful and appreciated!

    0
  • Prakash Thombre

    Monday, July 25th, 2011 13:40

    10

    Great Article!!! Thanks
    I feel the call to action button should always follow
    after “Attention, Interest, Desire”
    What I mean is it should be enforced to an extent
    that it should hold the attention of the visitor
    as soon as he lands on the page.

    0
  • rcrg

    Sunday, July 24th, 2011 02:50

    9

    love the samples you listed. great ideas! thanks for sharing

    0
  • Bud Kraus

    Friday, July 22nd, 2011 13:53

    8

    Another great article! (I keep finding you with Google Alerts). I’m going to pay closer attention to call to action buttons now. That’s something I fall down on.

    When you say “above the fold” how do you calculate that given the unknown of a user’s screen resolution?

    0
  • Ellery

    Monday, March 19th, 2012 21:41

    11

    It is always good to hear this advice – even if it was previously posted elsewhere. Nice article – always useful and appreciated!

    0
  • Prakash Thombre

    Monday, July 25th, 2011 13:40

    10

    Great Article!!! Thanks
    I feel the call to action button should always follow
    after “Attention, Interest, Desire”
    What I mean is it should be enforced to an extent
    that it should hold the attention of the visitor
    as soon as he lands on the page.

    0
  • rcrg

    Sunday, July 24th, 2011 02:50

    9

    love the samples you listed. great ideas! thanks for sharing

    0
  • Bud Kraus

    Friday, July 22nd, 2011 13:53

    8

    Another great article! (I keep finding you with Google Alerts). I’m going to pay closer attention to call to action buttons now. That’s something I fall down on.

    When you say “above the fold” how do you calculate that given the unknown of a user’s screen resolution?

    0
  • Shanna

    Tuesday, July 19th, 2011 23:24

    7

    See? Big shiny buttons always win.

    0
  • Gavin

    Tuesday, July 19th, 2011 09:44

    6

    Nice post guys but Smashing Magazine covered this back in 2009 and you’re using the same examples they did 2 years ago…
    http://www.smashingmagazine.com/2009/10/13/call-to-action-buttons-examples-and-best-practices/

    Sorry to pee on the bonfire, but originality wins the day.

    0
  • Renato Alves

    Tuesday, July 19th, 2011 04:24

    5

    Recently I’ve been redesigning my own blog and these tips will be of great valuable when creating the call to action buttons.

    Thank you so much!

    0
  • shinee

    Monday, July 18th, 2011 17:27

    4

    Call to action is essential in webdesign, and specially in ecommerce. It’s very interesting to compare the “add to basket” buttons on many websites, they are often different of what we espect. Wich one transform’s the best ?

    0
  • Flavio Mester

    Monday, July 18th, 2011 20:40

    3

    Very useful, thanks.

    0
  • Maicon Sobczak

    Monday, July 18th, 2011 16:17

    2

    The call to action buttons are becoming progressively part of the web pages design. To learn from the past usages turn the purpose more accurate and efficient. Well done list.

    0
  • Nikhil Malhotra

    Monday, July 18th, 2011 12:46

    1

    I agree “call to action” buttons are important.All the factors mentioned in the writeup are very much to the point.
    Thanks for sharing:)

    0

Comments are closed.

54.196.194.204 - unknown - unknown - US