Call to Action Button Design

Before any call to action buttons are made, you must be able to establish the following:

• Understand the objectives of the website- so you know what type of call to action buttons you need
• Sort out which tasks are more important – so you can determine the size hierarchy of different buttons
• Know what’s necessary – remove any distractions that exist for the above tasks that may slow the user progress

Choosing your words carefully

Wording should all be verbs – if not, the button is not a call to action. Words can include:

“Get a quote“

“Download“

’“Go to checkout“

If you have problems establishing what type of words to use, think what the user would say if you asked him a question and the answer is what is meant to go on the button

You “What do you want to do”

Client “I want to get a quote”

Button = “Get a Quote”

Don’t Use Company Jargon:

Cultural Differences

Amazon.com: “Add to Shopping Cart”

Amazon.uk: “Add to Shopping Basket”

In the UK people use trolley ‘Baskets” not “Carts” in the real world, hence different wording has been used. It wouldn’t make a huge impact, but reduces any possible user friction as much as possible. A handy note is to take note of any specific culture differences or meanings that may have different meanings in different cultures.

Positioning

• If your page requires you to scroll down, make sure call to action buttons follow
• Placed near the information that users will be reading
• Better placed on the right hand side of a screen – as that is where most users mouse automatically drifts
• Position it away from clutter

Use of colour

Using the right colours will:

• Improve  readability e.g. yellow background with white text is bad
• Certain colours on different pages will cause different reactions – do research on the psychology of colour before designing
• Don’t over-use the colour of a button elsewhere in the design
• LINKS: Consider those colour blind – readers can’t tell the difference between red and green

Registration Pages

• Vivid colours on links attract more user attention
• Important links should not blend in with the surrounding

Advertisements

• Higher consistency of a website colour scheme, the better the ad click throughs
• People tend to have greater trust on ads places on professional looking websites

Size

• Size matters-  the bigger the better because it stands out more
• Firefox landing page is a good example of the above
• Size should determine the buttons importance over everything else on the page

Avoid overkill-to-action

• Too many call to actions buttons will confuse the reader
• Too many buttons will make the page loose emphasis in which is more important for conversions