Latest posts by Andrea Ferguson (see all)
- Quick Thoughts on Where to Put Your Sidebar (or, Ode to the Sidebar) - March 7, 2017
- The Return of the Beautiful Web - March 5, 2017
- Creating Solutions Beyond the Obvious: Ideation - February 1, 2017
A button is one of the easiest, most effective calls to action on a website. Despite experiments 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 Google 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 orange and red for highest conversions. Other research says that the 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 material 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 WPMU for the headline…and of course Sir Mix-a-Lot for the inspiration.)