A call to action is a marketing concept, a request to ‘do something’, often the next step that a customer takes to purchase your product or service. It’s very important because it dictates what the website can achieve, and is a measure of whether it serves its purpose: to generate sales and enquiries.
Calls to action are important on any website, but most importantly e-commerce sites and email newsletters in which a business is driven by sales, so encouraging a user to proceed with a purchase is vital.
When creating a call to action button, it can appear in any form, but the user must understand what is being communicated. Calls to action contain several critical aspects that must be considered during the design process.
Language is probably the most important aspect. Every call to action will contain some text whether it’s four words or one single word. But it must relate to the user. The way to approach this is to think “what would the user want to do?” rather than thinking as the seller.
For example, an insurance company may use the language “price estimate”, but a customer would say “quote”. Therefore the call to action on the button should display “get a quote” and not “get a price estimate”.
Another good reminder when designing a call to action is to make sure it starts with a verb. Otherwise it’s not a call to action, it’s just a button with some text on it. It is the importance of the words that prompt the user to interact and make an action.
Fig 1 shows how to use the correct language when creating a call to action.
Note: The use of the language is correct when the text begins with a verb relating to a user perspective.
Colour is also a very important factor within the design element, as it draws attention to the call to action. If you want your user to choose a certain path, then let them know exactly where they have to look.
A user should be able to see your call to action within the first few seconds when they land on your site. If a user cannot find what they’re looking for, they will become frustrated and leave.
Bright colours seem to have the best effect as they stand out, and communicate to the user that it’s something they can interact with. This is especially true when dealing with an e-commerce site that contains a lot of information.
Also, contrasting colours and negative space will help the colour to achieve its potential in a layout. The colours need to complement the brand colour palette.
A call to action should always be instantly visible. Size is highly important, as you need the call to action to stand out for it to be most effective. A well-known fact is that the larger the button, the higher the chance a user will click on it. The idea is to intrigue your user, make them want to go through. Make it obvious it’s a call to action.
Fig 2 is an example of how big a call to action should be.
Note: The size of the button makes it stand out from the text above it, giving the call to action equal or greater importance than the heading.
Fig 3 is an example of how to use the correct colour and positioning.
Note: The contrast of the colour balances with the design and layout. The bright colour also makes the call to action stand out.
The elements of language, colour and size brought together can only successfully work if the call to action is positioned well. If it’s not placed in the right way you won’t achieve your objective, regardless of whether the other elements are working.
The call to action should appear “above the fold“, the portion of a web page that can be seen without scrolling down the page. A call to action has to be inserted in the correct place for the user. For example, a user would not read a whole page of text about a product before clicking on a button to purchase the product at the very bottom of the page. You want the button to be the first visual a user sees in relation to the product. Every task you would like your user to access should always be well positioned on the layout of the page.
Taking account of these important factors can lead to good interactive design elements, setting a balance between user and designer.
Five points to remember when designing a call to action:
- Always start your message with a verb
- Make the button stand out with colours that contrast with the rest of your layout
- Make sure the call to action is large enough to be noticed
- Position your button so that it is accessible and noticeable, as you only have seconds to keep the user’s attention
- Let your call to action be part of the design, give it as much importance as the content