We Like Big Buttons and We Cannot Lie

A button is one of the easiest, most effective calls to action on a website. Despite opens in a new windowexperiments to the contrary, a big, bold button, prominently displayed and properly labeled, will help your users know at a glance where to click to get what they need.

So how can we ensure that buttons convert visitors to customers? Here are some tips:

Make buttons big 

Size typically indicates importance in web design, so make call-to-action buttons large enough to be easily seen and used. As opens in a new windowGoogle says,”The average adult finger pad size is about 10mm wide (a bit less than half an inch),” so tap targets–links and buttons–should be larger than that, especially on mobile devices. Don’t punish users for not having pencil-shaped fingers.

Surround buttons with plenty of white space 

Put room around buttons in your design; let them breathe. Keeping buttons away from other elements makes them easier to see and use.

Use a contrasting color for buttons

Pick a bright, different color from outside your palette for website buttons. A different color draws the eye and trains users to know that when they see that color on your website, they’re being asked to do something important. What color works best? Plenty of research supports opens in a new windoworange and opens in a new windowred for highest conversions. Other research says that opens in a new windowthe specific color doesn’t matter as long as it contrasts. We suggest that any color will do as long as it’s bright and doesn’t blend in with the rest of your website design.

Put buttons in prominent places

As obvious as this sounds, we’ve seen plenty of sites with buttons buried at the bottom. Sometimes this is appropriate (for example, if a user has to read the preceding content before understanding the button), but in general keep buttons in obvious places like the header, sidebar, hero image/slider, or near the top of your page content.

Tell users explicitly what a button will do 

Instead of the generic “Submit” or “Send,” try labeling buttons with more specific detail. Use phrases that involve users personally and/or create a sense of urgency. Effective examples include “Sign Me Up,” “Donate Now,” “Buy the Book,” and “Get a Risk-Free Trial”.

Make it clear that a button is clickable/tappable 

If your design is flat (big blocks of solid color), make sure that buttons change when hovered or clicked–e.g., different color, different transparency, slight shift in position. Or use opens in a new windowmaterial design and put a slight drop shadow on buttons so they appear “raised.”

 

Call to action buttons drive users to do what you want them to do. Make sure they’re big, bright, well-placed, and obvious.

(Full credit to opens in a new windowWPMU for the headline…and of course Sir Mix-a-Lot for the inspiration.)