Buttons are a widely contested web design element in our office and that’s often because there’s no real one-way, shape, size or colour set in stone, no button-almighty. Despite no universal set way of designing buttons for your site, there are some key aspects to consider when creating an impactful call to action button.
Size, shape & colour
With the size, shape & colour of call to action buttons, one rule of thumb comes to mind; K.I.S.S. For all you abbreviation noobs out these, this stands for Keep It Simple, Stupid. You want to be looking at creating the ideal balance between making your button stand out whilst keeping it simple enough for the user to recognise and use.
This also applies to what you’ve placed around your buttons – Open Mile found that by reducing clutter around their buttons, their conversion rate increased some 232%. We’ll talk more about positioning of buttons in a bit, but size and shape are important elements also.
You don’t often find too much variation in the shape of buttons – usually rectangular, sometimes circular – but subtle variations in shape can both reflect your branding and the urgency of the button. Squared corners can give a more traditional feel to your button whilst circular shaped buttons are often view as more badge-like, more “let’s get going”.
Colour & icons can have a large impact in the increased conversion % you may find from using buttons. Using orange buttons produced a 32.5% increase for SAP, whilst Halzberg Diamonds found a 23% increase in clicks through using an arrow icon within their button.
Generally, you want to look at using a colour which both integrates well with your site whilst contrasting with your branding. Any icons you feel like using must also serve a purpose, don’t just throw in an icon which doesn’t make sense – think K.I.S.S.
Call to Action Text
You can make the best-looking call to action (CTA) button but without some powerful imperatives behind it, you’re potentially wasting the opportunity for maximised conversions.
Buttons are arguably the window to a potential sale or lead, directing your users through the path of conversion. Which would seem more compelling to you: “Start” or “Start your free trial today”? Tell the user directly what you want they to do and any benefits they’ll get from doing it and you’ll take your CTAs up a notch. Starting with a verb such as “Enquire,” “Download,” “Sign-Up,” immediately places an action at the forefront of the user’s mind and can help capture those all-important conversions. '
Positioning of buttons on a page need to make sense, they need to follow the organic flow of the site whilst being obvious to the user.
Studies by KISSmetrics and Convert & Grow found that you can expect a 0.5-1.5% conversion rate from CTA buttons placed generically and at the bottom of posts, whereas using the Homepage increases this to 10-25%; for CTAs used within a video, this have been found to increase clicks by 380% compared to when placed in a standard side-bar.
Overall, the placement of CTA buttons needs to make sense in terms of guiding the user through the conversion path you wish them to take. Using compelling copy, interactivity and clever navigation can help you lead users to the buttons featured below the fold.
To summarise, here are the key CTA button takeaways for you:
- There’s no set button design – just keep it simple
- Use shapes which make sense & relate to your brand image
- Use contrasting colours to your brand to help your CTAs stick out
- Reduce clutter around the button
- Create action-focused CTA text, using verbs
- Think carefully about placement in relation to the flow of your site
- Use copy, interaction & navigation to lead users to your CTA button
Resources: Protocol 80