Some market-watchers say hemlines fall when the economic times are tough. I’m no fashionista, but I can tell you that in e-commerce, when times get tough, add-to-cart buttons get bigger.
There’s good reason for it: Bigger buttons work. The larger and more eye-catching they are, the more responsive Web visitors will be. That means higher conversion rates, lower shopping cart abandonment, more revenue.
When you supersize your add-to-cart and checkout buttons, the benefit goes straight to your bottom line. Other than fixing outright functionality errors, such as security alerts or a crashing site, no other Website improvement yields so high a return. And button redesign is an easier project: limited in scope and relatively inexpensive.
Don’t make me think
At the dawn of e-commerce, most sites sported little, default gray HTML buttons. But Web shoppers are fickle, impatient, and easily confused. Even a good Web page typically loses 20% to 30% of all the people who view it. Online shoppers need clear, strong pages that can be grasped by scanning – not reading – and navigated quickly and intuitively.
If you want people to add things to the cart and check out, you have to ask for the order. And loudly. Little gray buttons no longer cut it.
In the Website usability book Don’t Make Me Think, author Steve Krug says, “When I look at a web page it should be self-evident. Obvious. Self-explanatory. I should be able to ‘get it’ – what it is and how to use it – without expending any effort thinking about it.”
Here are Krug’s Three Laws of Usability:
- Don’t make me think.
- It doesn’t matter how many times I click as long as each click is a mindless unambiguous choice.
- Get rid of half the words on each page, then get rid of half of what’s left.
Meet BOB, the Big Orange Button
Business intelligence solution provider SAP BusinessObjects worked with Vancouver-based firm WiderFunnel Marketing to improve the performance of a free-trial software download page. The redesigned landing page used tried and true DM tactics (strong call to action, benefits) but its real centerpiece was “BOB,” the big orange button that shouted “Download Now.”
Comparing BOB to the subtle blue text link on the control group was like comparing a billboard to a Post-it note. In the A/B test, documented in a Marketing Sherpa case study, the redesign generated a stunning 32.5% more downloads than the control.
Who among us wouldn’t love a 32.5% lift for our key metrics, driven by nothing but clear, powerful, unambiguous design?
I have obtained conversion rate lifts ranging from 8% to 18%, by redesigning add-to-cart and checkout buttons on a variety of e-commerce Websites.
Looking for design inspiration? Some of the biggest, most powerful buttons I’ve seen are on Buy.com, add-to-cart and checkout buttons truly dwarf the competition. Other e-commerce sites using big, best-of-breed buttons are L.L. Bean, Zappos, Overstock, Orvis, CafePress, Netflix, and Amazon.
Some prominent retailers have yet to drink the “bigger buttons are better” Kool-aid: Gap and Anthropologie, for instance, display teensy, subtly-colored buttons that look stylish but, my gut tells me, leave money on the table.
Recipe for the perfect button
What makes a perfect button? The desired action – add to cart, check out, submit order – should be the clearest, most attractive navigational element of the page. Here’s my ideal button design:
- Big. As online onversion and usability guru Amy Africa puts it, “Make it twice as big as your graphic designer’s version of big.”
- Bold and very legible text
- 3-D looking
- Colorful. I like green or blue, encouraging colors associated with “go.” and with navigation. Red can be effective too – but don’t use the same red you use for error messages and alerts. You want to encourage customers through the cart, not scare them
- Forward (right) arrow to indicate successful forward movement toward the goal
Drive visitors toward the goal
These all-important buttons shouldn’t have to battle for attention against less important choices, like back, edit, or update. Subordinate options should feature back (left) arrows, and should be rendered in that boring gray hue we were talking about earlier.
Picture an airport check-in kiosk: Keep selecting friendly green buttons on the lower right hand of the page, and it’s all good. You breeze through, focused on that same location on each page, touching “continue” each time.
The kiosk’s UI trains you to see that path as desirable, while the gray buttons on the lower left (“back,” “change seats,” “check bags,” etc.) are detours – and potential trouble.
In May at the ACCM conference in New Orleans, Jay Greenberg, e-commerce director at Spencer’s Gifts, told attendees that making simple color selections boosted Spencer’s sales conversions dramatically. Sensing that his control button color (yellow) was overused and losing impact, Greenberg performed real-time multivariate tests using Google Website Optimizer. Of a handful of colors tested, he found that a dramatic blue add-to-cart button upped conversion by 20%.
In further tests of the shopping cart, the Spencer’s team gained another 7% lift from the winning combo of a bright red Checkout button paired with a subtle, background-color “continue shopping” button.
These are just a few examples of the gains to be had when you optimize your buttons. View your cart and checkout process as a machine. Give your visitors bright, clear controls – a dashboard – to combat their natural confusion, reluctance and impatience.
Give them big, strong buttons – the bigger the better.
Tom Funk ([email protected]) is vice president of marketing at Website design/development firm Timberline Interactive.