Call to Action Buttons Best Practices Guide

by on 02/21/11 at 2:58 pm

Your buttons may call users to act, but do they compel users to act? Buttons can come in different shapes and forms, but a button isn’t effective if it doesn’t compel users to take action. The more clicks your call to action button gets, the higher chance you have at converting your users into customers. There are a few best practices that can help turn your call to action buttons into compel to action buttons. When you understand and apply these best practices to your buttons, you’ll notice that the difference is night and day.

Use gradients, drop shadows and rounded corners to make it look real.

It’s no secret that the more real your buttons look the more users know will know to click it. Using gradients, drop shadows and rounded corners on your button will make it look like a three-dimensional button that users can press. Users press buttons all the time throughout their daily life. So when they see a realistic looking button on your website, they’ll instantly know what to do with it.

Use high contrast colors.

Colors aren’t used just for decorating a website. They play an important role in grabbing the users attention. A compelling call to action button is a button that users can spot instantly. The key to making your buttons easy to spot is to use high contrast colors. The color of your button should contrast with the text color on your button, as well as the background color it’s on.

Make it big, but not too big.

Color isn’t the only thing matters. Size matters too. The bigger your button is, the easier it is to spot. When you increase the size of your button, you should increase the text size in it as well. This won’t only make your button easier to spot, but easier to read. However, avoid making the button too big. If it overshadows the content that supports your button, it’ll distract users from their task.

Use words that create a sense urgency and immediacy.

Words that create a sense of urgency and immediacy are more likely to compel users to act. Adding certain words like “now”, “today”, “instant” or “quick” to your button text can make a huge difference in your conversion rate. What this does is create tension and excitement in the user’s experience. Emotion plays an important role in both marketing and design.

Soften your action words.

If user’s don’t know much about your product, it’s highly unlikely they’ll buy it without trying it first. Many websites ask users to buy their product on the home page before users see what the product is about. This is a sure way to get users to avoid your button. Don’t put all your chips in one basket right away. Soften your action words and allow users to try a demo or browse the features before you ask them to buy.

Use title case with 1 or 2 words, sentence case with 3 words or more.

Most people don’t pay much attention to text capitalization on their buttons. The difference it makes might seem small, but it still affects users. When your call to action is 1 or 2 words, using title case can make your button text feel like a command. When your call to action is 3 words or more, using sentence case can make your button text feel like a dialogue. All of which, can make clicking more comfortable for users.

Add an affordance arrow or icon to it.

There are a couple of ways you can illustrate your call to actions to make it compelling. One way is to add an affordance arrow to the button to make it feel like an action. The arrow signals to users that the button will take them somewhere. Another way is to use an icon that describes the action. When users see an icon that matches the action, they’ll feel like they’ll get what they’re clicking.

Add a hover effect to it.

A visual change when the user hovers their mouse over the button can compel users to click it. Changing the color brightness of the gradient is a good way to get users to click your button. At the very least, the mouse cursor should change from the usual arrow to the pointing hand. This is a standard cursor convention that lets users know what they can click.

Place it above the fold and below the fold.

If your page allows for scrolling, it’s good to have your call to action button above the fold and below the fold. Users will typically spend most of their time above the fold, however, most users will eventually end below the fold. Having a call to action button below the fold helps users remember why they’re on your site and what they need to do to get what they want.

A button that calls users to act is easy to design. But a button that compels users to act is one that takes some careful thought and understanding. These best practices will guide you as you design your buttons. If you ever want to know what more you can do to increase the conversion rate of your buttons, look to A/B testing to test the effectiveness of your buttons on your users.

24 Responses to “Call to Action Buttons Best Practices Guide”

  1. Stuart Lawson

    Feb 21st, 2011

    Great post, (as always) thank you! I’ve heard that orange and green are high conversion colors as well to use.

  2. Quora

    Feb 23rd, 2011

    What is the best design for a button on a webpage that is optimized for having the user try a new service/product? (design principles, best practices, specifics etc)….

    http://uxmovement.com/buttons/call-to-action-buttons-best-practices-guide

  3. Mark Haller

    Mar 4th, 2011

    Great article, thank you.

    So simple to follow as well – a prescription for buttons :-)

    Bookmarked and will be used frequently as a reminder, I think!

    Thanks for sharing :-)

    Mark
    LogicSpot

  4. Jordan Whalen

    Mar 4th, 2011

    Love the article and you made some great points, i disagree however with your color choice on the “Call to Action Button”, Red is almost always associated ( At least in the US ) with errors, problems, and stop signs. Making the button a color like Green, or Orange would be a much better choice.

  5. Rory

    Mar 4th, 2011

    Great tips for Call to Action Buttons Ant

  6. Bogdan Pop

    Mar 4th, 2011

    @stuart: red and green doesn’t necessarily imply a higher conversion rate. It depends on contrast, product, target audience and culture background and many other factors.

    @Anthony: I agree with your ideas but sometimes is better to get out of norm, break the rules, in order to achieve even higher conversion rates.

    10 years ago there were no big chunky call to action buttons. They are just a trend until something even better comes up

  7. Douglas Baldan

    Mar 4th, 2011

    Great post.

    And yeah, as far as I know, green is the color with best conversion.

  8. HTML Codes Dude

    Mar 4th, 2011

    Hi great post but it would it not have been better to use a slightly softer colour like orange, rather than the red. I have always thought that red indicates danger where as orange gives the same prominence to the button without that warning element.

  9. Webanddesigners

    Mar 4th, 2011

    Useful article. Should alwayz use these guidelines. Thanks

  10. coda

    Mar 4th, 2011

    You said “fold”… *snigger*

  11. Chris

    Mar 6th, 2011

    Love it! And I love the site…. just stumbled across it.

    I’m looking to start taking my designs up a level by doing some wire framing to improve my process/results, and focus on UX will be huge for me.

    “Compel to action” – that’s awesome.

  12. Bob Goodman

    Mar 7th, 2011

    You have put forth some valuable information here. There are many ways to experiment such as size, color and shape of the buttons. One size does not fit all.

  13. Anton

    Mar 8th, 2011

    Nice article. I allready have very good experience with Buttons. It is very important to use Buttons because some users stay only 2 seconds on the website. A button is a good way to get more attension.

  14. abdulsala almekhlafi

    Mar 14th, 2011

    Very good article and amazing

    Thank you so much

  15. sree

    Mar 29th, 2011

    great post,informative.

  16. Brendan Rice

    Apr 17th, 2011

    Really good post. There is some great advice in there about call to action buttons. I had a go at writing about calls to actions as well your reader may find it relevant:

    http://www.gumpshen.com/blog/2011/4/7/website-calls-to-action.aspx

    Paul Boag also has a good blog post on the subject:

    http://boagworld.com/design/10-techniques-for-an-effective-call-to-action/

  17. Harsha

    May 15th, 2011

    This is a very good resource and also useful for most of the users,

    So sim­ple to fol­low as well — a pre­scrip­tion for but­tons

    Book­marked and will be used fre­quently as a reminder, I think!

    Thanks for shar­ing :-)

  18. Tracy Macfarlane

    May 20th, 2011

    Thanks for the tips Anthony, I really liked the way you progressively illustrated each point with a new button, “improving” the button as you introduced more tips. I’m sure I’m not the only one who found it very difficult not to try and click on each button, they were that compelling! Will bookmark and keep as a reference for sure

  19. Bijuterii Argint

    May 25th, 2011

    It’s so much easier in Enghlish, the words are smaller. In other languages you have to write a whole sentece to have the same meaning.

  20. Paul Olyslager

    Jun 26th, 2011

    Hi Anthony, you have some really great pointers on CTA-buttons, simple to implement and to the point. Maybe your readers would find my latest article about color psychology and how it affects our decision making on CTA-buttons worthy of reading as well. You can find it here:
    http://www.paulolyslager.com/call-to-action-buttons-psychology-color

  21. Skylar Grey

    Jan 3rd, 2012

    Thank you for all of these great tips, Anthony. It’s easy to “hide” your CTA buttons if you don’t follow these guidelines.

  22. Jim McDonald

    Mar 19th, 2012

    Oh – the crazy button color conversation. I ran numerous multivariate tests at Match.com (100+) and here is what I discovered:

    Green buttons out-performed other colors significantly (for Match.com) – by 3+% points (99% confidence level)

    However…

    I was never able to replicate the green button performance for our sister company Chemistry.com.

    Two things that really stand out with the Chemistry.com tests are:

    1) The primary colors on Chemistry.com (at the time) were red and white
    2) The button color that performed the best was …………….RED

    I only ran the test three times at Chemistry, and it was in a multivariate test; but each time the color that worked the best was RED – albeit it only outperformed the control (green) by 1% and other variables had higher contributions, it was significant.

    Here’s the scoop – test, test, and test again. I always evangelize that generally, amongst all of my research (primary and secondary) that green buttons work the best, but it’s obviously never a rule. The simplicity of the page and USP, and proximity of the USP to the button are also important (not to overlook the aforementioned tips and/or to forget to mention branding considerations).

    I will also add that the words in the button, generally, will add a much larger lift than the color. I won’t say how much, but I hear there are some unauthorized publications of presentations I’ve done on this subject on the internet somewhere…

    Good stuff; glad it’s being discussed.

Leave a Comment