Call to Action Buttons: A Survey of Best Practices

Door globecom op zo, 2014-12-28 14:28

Call-to-Action buttons play a pivotal role in soliciting action from the user. To garner the requested action, buttons are placed on the website that allow the user to perform an action, such as buying something, or leading to another page for more information. Careful planning is necessary in the creation of your call to action, and in this article I will explain the best practices for creating effective call to action buttons. I will also present you with examples in action to give you a better understanding of what works.

In order for your Call-to-Actions to work successfully, you must first determine how they’ll fit into the overall scheme of your site. By laying the groundwork, or information architecture, you’ll begin to discover how the buttons work within the web interface. To survive in the market, you have to generate revenue. So, the successful website is that which leads the reader of web page to the desired end result (“Buy Now”…”Learn More”). Now the question arises, how can we make effective call to action buttons which work in the real world.

Factors to Consider

Size

In web design, historically the larger the element, the more important it is. The size of your call-to-action in relation to its surrounding elements is essential in converting users to take action. After all, it’ll be hard to get the intended action from your user if your button is miniscule in size and blends in with the rest of the text.

Use white space: A lot of what can be achieved from increasing the size of a button can also be accomplished by simply placing the button around plenty of white space. A button surrounded by white space will be much more prominent than one which is lost in a sea of text and graphics.
The more white space there is in between a call to action button and a surrounding element, the less connected they are. Therefore, if you have other elements that can help convince users to take action, reduce the white space in between those elements and the call to action.

ScrapBlog
You can see the effects of using a prominent color, sufficient white space, and size relative to surrounding elements to attract users’ attention. Straightforward language conveys a sense of easiness, claiming that you can “start” right away by taking action.

Mozilla Firefox
“Free Download” button of the Mozilla Firefox is a true revolution in terms of call-to-action graphics. Its large, unevenly shaped, vibrantly colored and detail oriented button has made its mark in the industry.

Color

To ensure the user notices your button, it’s also important to consider its color. Although there are a few choice colors for a call-to-action button, it can be worthwhile to choose a contrasting color than the background. This essentially makes the button jump toward you, enticing you to click it.

It has sometimes been said that a red button (and red text links) performs the best
Perform some A/B testing to see what colors performs best for your website
The performance of any button may be attributed to the contrast on the page instead of its color

Vuze.com visitors will have no problem finding the download call to action button. The use of contrasting color, plenty of white space, and placement on both the top and bottom of the page make this call to action noticeable and effective.

Placement

An effective button should be clearly visible on a page, and at least relatively prominent in relation to other elements.

On a landing page – and indeed for most pages, where this is feasible – a button should appear above the fold. The likelihood that a button will be clicked is greatly diminished if a visitor has to scroll to see it.

Increase the likelihood of a button being clicked by placing both at the top of the page (or above the fold) and at the bottom of a longer page. It’s likely a user may not scroll back up the page if they’ve passed it, or scroll down a page if they already see one.

Proximity to other page elements is important as well. Obviously for an e-commerce site an “add to cart” button that’s right next to a product should perform better than one that’s further removed.

In other situations, it is important to keep a call-to-action button close to such things as value propositions, testimonials and feature lists that are intended to stimulate conversions.

You can see these concepts in practice on the website for YourWebJob.com. By putting the call to action “Post a Job!” in a very prominent area, it is more likely that the user will notice it or remember it later, after they have looked at the site’s content.

Mobile Web Design
This call to action button is placed in a prominent location; it has large size and a distinctive color with respect to surrounding elements.

Mobile Cubix
Mobile cubix uses a round outline surrounding the “Read More” button and then leading it to the application that not only attracts visitors’ attention but also informs them what they can expect.

Making Its Use Known

Of course none of these procedures matter if the button doesn’t actually look like a button! You need to make it clear to the visitors that this graphic is in fact a button that can be clicked on to result in a specific action and not simply another element on the page. Graphically speaking there are a number of ways to do this, including:

Embossing the button
Placing the call-to-action text in a discreet bordered area
Offsetting the button from other graphical elements
Making it behave like a button when the user’s mouse hovers over it
For buttons that are not hyperlinked (and so do not automatically generate a hand symbol in the mouse over state) this can readily be accomplished with CSS.
A change in the button’s appearance itself on mouse over, such as a change in color, is a further signal to the visitor that the button is clickable.

Kalculator
This call to action tells users exactly what to expect: by clicking on this call to action, they should anticipate shelling out $3.99. Using the word “only” hints that this is quite a good deal, which can help make the sale.

Postbox adds value through the download call to action by adding that its “FREE” 30-day trial and reduces consumer doubt with the purchase call to action by stating it’s a “No Risk Guarantee!” More often than not web sites calls to action simply ask the visitor to Buy Now! without reinforcing the value or ease of the action.

SEO

A button, in many cases, is directly linked to a page indexed by search engines. Adding an alt attribute will provide the search engines with text they will associate with the target page: if you are targeting keywords on that target place, you should employ them in your alt.

To get the most out of your button, your image’s alt attribute (or, depending on the browser, an title attribute) may be displayed to a visitor when they mouse over the button, providing yet another opportunity to reinforce or your call-to-action (“start your trial today!”).