Success or failure comes down to a single click. And getting that website click (or touchscreen tap) depends on a lot of little factors. One small factor that makes a big difference is the design of the button itself.
They’re everywhere, on emails, home pages, landing pages, contact forms and ecommerce carts. Most of the 4+ billion pages on the Internet have navigation buttons. That’s a lot of buttons.
Designers don’t always agree on how to design a button for a website, but there is a lot of research out there. Here are seven ways to design a button for your site…
Note: This article is about specific call to action buttons, rather than general website navigation, clickable icons or in-text links. Not all that is clickable is a button!
For starters, every click of every button is a metaphor for an action. So buttons need action words. Begin with a verb. That little word explicitly tells the visitor what action they’re taking, what happens when the click.
So these buttons without verbs…
…become more action oriented when the verb is added…
Sign Up for Email Updates
Download the Whitepaper
Tip: Use an action word in every button.
Now that you’ve got your action word, see if your button passes the next test. Add these phrases before the text of your button and see if the button label still makes sense…
Would you like to [button text]?
I would like to [button text].
In other words, ask yourself if the button text could be read in both the voice of the website and the voice of the visitor.
If your button text is “learn more,” you would say “Would you like to learn more?” and “I would like to learn more.” Since it works both ways, this button passes the test.
If your button text is “See Your Report,” you would say “Would you like to see your report?” and “I would like to see your report.” Since the second version doesn’t fit the voice of the visitor, this doesn’t pass the test.
It’s a way to quickly make sure that each button begins with an action word and works in the voice of both the marketer and the visitor. By the way, every action-word button on Facebook passes this test!
This approach was suggested by Jonathan Richards, who created an acronym for it, shortening “Would you like to, I would like to” to WYLTIWLT, pronounced “Wilty Wilt.” There’s your buzz word for the day!
Tip: Design your buttons with a neutral point-of-view using the WYLTIWLT test.
Using a pronoun is the alternative to the neutral point-of-view. But use pronouns with caution. Tim Paige of Lead Pages tested first-person and second-person language, designing two call to action buttons. Here’s what he found.
The button with first-person perspective (Create My Account) was clicked by 24% more visitors than the buttons with the second-person perspective (Create Your Account). Point-of-view matters!
Tim suggests that the first-person labels on buttons perform better because they speak from the perspective of the action taker, the person holding the mouse or touching the screen.
Eugene Schwartz once said that you should ‘enter the conversation the prospect is having in their own mind’ — so if they’re looking at your call to action, what would they say they want to do? ‘I want to…’
Tim Paige, Lead Pages
Tip: Use second-person pronouns in headlines and text (you, yours) but first-person pronouns in buttons (me, my).
Our eyes are constantly scanning for pattern interrupters. Anything that contrasts with its surroundings automatically gets our attention. It’s fundamental to the biology of the human eye and brain and it’s called the Von Restorff Effect.
Button designers can take advantage of this by using contrasting (or complimentary) colors to draw attention to the desired action. On a blue web design with mostly cool colors, a warm colored element, such as an orange button, will be visually prominent.
Color is a great way to design buttons that stand out, but it’s not the only way. You can also use size, spacing and the eyes of people in nearby photography. The important thing is to make sure the desired action is high up in the visual hierarchy of the page.
The call to action should be the FIRST THING TO STAND OUT on any piece of marketing. No one likes wasting time scanning a page to find their logical next step. Leverage the Clockwork Conversion Color Model four physiology points to ensure your primary CTA not only stands out, but that your users’ eyes will magnetically be drawn to it.
Angie Schottmuller, Three Deep Marketing
Tip: Design buttons with colors that contrast with their surroundings, and don’t use that color for anything but the desired action.
Not everyone has a mouse in hand. Buttons need to be designed for phone and tablet touchscreens, which means tap-able fingertip-sized buttons.
Apple famously recommends a minimum button size of 44 x 44 pixels, but the research by the MIT Touch Lab shows that the average index finger is 45 x 57 pixels. That’s because your fingertips aren’t round. They’re oval shaped.
Thumbs are a bit bigger. If you expect your button to be tapped by thumbs (if it’s in the bottom corner of a tablet-based app, for example) make it wider: 45 x 72 pixels. That’s the “rule of thumbs” …sorry, I couldn’t resist the pun!
Tip: Design a touch-friendly button that is at around 45 pixels by 60 pixels.
Bonus Tip: When designing for little screens (especially emails and mobile-friendly landing pages), be careful where you put the call to action button. Some parts of your design are right under the visitors thumb. Others are harder to reach.
Source: Luke Wroblewski’s handy guide: Optimizing for Touch Across Devices
Consider adding choice. Add a secondary link or lower-contrast button next to the call to action button that presents a negative result of not acting. The button text would communicate “I don’t want the good thing you promise on the other button”. This changes the decision from “Do I press the button?” to “Which button do I press?”
Brian Massey, Conversion Scientist
Some actions are big commitments. Others, not so much. Similarly, some buttons imply bigger commitments than others. They trigger different psychology and more concerns.
If the button’s call to action infers the visitors is about to spend time or money, visitors may be less likely to click.
Litmus tested button language for two calls to action, “Start Testing” and “Read our overview.” They discovered that the second version got 124% more clicks.
The difference is the commitment. “Start testing” tells the visitor that clicking the button is the beginning of potentially long process involving work. But “Read our overview” indicates a smaller investment of time.
Similarly, “shop now” sounds like an enjoyable stroll through a product catalog. “Buy now” sounds like getting out a wallet.
We’ve tested several variations of the ‘low commitment performs better’ hypothesis—on blog posts, in emails, and directly on our pricing and sign-up page. What we’ve found is that low commitment almost always increases clicks, but isn’t always better for the bottom line—so choose your success metrics wisely. While a specific button treatment may result in more clicks (a standard goal for testing buttons in an email), a better measure of success for other experiments may be visits, sign ups, conversions or revenue.
Justine Jordan, Litmus
Tip: Lower the level of commitment in the language on your buttons.
The word “button” usually means a graphical image, just like “link” usually means text. However, smart designers are making buttons that look like images, but are built like links.
Graphical buttons have problems…
They’re slower to load
They aren’t accessible to visitors with disabilities
They may not be displayed in email. Many email clients don’t display images until “display images” is clicked.
Code-based buttons have none of these problems. Since you can design lovely buttons using HTML and CSS, I can’t think of a single reason to make your button an image.
Buttons made from HTML/CSS are sometimes called “bulletproof buttons” since they render everywhere, including emails. If your team doesn’t have time to help, no worries. Campaign Monitor created a tool that makes it easy for almost anyone to create bulletproof buttons.
If you already have graphical buttons and you’re having trouble changing them, at least make sure the “alt” tag includes the button label. That way it will be visible in emails even if the subscriber doesn’t click to download images.
Tip: Design a bulletproof button using HTML and CSS, especially if it’s for email.
Getting traffic is only half the battle; getting visitors to act is the other half. The click is the moment of truth and the button itself makes a huge difference. The little things can make a difference.
So rather than pushing for more traffic, take a look at your buttons. Maybe a few small design or labeling changes would make a big difference.