The guide to Call-To-Action buttons

The call-to-action button is a important tool to enhance the user experience of a website. However, designers often neglect its significance. At times, they do not understand that a good call-to-action button design is not just about being impressive and fitting into the overall design of the web page. However, these buttons are too important to be designed without some understanding of its use and what makes them effective.

Functions of Call-to-Action buttons

The main purpose of the button is to invite the visitor to do something. Example: Sign up for a account, download a file or adding a product to the shopping cart.

Different types of Call-to-Action buttons

There are many different types of call-to-action buttons. Those listed below are the more common ones.

1. Add to cart buttons
Mostly seen in E-Commerce websites. These buttons usually appear on every product page. The use of add to cart buttons is to encourage visitors to purchase an item.










2. Sign up buttons
There are typically two types of sign up buttons. The first type is usually associated with a sign up form. The second type is for users to sign up for a service before they are brought to the sign up form.


3. Download buttons
Similar to an add to cart button, the download button's function is to encourage a visitor to take possession of a particular item.

4. Free trial button
Some web pages try to encourage their visitors to try out their products or services, usually in the form of a free trial. This can be a free download of a software, a free account or a free service with limitations.


Some guidelines in designing effective Call-to-Action buttons

1. Choose the correct words
The text on the button should start with a verb. For example, 'Add to cart', 'Open an account', 'Register now'. Otherwise, the button will not be meaningful and will just be a button with some text. 'More information' for instance, is not a call-to-action button.

2. Choose the correct size and color.
The size of the button is a very important factor. If the button is too small, visitors may not know of its existence. However, if the button is overly big, it may empower everything around it. The button should be sized large enough to complement with the overall design and still be noticeable. Ideally, the call-to-action button should be the biggest button in the page.

The next important factor is the color of the button. With the correct choice of color usage, it can help to balance the size of the button. The color of the button should complement with the overall design of the page. For bigger buttons, choose a less prominent color within the design so that it can fit in to the page. For smaller buttons, choose a bright and contrasting color to make the button stand out.

3. Use white spaces to make the button pop
With sufficient white space around a call-to-action button can help to make it stand out. The more white space there is in between other elements and the button, the less connected they are. Therefore, if there are elements that are irrelevant to the button, increase the white space in between. If there are other elements that can help encourage users to take action, reduce the white space in between.

4. Include icons and images
Adding meaningful images and icons to the call-to-action can help to increase click rates. For instance, a down arrow icon for a download button and a shopping cart image for a add to cart button are meaningful and influential. However, ensure that the images used helps to clarify the use of the button instead of confusing it.

5. Provide additional information
If possible, include extra information to tell visitors what to expect when they click the button. This is commonly seen in download buttons and free trial buttons. Some examples of extra information include the file size of the download and the duration of the free trial. When designing the button, ensure that the size of the call to action text should be the most prominent. In contrast, the additional information can be less visible.

Some good examples...




Some bad examples...








References:
http://www.uxbooth.com/blog/good-call-to-action-buttons/
http://www.hongkiat.com/blog/call-to-action-buttons-guidelines-best-practices-and-examples/
http://www.smashingmagazine.com/2009/10/13/call-to-action-buttons-examples-and-best-practices/
http://www.1stwebdesigner.com/design/worst-call-to-action-examples/