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…
Email Signup
Whitepaper Download
More Information
…become more action oriented when the verb is added…
Sign Up for Email Updates
Download the Whitepaper
Learn More
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.
By signing up you agree to our Privacy Policy.
Very interesting post. Thank you for sharing. Trying to get a website up and functioning properly has been so stressful, but this is totally helpful. Thanks
I am an unabashed Cresto Fanboy. Thank you, Andy!
Hi Andy,
Jessica (Roberts) and I are designing a lot of buttons these days for our animal shelter project and this post has been very helpful, as always. It seems that points 2 & 3 conflict a bit though.
.2 says a button should pass the WYLTIWLT test – I got that. However, .3 says that buttons should be 2nd person. That fails the WYLTIWLT test in this instance:
Button: Find My Pet (2nd Person)
Would you like to Find My Pet (fail)
I would like Find My Pet (pass)
If the button was “Find A Pet” it passes both, but isn’t second person as .3 recommends.
Thoughts?
Thanks,
Robert
This is incredibly helpful. Thank you! 🙂
Thanks for this article and really good ideas inside !
Do you have any tips on webinar sign-up buttons?
Hallo,
How about call-to-action buttons on mobile site version? In long content posts the reader does not have a full view of the website design and A call to action could suffer to be a little bit hidden.
What do u think Of a sticky cta?
Cheers
I was so desperate for a blueprint to create colorful buttons. This is boss. Thanks for your delightful tactics.
Another reason for html buttons, instead of graphics–When smart phones scale down an email or page to fit in the viewport, they will often “scale up” text so that it is still readable. So a graphic button will be scaled down, and even if the button in total is large enough to be clicked, if there is too much text on it, it will be difficult to read. But an html button will be scaled back up so that the text is readable, and a properly coded button will “grow” along with it.
Andy on a related note, I think this blog post could be used as a guide on how to write and present an article. Fabulously well done, easy to read, and authoritative. Great job!
Great input! I hadn’t thought of the mobile implications for buttons styles …and thank you for the kind words. This means a lot coming from you, Tom!
Hey Andy,
Excellent info-graphic post. I gonna try this guide, hope it’ll help me.
-Mustafa
Andy,
Do you think “Choose My Tour ” button ongg the main page would work?
The website is devoted to private walking tours.
That sounds like a good button label. “Start My Walking Adventure” sounds like it might be even more fun. 🙂
Hi
I like your website, really helped me a lot, love all articles but I have some query related to custom and designing, can you share your Mail id or Skype please. Thanks in Advance
Great article! One small pet-peeve: Why does everyone call it “alt tag?” It’s really “alt text.” In fact, “Alt” is an attribute inside the “IMG” tag.
Great insights Andy. These are all really easy changes to help with conversions. We have been adding lots of CTA’s to our site/landing pages and will definitely use this info. Happy holidays.
Thanks, Aaron. I hope these tips make a huge difference for you guys. Happy Holidays and here’s to high conversion rates in 2015!
Andy this is the best stuff about design a cta button I have ever come across. You mentioned in the blog post that if you are using “blue” then you can use any warmer color like “orange” to make the CTA stand out. Blue is used by many brands specially social media along-with white, so don’t you think blue is also good choice for the CTAs for a landing with with while and blue only in the color scheme?
Thanks for the kind words, Hamayon. Actually, if the website is all blues and grays, you’ll be able to easily make your CTAs more prominent by using a contrasting (or even complementary) color like orange. Use anything but blue for those buttons!
Awesome post Andy! I’ve seen better results with your copy suggestions. Happy to hear the recommendation on color—this should be required reading for all the trendy ghost buttons.
Some time ago Zebraa made a simple test of flat vs 3D buttons: http://interruptions.net/private/misc/Zebraa-Become_a_hero.png (this is an illustrative non-clickable screenshot). People clicked a 3D button 1.5 times more frequently than they clicked a flat one. So my general recommendation is to use 3D buttons instead of flat. I think you may test this too and then add it as the eight tip. 🙂
Very good insights in here Andy. Thanks and Happy Holidays!
Happy Holidays to you, Joey! Hope all is well in business and at home…
Love it Andy!
I came over here after I heard your rocking interview at the Branding Summit.
Thank you for breaking down button design to this granular level. I’m just working on new products to be released next year and I will definitely implement your advice.
Best regards,
Jan
Thanks, Jan. All the little things add up to a big difference! Let me know how it goes…
Another fantastic tip
Great tips as always, Andy. Gonna review ALL the button language on our site again today! Thanks.
Yes, review them all! You used to have first person perspective on your homepage CTA (“Start MY Guided Demo”) but it looks like you changed it. I see now it passes the WYLTIWLT test…
This is fantastic – I agree on all fronts. 🙂
Thank you, Shellie. If you like it, then I know it’s good. If you’d like to add anything to it (maybe a quote?) just let us know. 🙂
Thank you for your insight!