Creating compelling call-to-action buttons
Small call-to-action buttons are easily missed when youโre scrolling through a web page. Buttons need to be big with lots of white space around them to really make them shine. For a main call-to-action, Iโd aim for at least 230 pixels (px) wide by 50px high.
You might be tempted to use one of your brand colours or an understated colour for your call-to-action buttons. But your buttons need to be blatant, and should contrast with the rest of your site.
No single colour works best for everyone. Based on numerous studies, red buttons have been touted as more powerful than green, but it still needs to tie in with your website colours. Itโs very simple to test, so experiment! See which gives you a higher conversion rate. Try reds, greens and the contrasting spectrum colours to your logo.
Adding a descriptive icon within the button can be effective in reinforcing your call-to-action. Icons such as a right arrow can signify โNextโ, a down arrow, โDownloadโ and a magnifying glass, โSearchโ.
Generally, Iโd pair the icon and compelling copy to reinforce the message, leaving nothing open to interpretation. A download icon on its own will not cause the same reaction to the same icon alongside the copy, โDownload Now โ FREE!โ
Want more articles like this? Check out the website design section.
Aim to place your most crucial button above the fold (i.e. high enough on the screen that the reader doesnโt need to scroll down before they see it).
Like text links, your call-to-action buttons shouldnโt be styled like anything else on the page. Again, they need to be dead obvious.
If youโre looking for a button in the true sense of the word, think about adding depth and texture to its design. You could also have the button look like itโs pressed when you hover the mouse over it.
You might find you need or want more than one button per page. Thatโs fine, but be sure to use a hierarchy so your reader can instantly identify which button is the most important. Remember, you donโt want to make them think.
Ultimately, this is what will make or break your buttons. Everything else is an influence.
Think of the copy on your button as a command. โTry it FREEโ, โDownload your FREE copyโ and โSign up NOWโ are just three examples of straight-forward commands that leave nothing to the imagination. This is what you need to aim for.
Like the colours, test to see which button is creating a higher conversion rate.
What changes have you made to your call-to-action buttons to create a higher conversion rate? What didnโt work?
Comments