Tags – How to Design a Call-to-Action Button
The call-to-action button is what you use throughout your website, that guides visitors to take a desired action that will positively impact your conversion rate.
Typically found on landing pages, the call-to-action button must be clear, to the point and enticing, otherwise your visitors will be left confused as to what their next steps should be.
Depending on your goals, call-to-action buttons can vary in design. Some examples include:
- Add to Cart
- Free Trial
- Newsletter Sign-up
- Download
The ultimate goal is to get them to click through and complete a conversion, and the smallest design tweaks can make all the difference.
And the more clickable a call-to-action button is, the easier it will be to measure the effects of it later: to see how visitors interact and the result of that.
So, here’s how you can design a call-to-action button in 6 easy steps.
1. Decide on the End Goal
Before you even start designing the button, ask yourself: what do I want them to do next?
Do you want them to download a white paper? Order a product? Subscribe to your YouTube? Get in touch for more information?
Deciding on the end goal will not only help to design the button, but decide on the text used as well. Essentially, action verbs should be used, such as:
- Buy
- Call
- Contact
- Join
- Shop
- Sign Up
- Try
- Visit
The list goes on, and even though “free” isn’t an action verb, it can still work in some cases. Above all, it should address the visitor directly. For example, rather than using a button that says “checkout” or “ free trial”, use “buy now” or “try it for free today” instead: this will make your call-to-action button feel like a personal one, as well as create a sense of urgency.
2. Size and Shape
If you want your visitors to take action, the button calling them needs to be super visible and easy to spot in an instant.
With that in mind, the button should be big enough to grab attention, but still be in proportion to the rest of the elements on the page. Go too big, and it will start to make the page look quite unbalanced and won’t be easy on the visitors eye – if anything, too big will just distract them.
In addition, the shape you decide should align with your overall branding – so consider whether rounded or square buttons will look best.
3. Colour
The colour of your call-to-action button matters. A lot.
So you should give careful thought when it comes to deciding on the colour of your button.
Studies suggest green and orange tend to perform best, due to strong cultural and psychological associations.
However, colour psychology should be considered when choosing your initial colour scheme. So ultimately, the colour will depend on your website design overall and needs to contrast well so it captures attention. For example, you wouldn’t want an orange button on an orange background – obviously!
As such, contrast is more important than colour here: even a black call-to-action button on a white website would entice visitors as it stands out from the other elements.
Generally speaking, primary call-to-actions work best with your primary brand colour scheme and secondary call-to-actions work well with secondary colour palettes. Plus it helps the user distinguish between the two types of actions.
4. Typography
The font, size and letter spacing of the text play an important role in creating an easy reading experience.
Typically, using all uppercase letters is a great way to draw attention to the next, but if you don’t like that, then Try Capitalising Each Word. Either of these ways are effective but only using lowercase is not.
On the other hand, I’d recommend avoiding using any script fonts. Yes they look fancy, but call-to-actions need to be clear and easy to read: sans serif fonts work best.
5. Make it Look Clickable
Sometimes, call-to-action buttons get lost because visitors are not aware that they can click on it.
In web design, buttons are much more than a design feature: they’re an interactive tool that users expect when navigating through websites.
Therefore, it’s important that the call-to-action button actually looks clickable. A good way to do this is by using ornaments like shadows, highlights and other small effects that gives the button a 3D appearance and makes it more enticing to click. Don’t do too much though – be subtle and keep it simple.
6. Placement
Once your call-to-action button has been designed you need to nail down where to place it within the page.
As the final step, deciding on its positioning will depend on how the page is layed out. In general, the button should be placed above the fold, i.e. where the visitors look first without scrolling (usually towards the top of the page).
Regardless of where you place your button, make sure you surround it with blank space and keep it aware from the other elements to give it visual prominence and draw more attention towards it.
The Takeaway
The key thing to take away from each of these steps is that detail really does matter.
Hopefully, you should now be able to design call-to-action buttons for your website with a fresh perspective and create ones that encourage your visitors to take the next steps you want them to take.
Want to know more? Contact us today.
Please take a look at our Web Design services in the meantime.
You may also like:
