Better Buttons Part 1: Set the Right Expectations

This guest post is by the Web Marketing Ninja.

Almost everything I read, see, or hear about buttons (the web version) is all about color, size, location, and contrast. Do any research on this topic, and you’ll come across statements like these:

• “Just make the button bigger.”
• “Orange buttons always convert better.”
• “Get your buttons above the fold.”
• “You need to use contrast and responsive design with you buttons.”
• “Make sure your button’s at the bottom of the page, too.”

To a degree, that’s all relevant (although I still can’t explain the orange button mystery!). But there’s one aspect of buttons that I never read about, and it’s something I think is just as important—maybe more important.

And that’s the text you use on your buttons.

Sure, design and location will get your button noticed, but it’s the text that drives that all-important user action.

Button breakdown

Let’s first fly a little left of center a look at what a button is … in the real world.

Excluding the really real button—the fashion button—a button is something you interact with (that is, press) in order to make something happen. And we usually have an expectation about what that “something” will be.

There are three key points here: interaction, expectation, and response.

A button’s color, size, and location might suggest to a users what’s going to happen (“Don’t press the red button!”) but it’s either a symbol or words that give users the greatest indication of what will happen when they press a button. And the same goes for buttons on the web.

So let’s look at each of these stages in a button-press.

• Interaction: In the web world, interaction involves a mouse click, a tap (on a tablet or phone), or a key stroke. The interaction is the easiest part of the process to wrap your head around.
• Expectation: You’ve asked your user to do something and yay they have…  but what have you set in the way of expectations?
• Response: The interaction initiates a response. That response might be to show a page, enlarge an image, or something else.

Now, let’s look at a good web example. On your sales page, you have a nice, clear, above-the-fold, and—for the sake of it—orange button. The text on the button clearly reads Buy now.  A user clicks on the button, and the next page they see is the Checkout page.

• Interaction = click
• Expectation = to order
• Response = checkout

Tick, tick, and tick! We have a happy customer, and a happy blogger.

Now, let’s look at a not-so-good example. On your sales page, you have a nice, clear, above-the-fold, and—for the sake of it—orange button. The text on the button clearly reads Download now. A user clicks on the button, and the next page they see is the Checkout page.

• Interaction: click
• Expectation: to download
• Response: checkout

Here, the user is clicking a Download button and getting a “pay me” response. That’s bad.

What’s that? More people will click on a Download button? That’s true. I guarantee that if you put a Download button on your page, rather than an Order Now button, you’re going to get more clicks. But why stop there? Make it a Free Download button, and watch your clicks go through the roof!

But what happens next?  When the user’s expectation about their interaction with a button isn’t met by an appropriate response, fear will strike and they’ll bail.  After all, a lot of users are just looking for an excuse to leave.

But that’s not all. There’s a name for this kind of tactic: it’s called “bait and switch.” In many countries it’s actually illegal, but regardless of where you’re located, it undermines your sales process. You shouldn’t do it. But if you do do it, and you do it before you’ve got the cash from your customer, you’re only robbing yourself.

Button text in action

Let’s look at a real-world example: let’s see what Darren does.

Download buttons

Darren opts to include a double meaning in his sales page buttons. Because he’s selling ebooks, he wants to set the clear expectation that customers are going to need to download something (that is, they’re not buying a printed book), and that they’ll need to pay something to get the download.

Given the larger font used for the Download text on this button, I do wonder if he’s trying to toe the line between getting as many clicks as possible without misleading his customers—this is something I’d love to test on the site.

When I talk to people about buttons, in 99% of cases, they’re not trying to bait and switch customers—it’s just that many online marketers chase the click first, and worry about checkout abandonments later. Most of the time, they haven’t really through about the expectations that button text can drive, either.

I’ve focused here on just one type of button, but let’s look more subtle example.

Join vs. Sign Up buttons

When you click a button that says Join, you expect to be joined with the site’s community. On the other hand, button text that reads Sign Up suggests that something still needs to happen before I join—I need to sign something.

So Join is best used when it’s complimented by an input box that accepts the user’s email address—you have all the information you need by the time the user clicks on the button, and you can respond with a message that tells them they’ve joined your site. However, if it’s a standalone button, you might want to use text like “Sign-up to our newsletter” before taking users to you form.

These subtleties can make a significant difference.

Right text, right time

I’ve spoken about sales funnels before, and when you’re thinking about button text, there’s timing to be considered as well.

If you take on board the advice we’ve already discussed, you’ll meet users’ expectations of your buttons with an appropriate response, but now you’ve got to ask yourself, “Am I asking for the interaction at the right time?”

Continuing with our transactional (Buy Now) button text example, your sales funnel might move people through these stages:

1. Google AdWords ad
2. to a sales page
3. to a checkout process
4. to a sale.

This is pretty basic—you might include a free sample or email auto-responders as part of it—but for now, let’s keep it simple.

Now let’s think about what button text we’ll use, and where. On your AdWords ad, you could use button text like More information, Order now, Free download, or Free sample—to name a few options.

You might find Free download is your best-converting button text for clicks (but if you don’t offer a free download, you’ll be in trouble, as we saw earlier). To then meet users’ free download expectation, you take them to a free download landing page (mentioning a paid option if you want to).

However, your testing might show that a Buy Now button does the job with fewer clicks. You’re now in an interesting position.  As we mentioned at the beginning, the expectation around a Buy Now button is that it will let the user buy, so take them straight to the shopping cart, rather than a sales page. In my experience, the straight-to-cart option wins in terms of both conversion and dollars.

If your More Information button wins, that’s the easy one: you can take users straight to the sales page.

You’d repeated the same test on all the steps in your sales funnel—your ad, your landing page, and your cart—to make sure you’re showing the right text at the right time, and delivering on user expectations.

Here, I’ve talked about buttons from a customer satisfaction perspective, but later today, Georgina will look at button text from a branding perspective.

Stay tuned for more posts by the Web Marketing Ninja—author of The Blogger’s Guide to Online Marketing, and a professional online marketer for a major web brand. Follow the Web Marketing Ninja on Twitter.