Your buttons may call users to act, but do they compel users to act? Buttons come in different shapes and forms, but it isn’t effective if it doesn’t compel users to act. The more clicks your button gets, the higher chance you’ll convert users into customers. There are best practices that can help turn your call to action buttons into compel to action buttons.
Make it look real
The more real your buttons look the more users will click it. Gradients, drop shadows and rounded corners can make your button look 3D. Users press physical buttons all the time. When they see a realistic button on your site, they’ll know what to do.
Use high contrast colors
Colors play an important role in grabbing user attention. A compelling call to action button is a one that users can spot instantly. The key to making it easy to spot is to use high contrast colors. Your button color should contrast with the text color of your label.
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 increase the label size as well. This will make your button easier to read. Avoid making the button too big. If it overshadows content could distract users from their task.
Use words that create a sense urgency
Words that create a sense of urgency and immediacy are more likely to compel users to act. Adding words like “now”, “today”, “instant” or “quick” to your button label can increase conversion rate. This creates tension and excitement in the user. Emotions play an important role in getting users to act fast.
Soften your action words
If users don’t know much about your product, it’s unlikely they’ll buy it without trying it. Many sites 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 features before you ask them to buy.
Title case with 1-2 words, sentence case with 3+ words
Most people don’t pay much attention to title capitalization on their buttons. This small difference can affect conversion rate. When your call to action is 1-2 words, title case can make your button label feel like a command. When your call to action is 3 words or more, sentence case can make your button text feel like a dialogue. When your button label is in the right case, you make users more comfortable to click.
Add an affordance arrow or icon to it
There are a couple of icons you can add to your buttons to make it more compelling. One is an affordance arrow that signals to users the button will take them to where they want to go. Another is to use an icon that describes the button action. This will make users feel like they’ll get what they want.
Add a hover effect to it
A visual change when the user hovers their mouse over a button can compel users to click it. Changing the color brightness of the gradient is a good approach. The mouse cursor should also change from the arrow pointer to the pointing hand.
Place it above and below the fold
If users have to scroll your page, it’s good to have your call to action button above and below the fold. Users will spend most of their time above the fold, but will end below the fold. Having a call to action button below the fold leads them to act when they finish the page.
Compel to Action Button
A button that calls users to act is easy to design. But a button that compels them to act is one that requires careful thought and design. These best practices will steer you in the right direction. If you want to know what more you can do, test different button versions on your users.
Book
Affiliate
Great post, (as always) thank you! I’ve heard that orange and green are high conversion colors as well to use.
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
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.
Are you sure your assumption is correct?
Here are some cases where red buttons significantly improved conversion rate compared to green buttons:
http://dmix.ca/2010/05/how-we-increased-our-conversion-rate-by-72/
http://blog.performable.com/631526233/
This doesn’t mean that red is the best color to use for buttons. It simply means that a high contrast color is better than a low contrast color for call to action buttons. See best practice #2 in the article.
I was thinking the same thing, about the red being a WARNING or STOP signal…and yet, i could feel my own self wanting to click that red button.
Curious.
Great tips for Call to Action Buttons Ant
@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
Great post.
And yeah, as far as I know, green is the color with best conversion.
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.
Useful article. Should alwayz use these guidelines. Thanks
You said “fold”… *snigger*
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.
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.
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.
Very good article and amazing
Thank you so much
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/
This is a very good resource and also useful for most of the users,
So simple to follow as well — a prescription for buttons
Bookmarked and will be used frequently as a reminder, I think!
Thanks for sharing 🙂
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
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.
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
Thank you for all of these great tips, Anthony. It’s easy to “hide” your CTA buttons if you don’t follow these guidelines.
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.
The colour of CTA should be used only once in all page? You’re mixing this colour with some other buttons or elements on the page?
Best Regards
What about showing the CTA only when you hover on that element? for eg. http://bit.ly/1FyJFqs
Funny reading about making it as realistic as possible, using gradients, drop shadows, etc. and “make it big, but not too big”, considering the trend that has been going on for the past three years about minimalism and – especially for CTAs – very large buttons.