There are no hard and fast rules for successful button design. It will usually depend on your goal and the context of the button on the page – but we have identified a few elements that need considering.
It’s only through testing and research that we’ve learnt what works for individual clients and their audiences, so here are some suggestions to really boost your conversion rates.
A button’s shape can influence the way people think before they click. Make sure its shape is aligned with the overall theme and ‘feel’ of your page.
For example a rounded shape is perceived as more friendly, and is easier on the brain – as cognitive visual expert Jürg Nänni explains, “A rectangle with sharp edges takes ..more cognitive visible effort than ..an ellipse of the same size”. You’ll find that rounded shapes are popular in customer service orientated sites, like personal banking and insurance, where trust is needed before people click.
(Barclays Personal Banking)
Getting the size of a button right for your page is crucial for user experience. It’s true that if a button is too small it might go unnoticed but also don’t forget users on mobile devices trying to navigate with their thumb or finger. Similarly a button can be so big that it overpowers the rest of the page, or looks more like a design element than a button.
Firefox’s download button is on the larger side – it is after all the main reason people visit the site. The site itself is plainly styled; there’s nothing but grey and no colour apart from the button, which means it fits in well and doesn’t overwhelm the overall balance of the page.
(Firefox download page)
One of the strongest and most persuasive visual cues is colour. It’s well known that different colours elicit different emotional responses, and we’ve also found that the colour of a call to action button can greatly affect click through rates.
In a recent test we undertook for a client, we saw a 52% increase in clicks when testing the green button against the blue button.
As a general rule the “squint test” is really useful to see if a colour is prominent enough; stand a meter or two back from your screen and then squint. If the button appears to stand out from the background you’re on the right track. Try it now with this button from the Burger King website:
(Burger King homepage)
4. The words
The words on a button describe the next step in the user journey, so they’re pretty important. A well written and enticing call to action will definitely increase conversions.
This example from an RSPB appeal email is descriptive and gives a sense of urgency. Someone who reads this button will know exactly what happens when they click.
(RSPB appeal email)
Decisions should not be based on opinion but on performance in the real world, something which can only be ascertained by testing.
Try A/B testing between two different types of buttons, or multivariate testing with a variety of different buttons to see which works best.
A button’s shape, size, colour and copy are all proven to affect conversion rates and will ultimately decide how effective your landing page or email is.
Remember that the design of your button is crucial to conversions; put some extra thought into it and make sure it’s aligned with the objectives of your page. It’s not a one-size-fits-all approach and some of these ideas will require testing before you can make an informed decision.
Think about the last time you saw a call to action button and followed through as a customer. What do you think worked particularly well?
Jason is the Founder and Managing Director of Copper. He’s an Australian by birth but now lives in London with his wife and 4-year-old son.