A button is one of the easiest, most effective calls to action on a website. Bold and big buttons, prominently displayed and properly labeled, will help your users know at a glance where to click to get what they need.
So how can you ensure that they convert visitors to customers?
6 Top Tips for Creating Successful Big Buttons
Here’s our top design tips!
1. 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.
2. Surround buttons with plenty of white space
Put room around buttons in your design; let them breathe. Keeping them away from other elements makes them easier to see and use.
3. Use a contrasting color
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.
4. 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.
5. Tell users explicitly what a button will do
Instead of the generic “Submit” or “Send,” try labeling them with more specific detail. In addition, 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”.
6. Make it clear that it is clickable/tapable
If your design is flat (big blocks of solid color), make sure that they 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.”
In conclusion, call to action buttons drive users to do what you want them to do. Make sure they’re big, bright, well-placed, and obvious.
Check out our very own Andrea (Andi) Ferguson presenting on this topic at WordCamp.
(Full credit to WPMU for the headline… and of course Sir Mix-a-Lot for the inspiration.)
Check out all our blog posts about successful website design!
