Good Call-To-Action Buttons

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.


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.

About the Author

David Hamill

David Hamill is a freelance usability consultant based in Scotland. He provides web usability services to organisations across the UK. He also write a usability blog for people who want to make better websites. David began specialising in website usability in 2003 whilst working for a large bank, then moved into consultancy in early 2007.

Related Articles

83 Comments

  • liam Reply

    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!

  • David Reply

    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!

  • sir jorge Reply

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

  • MondoNucleosis Reply

    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!

  • Rank Higher, Make Money! Reply

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

  • B. Moore Reply

    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.

  • Dietmar Reply

    Thank you a lot for this really helpful advice!

  • Alexis Brion Reply

    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

  • David Hamill Reply

    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.

  • David Hamill Reply

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

  • Farid Hadi Reply

    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!

  • Jonathan Patterson Reply

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

  • Rachel Nabors Reply

    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!

  • David Hamill Reply

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

  • Paulo Pereira Reply

    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

  • Anne Easterling Reply

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

  • Jane Parking Reply

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

  • David Hamill Reply

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

  • roné/di/kristu Reply

    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. :)

  • Web Design Brisbane Reply

    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.

  • Mark Bowen Reply

    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

  • David Hamill Reply

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

  • Pedro Reply

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

  • shae Reply

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

    thanks!

  • Elizabeth K. Barone Reply

    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.

  • Tom Reply

    Great write-up mate!

  • Guild Invite Reply

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

  • Yiana Reply

    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.

  • Brian Reply

    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.

  • Mark Pinkerton Reply

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

  • Kito Reply

    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)

  • Paul Allen Reply

    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…

  • Jared P Little Reply

    David,

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

  • WebDesignExpert.Me Reply

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

  • Design Informer Reply

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

  • matty Reply

    great post thanks a lot

  • Petey Reply

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

  • Dale Berkebile Reply

    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.

  • Sherwin Shine Reply

    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

  • Bil Billeder Reply

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

  • Paulo Ramos Reply

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

  • Infrared Design Solutions Reply

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

  • ProtoDot Reply

    nice article very usefull. i agree with you.

  • Nick D. Reply

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

  • Andreas Herrmann Reply

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

  • Holger Kruse Reply

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

  • Jesper Nielsen Reply

    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.

  • internetne strani Reply

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

  • Web Design Brisbane Reply

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

  • Barry Fogarty Reply

    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.

  • erin Reply

    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. :)

  • Adriana Web design Brisbane Reply

    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.

  • seo sunshine coast Reply

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

  • SEO Vancouver – Andy Kuiper Reply

    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 :-)

  • dolce & gabbana perfume Reply

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

  • dolce & gabbana perfume Reply

    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

  • Payroll Software Reply

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

  • Web Developer Reply

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

  • cremation nc Reply

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

  • James Morrish Reply

    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.

  • Michael Reply

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

  • Pashminu Mansukhani Reply

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

  • Smart Website Development Reply

    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!

  • Kelly Reply

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

  • Kim Kristensen Reply

    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?

  • Mangesh Reply

    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.

  • Darila Reply

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

Leave a Comment on This Article