Call to Action Buttons: Top Tactics for Better Results
Getting just a few more of your site visitors to take some action can dramatically affect your bottom line.
My interview with Bryan Eisenberg yielded so many tips and tactics, I decided to break the interview into two parts so that you, the reader, see every useful idea. Part 1 addresses wording, size, shape, icons and style of CTA buttons.
Bryan is one of the undisputed thought leaders in Web Analytics. He speaks at Search Engine Strategies, ad:tech, the DMA and Shop.org among other trade shows. He co-authored a few books on this subject as well, including:
Wording for Buttons: Use Command Verbs
Larry Chase: I notice on your list of eight variables for call-to-action buttons that wording is No. 1. Let's start there.
Bryan Eisenberg: Wording includes everything from simple things like "buy now" or "add to shopping cart" to more specific wording if you're in the B2B vertical, such as "Download This Whitepaper."
The wording is very critical. Several factors matter within wording, such as how many words and the construction of the words. I've seen buttons that have had as many as 7 words on them.
LC: Are there differences between B2B and B2C?
BE: No. The construction of the words would be the same. Every button is meant to make people take an action. You start with the imperative verb of the action you want people to take.
In a B2C environment, the options are much more limited. You're basically adding to a cart or bag and checking out or continuing to shop. You might subscribe to a newsletter, but the number of options in a retail environment is much smaller, and the variation is much thinner.
In B2B, on the other hand, you have "View Demo," "Subscribe," "Read Whitepaper," "Share Specs with Team Members" and so on.
The language on the button is most often best constructed by using an imperative verb, a command verb, with implied benefits. So, you could say "Start Your Free Trial Today."
Mozilla.org puts specifications on its Firefox [browser] download buttons. If someone's going to download a whitepaper, the Firefox CTA button will display the file size of that whitepaper, or which operating system is required. It tells me exactly what I'm getting.
LC: That increases response rates?
BE: Yes, because it manages expectations. People don't read, but they're careful before they click.
LC: Is it possible to be too didactic with wording?
BE: That's why you want to test it. One client tested a button saying "Buy Now" versus "Add to Cart." "Buy Now" increased conversions, but "Add to Cart" increased average order values because shoppers didn't feel pressured to make a commitment.
That's why you have to make sure you're monitoring the right metrics whenever you're testing.
Button Size: Bigger is Better But Don't Look Like a Banner
LC: What about size? Generally, people will think "bigger" gets more attention and increases response rates, whether it's type size or size of the actual button.
BE: Often, the CTA is actually too small relative to all the other elements on the page.
One of the keys to success with the conversion trinity is that the CTA has to be obvious. Shoppers have to know what to do next.
So, go big. Go extremely big so they can't miss it, but avoid making it so big that it looks like a banner. People won't see it due to banner blindness. We see this more in B2B than B2C.
LC: You mentioned the conversion trinity. What is that?
BE: The conversion trinity is my process for immediately evaluating landing pages and web pages on the three most important factors: Relevance, Value and Call to Action.
Button Shapes: What Pops?
LC: Do rectangles or ovals make better CTA button shapes?
BE: One of the secrets we learned about having great call-to-action buttons, and this is something you might not even notice, is using irregular shapes, neither rectangular nor oval.
Amazon's button uses a combination oval and rectangle. The left side of the button is rounded like an oval, and on the right side of the button, it's rectangular.
LC: They use the "unusualness" as an eye catcher.
BE: Exactly. So, we can see where people will add a larger checkmark-looking thing to change the shape of the button.
LC: Are there other options for button shapes?
BE: You probably don't want to go pure round. It might look more like a graphical element than a button. People now have some expectations that a button will look somewhat rectangular.
Icons: Pictographic Calls to Action
BE: Besides changing the button shape, you can add an icon to the button to change its appearance. Amazon puts a shopping cart icon on the rounded edge on the left-hand side, and the button wording goes on the right side.
You can also add a "+" sign, an arrow or a lock on a checkout button, or add an icon that looks like a download arrow on the button.
Mozilla puts the Firefox icon on its download call to action button. Bed Bath & Beyond places a shopping-cart icon on the right-hand side of its "Add to Cart" icon, which makes it stand out from "Add to Registry" and "Add to Wish List" buttons next to it.
Button Style: 'Stylin' for Dollars'
LC: Define "style" for CTA purposes.
BE: "Style" is whether the button is flat, shadowed or beveled. I would avoid flat-type buttons. You want the button graphic to look like a real, clickable button. This marks a gradual change in button design.
We've seen it on the Amazon button, which has gone from flatter with a little shadowing to a graphic that's much more beveled. I believe Web 2.0 is pushing people to use cleaner buttons so it looks like people are actually hitting buttons.
This is going to become increasingly important with touch-screen devices like the iPad, which add the sense of tactile and touch to the navigation experience.
LC: "Fake tactile."
BE: You can trick the brain into thinking something has greater or lesser depth based on HMTL index values. Moving forward in time, it will be interesting to see what people do with button styles.
LC: Speaking of style, when you click on a button and get a visual confirmation, like the button darkens or it grays out, does that help conversion rates or qualifying leads?
Note to Reader: Look for More Tips, Tactics and Insights on CTA Buttons in Part 2 of this Interview
In Part 2, Bryan Eisenberg and I discuss button color, location, readability issues and lessons from Amazon.
If you're not a subscriber to this newsletter, sign up today to make sure you get the rest of this interview as soon as it's released.
Thanks to Sr. Editor Janet Roberts for transcribing and editing this interview.
Bryan Eisenberg is a pioneer in online marketing, improving online conversion rates, Persuasion Architecture and persona marketing. He blogs at bryaneisenberg.com and is a regular keynote speaker at leading industry events.
Bryan recommends reading "107 Add to Cart Buttons of the Top Online Retailers," a 2007 post on the Get Elastic Ecommerce blog, for more information and design inspiration.