Although we would rather our website users carefully read entire web pages before taking action, in reality, they seldom do and are more likely to quickly scan your content and immediately click on the 1st indication of an answer to their question. Therefore to help our users make better decisions, web pages should help users assess what options they have and what to do next with the least amount of effort.
In this article, we will share some of the best design principles we have observed to help users quickly and effectively find their next click by designing better “Calls to action”. If you'd like to understand your users better, you should also read our article on proto-personas and how they can help you to make better design decisions.
Calls to action
There are generally three types of links on a web page:
- Main navigation (generally at the top of the page, containing links to all key pages)
- Calls to action (buttons that clearly indicate what to do next)
- Text links (within copy, of low priority)
As the sites’ main navigation can be overwhelming to new users, it is important that your web pages contain clear indicators that help your users make the next step in their journey. We call these links “Calls to action”.
To help your users quickly identify the calls to actions, we recommend you follow these design guidelines:
Stand out in the crowd
Making the size and colour of your calls to action different and more apparent than the rest of the page content really helps users identify them. Try to add plenty of surrounding white space too, as this will help the user separate one call to action from another.
Clearly labeled
As people will be generally drawn towards your calls to action, it is important they’re clearly labelled. The words “Read more” tell the user nothing about the link, so try to use precise language to describe the action where you can.
Click me!
Flat design is already becoming, well, less flat. Buttons work best when they look clickable, so apply a little gradient, shadow or contrasting colour to help make them stand out.
Limit choices
Many pages only need one or two calls to actions. If more are needed, then placing related calls to actions in close proximity can help users compare choices. You can also consider different design treatments for different groups of calls to action to show levels of importance.
We would love to know any thoughts you have on creating better calls to actions, and if you think our ideas might help your next web project, give us a call. If you enjoyed reading this article we'd also suggest reading "Button or Link? Don’t make me think!"