Good Call-To-Action Buttons


What can you do to make your calls-to-action more effective?

The call-to-action button is an important tool in the user experience designer’s box of tricks. In this article I’ll give you a few pointers on providing effective ones.

Prioritizing tasks

Some tasks on your website are more important than others. A good designer will try to understand the objectives of the website and understand which tasks are really important. The routes to completing these tasks should be given priority by the designer. Dr David Travis calls such tasks red-routes and Gerry McGovern refers to the long neck. I prefer the red-route analogy but the long neck might work a bit better internationally.

Essentially, both analogies make the point that the majority of your site’s value is provided by a small number of tasks.

With these priority tasks, you need to remove any friction that slows the user’s progress. Call-to-action buttons can be a good way of doing this. They look great, but the reason you’re using them is to grab the user’s attention.

Choosing your words carefully

Buttons are for actions, like ‘Get a quote’, ‘Download’, ‘Open an account’, ‘Go to checkout’. The text on the button should begin with a verb. Otherwise it’s not a call-to-action, it’s just a button with some text on it. ‘More information’ for example, is not a call-to-action.

Think about what your user would say if you asked him what he was trying to do. If he would say, ”I want to compare the price” then ‘Compare the price’ is what you write on the button. These are what Jared Spool calls ‘trigger words’.

Using the right words reduces the friction of your key tasks. The most common wording problems are caused when organizations use different words than their customers. Here are some examples:

Organization says User says
Price estimate Quote
Procurement Buying
Fees Costs
Apply for an account Open an account

Cultural subtleties can be the cause of task friction as well. Look at the difference between these two buttons.


Amazon.com and Amazon.co.uk comparison.

British people use trolleys (carts) or baskets when in real stores, so in the UK, Amazon calls the ‘Shopping Cart’ the ‘Shopping Basket’. In a usability test, it’s unlikely that a UK participant would be unable to find the ‘Shopping cart’ button. But ‘Shopping Basket’ reduces the friction in the task.

Positioning

The effectiveness of your call-to-action button will be affected by your choice of position for it. The example below from Virgin Money has an effective call-to-action. Emphasis is gained by removing clutter from the page and placing the button in the content area.

On lower level pages the button appears on the right-hand-side which is not ideal, but the lack of clutter makes it still clear (below).

If we put ourselves in our user’s shoes, it’s possible to see a point of friction on this page. If I’m considering this credit card and I’m on the costs page, I’m probably going to look at all of the costs. To do this I need to scroll down. Look what happens when I do this (below). The button is gone. Virgin Money is missing a trick here by not repeating the button at the bottom of the page.

If I want to, I will find the ‘Apply online’ button. But its disappearance causes friction and when you’re dealing in large numbers of potential customers, that friction means lost sales.

Use of color

Color is very important when trying to create emphasis. I wrote a post on my blog that recommended you let your hyperlinks shine. Well, your call-to-action buttons should shine even brighter. After all, if you’re using them correctly, these buttons will take people to the most important stuff.

The color you choose for your button can affect its usefulness. The example below is my profile page on LinkedIn.com (I know, a face only a mother could love).


My profile page from LinkedIn.com

The ‘View Full Profile’ button is the one button that LinkedIn want you to click above everything else. When you do so, you’ll be prompted to create an account and this is what they want you to do.

The button on LinkedIn page has a unique color that isn’t shared with any other part of the design. On a page with lots of information, this button still stands out.


Swinton Car Insurance

It’s not always necessary to reserve a color solely for your call-to-action button. But it’s best not to over-use your button color elsewhere in the design. The page on the right is from Swinton Insurance.

Lots of blue on the page makes the ‘Quote’ button difficult to see. I actually scrolled right past it the first time I looked at this page. If they’d made it orange, it would be a lot better.

Size

Size matters when you’re trying to reduce the friction in your key task. Fitts’ Law tells us that the time taken to point at an object is directly influenced by the size of that object. So big is beautiful when creating a call-to-action button.


Firefox Page on Mozilla.com

The size of button you choose can be dictated by the button’s importance over everything else on the page. Take the Firefox page for example, Mozilla don’t mess around with subtlety here.

Sub-consciously, a good design communicates priority to us. With one massive button on the page, that priority is obvious. But size can be used a little more subtlely when our page has 2 call-to-action buttons on it.

In order to illustrate my point, I’ve been messing about with the Twitter homepage (below). I have removed a call-to-action for ‘Watch a video’ and made the ‘Get Started Now’ button a bit smaller than it actually is.


No video Button

With only one call-to-action button, ‘Get Started Now’ Works well. The contrasting green makes it stand out from the page. However, there is a video you can watch if you want to see Twitter in action. I’ve added the button back in on the example below . It’s more difficult to get a sense of the page’s priorities. The two buttons are competing.


With the Video Button

The video button enjoys the best contrast but the’Get Started Now’ button enjoys better positioning. Something else is required to tip the balance in favor of the ‘Get Started Now’ button.

On the actual homepage, Twitter uses size to do this…


The actual Twitter homepage

The ‘Get started Now’ button now has priority. The design tells us that it’s the most important bit. If we’re not ready to get started, then ‘Watch a video’ is the next thing we are told to look at.

There is an added benefit of using size here. Some of us can’t tell red from green. It is the most common type of color-blindness. So some people will see both of these buttons as being a similar color.

Avoid overkill-to-action

Providing good contrast requires restraint on the part of the designer. Every call-to-action button you add to a page reduces the impact of the ones that already exist. Try to avoid smothering your page in call-to-action buttons and you will preserve the emphasis of your important tasks.

The example on the right comes from TD Waterhouse’s UK site. Notice how the ultra-important ‘Open an account’ button is smothered by login buttons. When your user is already an account holder they aren’t going to leave your website because they can’t instantly find the login. If they get distracted, they will still be a customer.

However the potential customer who gets distracted may never return.

What difference does it make?

A company called Maxymiser released a case study last year from one of their UK clients to demonstrate the value of their multivariate testing service. The results were very interesting and showed how seemingly subtle changes can make a big difference.

This is their new shopping basket page (see image on right).

Laura Ashley arrived at this design following mulivariate testing of 5 different options on their live website, including their original one. This page enjoyed 11% more clickthroughs to the checkout page than the company’s original basket page.

One of the other options tested was practically identical to this one. The only real differences being:

  • The "update shopping bag" link was a grey button, placed in-between the 2 buttons shown here.
  • The "Go to checkout" button was dark gray instead of green

It too was more successful than the original page but enjoyed only 3% more clickthroughs. These 2 apparently minor differences, equated to a significant difference (7% uplift) in the number of people proceeding to checkout.

About the Author

David Hamill is a freelance usability consultant based in Edinburgh, UK. He helps organizations, both big and small, to improve their websites. David blogs about Good Usability and is on Twitter as @dav_hamill.

Write for UX Booth

Contribute to UX Booth
Contribute

Contribute a guest post to UX Booth and let the community know what's important to you!



Comments

  1. Excellent read, you really have made some real strong points, and the examples are perfect. I’d say this is a great reference for someone who’s in a little doubt as to the importance of a call to action button. Great article!

  2. Some useful common sense info, thanks

  3. This is an absolutely fantastic article about call-to-action buttons. Extremely in-depth and covers pretty much everything that needs to be covered.

    Nice one!

  4. I wish more independent ecommerce sites would utilize the message put forth by this article

  5. This is a great article and very informative. I didn’t even think about color-blindness as being a barrier when creating a good call-to-action. Thanks for the insight!

  6. Good advice. I particularly appreciated the recommendation on beginning the call-to-action buttons with a verb. I had not considered that until now!

  7. B. Moore March 20, 2009

    So on a ecommerce site would you go with the “checkout now” button and the “Continue Shopping” button be the same color and size if they are right next to each other. The reason I ask is the company I work for is doing a redesign of their site and they want to make both those buttons the same pretty much the same color green maybe one will be a lighter shade but that’s it. Oh and on top of that the “add to cart” button is the same color as well……

    I am really looking for more info to show them why this is a horrible mistake in my opinion.

  8. Thanks, great read! Its amazing how small changes can have a massive conversion effect on your site.

    Sean
    http://twitter.com/SeanNieuwoudt

  9. Thank you a lot for this really helpful advice!

  10. Good post ;) Thx

  11. Hi David,

    Nice article. I’m not sure if the button on mozilla.com could be considered as an example of good design. Sometimes, when the button is too big, it gets confused with just another ultra-decorated text container. That was the case when I visited mozilla.com to download the new Firefox, I thought the button was just text decorated with a huge Firefox logo. At least for Thunderbird, the other product offered at this website, “Free Download” gets underlined when the user hovers over it.

    Alex

  12. Thanks for all the comments folks. I’m, glad you found the article interesting.

    @Alexis I see your point here. I don’t think the issue you described is attributed to its size though. More that it didn’t look enough like a button (or something else clickable) for you.

  13. @B. Moore: It’s hard to say without seeing it. I’d certainly prioritise the action that is the most important to the company. So don’t make ‘continue shopping’ compete with ‘Checkout now’.

    There are different ways that you can do this. I don’t want to design the page for you, I can only offer my advice. I think that any company that depends on e-commerce transactions should do both usability and a/b (or even multivariate) testing.

    Usability testing tells you what’s actually happening and why, whereas a/b testing just tells you which approach is most successful.

  14. Hey David,

    Thanks for a great article!
    I’ve been thinking of ways to improve the call-to-action on my job board http://www.pixyjobs.com and this article just might have given me an idea that could work!

    Thanks again!

  15. @Alexis- Agreed. If I wasn’t already familiar with mozilla’s website I wouldn’t know that was the actual download button for FF. It’s just too big. You know you’re on the right site but you immediately start looking for a smaller download button.

    Good article. I have the hardest time getting clients to understand that if you make everything big and bolg then nothing stands out! I’m glad someone else feels my pain.

  16. An excellent, in depth read! Love the tip about the dedicated call-out color. I’ll be sure to add that to my site palettes in the future. I was always having trouble figuring out why I couldn’t get my calls-to-action to really pop without clashing with the site or being discordant. Now I get it! Thanks!

  17. We’ll have to agree to disagree about the Firefox button Jonathan. I’m glad you found the rest useful.

  18. Nice article, but let me make a point.

    Most of these sites make action buttons look like regular buttons. But in fact, action buttons are not “buttons”. A button makes an action (submits content, searches, applies changes, etc). A link takes you to another page.

    While I think that action buttons are extremely important, specially in large sites, they should be visually distinct from normal buttons, for the sake of consistency.

    As Bruce Tognazinni said on First Principles on Interaction Design:

    “Inconsistency: It is just important to be visually inconsistent when things must act differently as it is to be visually consistent when things act the same.”

    Quoted from http://www.asktog.com/basics/firstPrinciples.html#consistency

  19. @Paulo Pereira: Thank you for making the distinction between links and action buttons. And David, it’s amazing how the most simple elements — language choice, color, positioning — can have such effect on the user action.

  20. Excellent article. Maybe a additional attribute would be for buttons to “look like” and to a lesser extent “behave like” buttons.

  21. @Paulo Pereira: Hi Paulo thanks for this comment. I’ll give that a read. I’ve heard this argument before, but only really heard the word ‘consistency’ being used as the argument.

    I’ve tested dozens of websites that use call-to-action buttons and never witnessed a single problem that can be attributed to them appearing like buttons. Principles are good, but can’t replace the understadning you get from seeing things with your own eyes.

    Consistency is a little over-rated at times.

  22. roné/di/kristu March 27, 2009

    Virgin Money ows you money – How a single button can make you earn riches. ;)

    Thank you for your insights. It was very instructive due to the use of pictures and graphic manipulation. Good advice and inspiration – you made my day. :)

  23. An excellent article David. I really like the clear examples & you’ll notice many of your suggestions when we do the next release of our website!

    Thank you.

  24. Mark Bowen April 1, 2009

    Interesting read although I totally have to disagree with the bit about UK users not being able to find the button because of a single word change. I don’t know where that usability study is but I simply don’t agree with it. We’re not total dim-wits and can definitely figure out if one word is different and what it’s meaning is!!

    I prefer Add To Cart any day personally.

    Best wishes,

    Mark

  25. Gabriel Naranjo April 1, 2009

    Excelent read indeed! thanks for this great article!

  26. @Mark Bowen: Hi Mark, as I said in the article itself, in a usability test this might have a minimal effect on task completion. But people don’t live their lives within a usability lab.

    When 30,000 people a month are looking for that button, even the most subtle change can have an effect.

    You might find this hard to believe, but just ask someone who’s running multivariate testing on a big e-commerce site and they’ll tell you.

  27. Great post and wonderful examples.

  28. @David Hamill: I agree. Sometimes minimal changes are enlarged by external factors (stress, device used to access the website, distractions) and if the user doesn’t has the time to guess and “translate” the word used on the site to his own language, he might hesitate about the real function of a button.

  29. excellent post, very good information.. now im going to make more of an effort to use my call to actions more effectively.

    thanks!

  30. You made some great points in this article, and I now have all the more reason to do that Google AB testing.

    I can’t wait to try out what I learned from this! Thank you.

  31. Great write-up mate!

  32. Good to keep in mind regarding the difference in language on buttons between US/UK. Thanks for this.

  33. Hi David,

    Really great examples. I specially like how you played around with the Twitter homepage and showed the effectiveness of the button colors ans sizes.

  34. Thanks a lot for your suggestions we are just starting to use these at my firm LINK. They are such a simple idea, however they can be very effective at “calling your visitors to action”. I guess it boils down to people are lazy and they are less likely to do something unless it is right in front of them lol.

  35. @David Hamill:
    I can definitely support that comment – as someone who has run both usability and MVT on client websites – even small simple changes like this that reduce the friction make sense.
    IMHO – the more localised US sites become the better they are likely to perform in the UK.
    Reduce the dissonance whereever possible and in the words of Steve Krug – “Don’t make me think”

  36. hi ,
    I just follow this post from smashing mag. Before reading this post ,I never think about the effect of Call-to-action to the reader .It seems to be a common thing . ( but really important for websites)

  37. @B: I have wrote a post about a technique, called dynamic text on call to action buttons you may find it useful for your redesign. Cheers.

  38. Great article.

    Thanks David.

  39. Great article, I like the comparison between what the user says and the organisation says. Is there any more advice for multiple calls to action on a page? This can be quite a difficult balancing act on a complex E-commerce site…

  40. David,

    Very well said. I really liked the examples and how you showed the differences. Nice work thank you.

  41. Good reading, I never thought to notice amazon uk calls it ‘add to shopping basket’ as opposed to ‘add to shopping cart’.

  42. I’m gonna try these tricks right away!

    Biju

  43. Overkill to Action is great!

  44. Interesting read. Great examples, especially the use of buttons on Twitter.

  45. great post thanks a lot

  46. thanks for this great analysis, just what I was searching for!

  47. This is a great post. I think you touch on some of the really important parts of successful call to action buttons – color, size and position. I think providing enough white-space around the button helps depending on the design you are going with. Nice collection and great tips.

  48. Very informative article. I am abt to these tips in my website. I appreciate any suggestions for my website http://www.sortinstechnologies.com . Thanks in advance

  49. Excellent and very informative article David. I am abt to update my website. This article will help me a lot. Thanks for ur article. I appreciate any suggestions for my website http://www.sortinstechnologies.com . Thanks in advance

  50. superb article…I’m for sure going to try these tricks

  51. Bil Billeder January 30, 2010

    Very interesting. I especially like the examples you gave:)

  52. Paulo Ramos April 9, 2010

    Great article. I’ll remember this examples anytime I’ll need to share this simple but powerful ideas.

  53. Like this article – common sense design principles really but amazing how many times this sort of thing gets overlooked.

  54. thx, great article

  55. nice article very usefull. i agree with you.

  56. excellent article. keep up the good work!

  57. Great information! the twitter example was a huge eye opener…..sometimes competing buttons can be a huge hinderance! thanks !

  58. Call to action Buttons are very important to generate directly contact to new “customers”. (sorry for my bad english) :))

  59. excellent article, some very useful information, many thanks.

  60. Thanks man, nice Tutorial..
    There are many aspects I’ver never paid attention to..
    Have to remember your tips the next time :)

  61. Hi David. This article has been a real eye opener for me. As a webmasters I have spent lots of time writing content, working of the site design and optimizing for the search engines etc. and very little time and effort on converting the traffic I have with call-to-action buttons. I will try some of your tips in time to come.

  62. Good explanation i must say. Its amazing how little changes make a big differences!

  63. Great post, I’m gona try some of these ideas on my next round of CTA buttons for my clients.

  64. Informative post, would be nice to be able to zoom in to the images, so we can understand your comments on the web design more clearly.

  65. Great summary article.

    I was surprised, though, that there was a sentence where you mentioned “let your hyperlinks shine” … which was linked to another article… and I almost missed that the text was a hyperlink because it was a dark maroon that wasn’t underlined in the midst of black text. :)

  66. It is a very good article. I loved the part of choose your action words carefully. Sometimes there are links that are not clear enough in terms on where do they lead the user. I do not click until knowing where I am going. Because I am a Graphic Designer, I need to pay attention in “words”, prioritising functionality.

  67. So many people design their website around getting better rankings but forget about getting sales from the website. Thanks for the article.

  68. What an excellent article :-) I must read for SEO’s and just as important; business marketers. It’s scary how so many sites ignore even the basics (eg. above the fold – correct trigger words – etc.). Thanks for this well written ‘how to.
    Andy :-)

  69. would be nice to be able to zoom in to the images, so we can understand your comments on the web design more clearly

  70. I like the comparison between what the user says and the organisation says. Is there any more advice for multiple calls to action on a page

  71. Great article on call to action and website usability. It would be of immense help to designers.

  72. The best call to action buttons are those that use short and meaningful terms. The smaller and simpler the phrase the better.

  73. always keep conversions in mind. you can drive all the traffic you want, but conversions are the numbers that mean everything

  74. Interesting article. There are so many websites that get this wrong – the call to action is too small or the colour doesn’t make it stand out.

  75. Informative post..

  76. Thanks, this is very useful for making money online and generating recurring income!

  77. Yes, certainly one of the important aspects, about placing the call to action button that is easy and readable.

  78. Great article! I’m reading it over two years after it was originally written. I am so impressed that the information is still as valid as it was the day it was written.

    Thanks David!

  79. Very interesting thanks. You should update the article looking at Google’s choice of “+1″ button.

  80. Hi’ there, have any of you commenters thought about the colorscheme for female / male purposes – what triggers a man colorwise and what color a woman… i have been trying to find something about male / female colortheory but haven’t been lucky – any thoughts on that subject, when it comes to call to action?

  81. Very interesting article. Sometimes we as designers miss small things which leads to bad user experience. But we learn with our mistakes & we should choose right method & techniques to create better UX.

  82. Thank you fort this useful information. I really must change my buttons :)

Related Posts