Call to action buttons are the stars of any webpage. Think of your basic ecommerce page, for instance. Whether it’s a product page or the final page in the checkout process, a CTA button is always going to be the final action on a page. It’s the goal, if you will, of the entire page. These buttons are omnipresent on the web. You’ll find them on news sites, too, where the CTA will normally be to subscribe to news alerts or the newsletter of the site. Why, right here on the Creative Market blog, we have our own buttons that prompt you to:
- Join the CM marketplace (top right of the screen)
- Go to the next page (pagination)
- Explore the gallery, meet the CM writers, and download our ebook (very bottom of the screen)
Clearly, then, these buttons are integral to any website’s usability, navigation, user experience, conversions and, ultimately, sales. It goes without saying that these are super-important buttons, so that begs the question, how should web designers and developers design them so that their users will click them with as little friction as possible and complete the prompted action? Are all buttons made the same, so you can just design them with one-size-fits-all in mind? Are buttons perhaps more complex than that, necessitating careful research, scrutiny and analysis from case to case? We’ve got all the answers for you that you could ever want in our close look at creating surefire CTA buttons.
The Colors Red and Orange
Remember the colors red and orange when you’re designing buttons because they’re both the colors of passion and vitality. According to this eye-opening Kissmetrics infographic, red increases one’s heart rate and sense of urgency, which is why it’s frequently used in clearance sales. On the other hand, orange is an aggressive color that makes it ideal in all sorts of calls to action.
A/B testing has confirmed that these two colors perform well for CTA buttons.
In the first example, Bokardo writer Joshua Porter, writing for HubSpot, tells of a test he once conducted for the homepage of Performable. He used green for the CTA button in the original iteration and used red in the treatment. The results were that the homepage with the red button outperformed the homepage with the green button by a very significant 21%. 21% more people clicked on the red button than the green one.
On Target’s category page for DVD and Blu-ray players, note the slew of red CTA buttons all over the page.
Needless to say, this has quite the impact on conversions and sales.
Another A/B test showed that using orange for CTA buttons helped markedly, too. Michael Aagaard, writing for Unbounce, performed a redesign for a commercial real-estate site by changing the button color from a dull, brownish one to an orange one. The result was that the click-through rate more than doubled with the new, orange color.
While these tests make clear that red and orange get very good results, CTA button color comes down to common sense as well. The big rule to follow is to always make sure your button has great contrast with the background of the webpage. In other words, while red and orange are preferred, even blue can get good results if the background is, for example, white.
On Walmart.com’s product page for the AT&T ZTE Z223 GoPhone, notice how the CTA button is a striking and vibrant orange color.
Typography: Make Your Fonts Bigger
On the web, reading text clearly and easily is all that matters. It can mean the difference between more conversions and lost sales. This is especially true in your CTA buttons because site visitors won’t trouble themselves to figure out what a button says if they find it hard to read. They’ll just leave your site instead. To prevent that from happening, I advise you to use bigger fonts. Remember: With web typography, bigger is better. Always! Here’s an A/B test to illustrate just that. Visual Website Optimizer chronicles an experiment featuring Who Accepts Amex, a UK affiliate-model site that lists out businesses that accept or don’t accept American Express. The site ran a test where 14-pixel font was used in a CTA button linking out to a external website; that was the control. The variation featured 18-pixel font in the button. After almost a month of running the test, the site found that the button with the bigger typeface won handily to the tune of 32.68% more click throughs to the external site. Naturally, as this A/B test strongly indicates, a bigger font is easier to read and stands out easier against the background, encouraging users to click through more.
Rounded Buttons as Opposed to Straight Edges and Sharp Corners
The shape of your CTA button plays a role in how persuaded your users will be to click the button–simply by changing a part of the button’s shape, you can drastically affect the conversion rate of said button. That’s because, on the Internet, any design element that your users can notice will impact whether or not they respond favorably or unfavorably to a CTA.
Case in point: an A/B test where the button on a product page of an ecommerce site was changed. The original design was rectangular, but the variation treatment featured rounded edges on both sides of the button that made the shape look softer. As a result, conversions skyrocketed by an impressive 35.81% with statistical confidence of 98%.
That just goes to show you that even somewhat subtle changes to a button’s shape can have a serious performance on its performance. And, of course, in real-world terms, a jump in conversions by that amount leads to a serious increase in revenue for any site!
On the product page of Best Friend Max, from the Toys R Us site, note how the CTA button has rounded and soft edges as opposed to straight corners.
Above-the-Fold Placement
Above the fold means anything on a page that the user can see on his or her screen when the page is visited…without having to scroll down. This means that above-the-fold visual elements are seen more easily since fewer people scroll down the page than those who just land on it.
Unsurprisingly, studies show that your button placement should be above the fold to perform better, conversion-wise.
Take this A/B test from Unbounce. The company experimented with its landing page CTA button. Its director of marketing believed (hypothesis) that moving up the page’s buttons so that they were above the bottom page’s fold would increase conversions. Unbounce designed a treatment page with the buttons higher up on the page, so that there wouldn’t be the chance of them being hidden. As a result, a 41% conversion lift was produced, with the buttons higher up on the page producing far better results than the original design of buttons below the fold.
This information is further backed up by research referenced by the Nielsen Norman Group, a user-experience firm. Its study looked at ads in a Google study and found that ads below the fold were only 44% as likely to be viewed while ads above the fold enjoyed 73% viewability. This is another powerful indicator that any visual element below the fold suffers more from being neglected. This applies to ads, and it certainly applies to buttons.
That’s why, err on the side of caution, and put your CTA buttons above the fold for maximum viewability (and conversions, of course).
On Amazon.com’s GhostBed product page, take a look at how the “Add to Cart†CTA button is located very high up on the page, safely putting it in above-the-fold territory.
The Sheer Impact of CTA Buttons
CTA buttons are the purpose of every page that you see on the web. Some prompt you to buy something while others ask you to sign up for newsletters and special alerts, but all of them share one thing in common: They all want you to do something for your benefit and the benefit of the site. Whether or not you end up being persuaded all depends on how these buttons are created by web designers who want to make you perform a certain action on their pages. We’ve looked at four, specific ways in which the design of a button can have a serious impact on the success rate of these CTAs:
- The color
- The typography
- The shape
- The placement
Designers who are thinking about how to make a button visually appear on a page should take the above A/B tests I referenced into consideration to create buttons that are optimized for conversions. There’s one final caveat, too: Although A/B tests by others are always great and a solid starting point, please remember to always do your own A/B tests for your own pages and sites. Since there are so many factors that influence a user’s behavior and click-through rate, the most accurate way of getting reliable results is to test these specific button factors in your own use cases and applications.
Products Seen In This Post:
Check off these items before you go live and make sure that your visitors get the best possible experience.
Download your checklist
Marc is a copywriter and marketer who runs The Glorious Company, a marketing agency. An expert in business and marketing, he helps businesses and companies of all sizes get the most bang for their ad bucks.
View More Posts
