Total Followers 132,503
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.
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.
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.
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.
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.
An effective button should be clearly visible on a page, and at least relatively prominent in relation to other elements.
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.
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:
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.
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!”).
5 Tips for Creating An Effective Call To Action Button
Get The Only Freelancer crash course you will ever need to read!
Monday, March 19th, 2012 21:41
It is always good to hear this advice – even if it was previously posted elsewhere. Nice article – always useful and appreciated!
Monday, July 25th, 2011 13:40
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.
Friday, July 22nd, 2011 13:53
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?
Tuesday, July 19th, 2011 09:44
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.
Tuesday, July 19th, 2011 04:24
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!
Monday, July 18th, 2011 17:27
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 ?
Monday, July 18th, 2011 16:17
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.
Monday, July 18th, 2011 12:46
I agree “call to action” buttons are important.All the factors mentioned in the writeup are very much to the point.
Thanks for sharing:)
Get The Only Freelancer crash course you will ever need!
If not, then it's time to learn how to:
You can trust 1stWebDesigner to help you become a better web designer!
- Jacob Cass | Just Creative
Just enter your name and email below and click Get Updates!
Nikhil Malhotra
Monday, July 18th, 2011 12:46
I agree “call to action” buttons are important.All the factors mentioned in the writeup are very much to the point.
Thanks for sharing:)
Renato Alves
Tuesday, July 19th, 2011 04:24
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!
shinee
Monday, July 18th, 2011 17:27
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 ?
Flavio Mester
Monday, July 18th, 2011 20:40
Very useful, thanks.
Maicon Sobczak
Monday, July 18th, 2011 16:17
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.
Gavin
Tuesday, July 19th, 2011 09:44
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.
Shanna
Tuesday, July 19th, 2011 23:24
See? Big shiny buttons always win.
Ellery
Monday, March 19th, 2012 21:41
It is always good to hear this advice – even if it was previously posted elsewhere. Nice article – always useful and appreciated!
Prakash Thombre
Monday, July 25th, 2011 13:40
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.
rcrg
Sunday, July 24th, 2011 02:50
love the samples you listed. great ideas! thanks for sharing
Bud Kraus
Friday, July 22nd, 2011 13:53
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?