Call-to-Action (CTA) buttons are a great way to get your visitors engaged. Online shoppers appreciate straightforward links that accurately state what clicking will do, e.g. “Add to Cart” as opposed to “Learn More.” People also have an innate curiosity when it comes to pushing a button; there’s just something tempting about them. These are some of the psychological reasons CTA buttons can be very effective: they draw attention by presenting clear instructions and looking so clickable.
However, the power of CTA buttons fades when they are poorly designed, because customers will overlook them completely. The simple fact is that if the button doesn’t stand out, it can’t do its job. A Call-to-Action button that blends into the background may as well not be there at all!
To get the most out of your Call-to-Action buttons, keep the following in mind:
When choosing a color for your CTA buttons, consider your site’s theme and the general nature of your products. Don’t use a plain white or black button, because most people’s eyes won’t catch on it. Red converts very well in the majority of situations, but you may find green more appropriate for your site. Orange works almost as well as red without being “too red.” Thanks to the Like and Share buttons on Facebook, blue is becoming popular as well. In fact, you could say that the four highest-converting CTA button colors are, in this order:
However, this is a general list and doesn’t take individual sites into account. A mostly gray and black site might do very well with a yellow button. And that leads us to the next topic, which is arguably more important than color.
Think about it: contrast is really the whole point of your color selection. It makes an enormous difference in how well your buttons stand out. Contrasting colors are great, but don’t make them too saturated because our eyes find powerful opposing colors exhausting (especially, don’t put bright red and bright blue next to each other unless you want to give your visitors a headache). Instead of focusing purely on color, work with value, which put simply is how light or dark a color is.
A great way to test your site’s overall contrast is to view it in grayscale or even through a colorblind filter. Colorblindness is more common than you might realize— a form of it affects up to 10% of men, and women too to a lesser degree. Some great tools can be found online to help you evaluate your website’s clarity under a number of vision conditions. The Colorblind Web Page Filter lets you enter a URL to be tested against several forms of colorblindness, including a quick grayscale check. You can also use a Chrome extension such as Colorblinding. Perhaps the most comprehensive option is the extension NoCoffee; it lets you simulate a number of vision problems that can really help you pinpoint weaknesses in the contrast and overall clarity of your website.
Contrast and color are the most important, but there are a few other things you can do to improve your Call-to-Action buttons. First off, the need for contrast extends to the button itself too, meaning keep the button text visible.
Depending on your theme, you may want to make buttons with strong outlines to make them stand out even more, or beveled edges to make them look more like a real button. We haven’t gone into location of your CTA buttons, as that’s more in the realm of theme design, but that’s an important factor as well— fortunately, 3dcart themes place the buttons in optimized locations.
One final note: test your buttons! As you make changes to them, watch the effect on your conversions and compare the effectiveness of different buttons. Just don’t make the mistake of comparing “any button” to “no button,” as you’ll naturally get an increase once you add (or make visible) a button for the first time. You should still try a few options to make sure your CTA buttons are the most effective possible, and not simply the difference between having one and not having one.
Good luck and happy converting!