How to Make Calls-to-Action Buttons Work

October 14, 2015 by Felipa Villegas

 The call to action button is the all-important click that converts a web-surfing visitor into a paying customer, subscriber, donor, or follower. It is the element on a web page that invites the user to ‘Add to Cart,’ ‘Subscribe,’ or ‘Get more information.’ Users cannot make a purchase or sign-up for anything without clicking at least one button on your site, yet they are so often overlooked. Research has shown that thoughtfully designed calls to action can boost clicks as much as 90%. So how can you optimize your call to action buttons to entice your visitors to click? Here we will answer that question by discussing the effective elements in these smart and creative examples:

Contrasting Color

Calls to action should jump off the page and grab the viewers’ attention. One way to achieve that is through the use of contrasting color. The color of the call to action button should complement the color scheme, yet stand-out as a less used, more vibrant color. Grey is best avoided where action is desired, as it may be misinterpreted as disabled button. If there is more than one call to action button to choose from, try making the non-preferred option a color with less contrast. The popular Amazon shopping pages use this technique with their golden ‘Add to Cart’ button. With the otherwise cool, neutral color scheme, the eye is drawn to the more richly colored call to action button. Amazon makes clear what they what customers to do, but also offers a secondary call to action option with the grey ‘Add to Wish List’ button beneath.

Shape

Eye-catching contrast can also be created with geometry. People readily recognize the long landscape-oriented rectangle, sometimes with rounded corners, as a clickable button. Unique shapes add to the modern retro design scheme, and the calls to action are still easily recognized as clickable buttons. The clean geometry combined with contrasting color against a muted, blurred background effectively commands attention to the buttons.

Spacing

Effective use of negative space surrounding a call to action button helps it stand out on pages where there are already a lot of other text and design content. Keep in mind design standards like the golden ratio and rule of thirds when determining the size of the button and amount of white space.

Position

Never make visitors look for the call to action button. Place the call to action button where it will not get lost as visitors scroll through the page. At whatever point they decide they are ready to join, buy, or subscribe, the button should be easy to find. Position a call to action button “above the fold,” meaning near enough to the top that it is visible without scrolling. Reverbnation does this, and also smartly places another smaller button on the fixed navigation bar, so it is always there. Also note the contrasting bright blue. It would be difficult to miss this call to action. Consider positioning another call to action at the bottom of the page for visitors who scroll all the way to the end.

Image Source: Reverbnation.com

Brand Graphics

Incorporating a logo, as Mozilla does for the call to action to download Firefox, can help attract visitors’ attention to the call to action. This is particularly true for relatively simple pages with more text and fewer images. The arrow icon on Firefox’s download button also adds clarity to the function of this button.

Image Source: Mozilla

Language

The message on and around the call to action should be action-oriented and stated in first person. To optimize the wording on the button, ask yourself what the visitor wants to do, and answer in the first person. For example, if the answer is “I want to get a free sample,” the button should read “Get my free sample.” (Not “Get your free sample,” as that sounds pushy, is not phrased in first person, and is less effective.) This online resume builder site words it perfectly: it begins with action word “create” and states in first person “my resume.” Text directly on the button should clearly and concisely communicate the what the user should expect by clicking the button, and should generally be limited to 5 or fewer words.

Image Source: Resume Builder

Urgancy

Basic supply and demand tells us that people place higher value on goods that may be less available in the foreseeable future. Creating this sense of urgency can give visitors incentive to go ahead and click that button. Using words like “now” and “today” can subtly suggest a sense of urgency. If there is an expiring discount or limited quantity available, then a more critical sense of urgency is experienced. The Next Web Conference call to action clearly informs visitors that they are at-risk of missing an opportunity, and should “strike now.”

Image Source: The Next Web

Click Triggers

The term “click triggers” was coined to describe the extra information you may need to include on or near the call to action button to encourage visitors to click the button. These are the tidbits that decrease users’ anxiety about accepting the calls to action. Click triggers include data points, testimonials, reviews, and other risk reducing information, such as ‘no credit card required’ or ‘money back guarantee.’ Click triggers are not always necessary or helpful. They should only be included when they add to the user experience.

Keep these tips in mind the next time you start adding new calls-to-action to your website to ensure a higher click-rate.