Close
Close

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.

About Guest Blogger

This post was written by a guest contributor. Please see their details in the post above. If you'd like to guest post for ProBlogger check out our Write for ProBlogger page for details about how YOU can share your tips with our community.

Problogger.net runs on the Genesis Framework

Genesis Framework

The Genesis Framework empowers you to quickly and easily build incredible websites with WordPress. Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go.

Check out the incredible features and the selection of designs. It's that simple - start using Genesis now!

Comments

  1. Warren says:

    I honestly would not have thought there was so much going on behind the scenes with the smallest portion of the page (the buttons)

    How do you check each version for effectiveness?

    Visitors / Sales?

  2. A very good post on something that we bloggers do not often pay heed to. It is sometimes how small things matters this much in a blog when taking it to the next level. Thanks for the share

  3. Shayne, don’t let anyone ever accuse you of navel gazing! :)

    Seriously though, it’s nice to see some insight on this subject that doesn’t revolve around colours and placement. I think the actual text message of a button is something a lot of people gloss over. But not anymore!

    • I just had this growing frustration with buttons over the last few months that I had to let out. I agree that colour, style, location matters, but when you start thinking about why, much deeper thoughts prevail.

      That said — I was a little surprised I could write this much about the text on a button!

  4. Venkat says:

    Nice article.. yes, the small things are really matter. Love your ideas.

  5. Linda Caroll says:

    So true that expectations affect cart (and page) abandonment. I’ve experimented with putting two buttons side by side… one says “more info” (or product details… or why buy?) and the other says “buy now” (or “add to cart”) — interesting to watch the click stats and response rates not just between the two buttons, but also the responses to the different button text. Off to visit your site now. : )

  6. PD Websites says:

    Totally agree with this well thought out and well presented blog, well done!

    Just to add to this with “The Next Stage”; Payment Pages, if you are being asked by a website to give your bank details, how do you know they are being responsible with your details?..Truth is, you don’t.

    It’s only by using it or others responses that you will soon learn if they are secure and safe, just make sure the pages are secure “https://www…..” or they are using a recognized authority, like PayPal, World Pay etc.

  7. It’s all about putting yourself in the mind and psyche of the buyer. If you click on a certain button, what do you expect to see? This article did a great job of breaking things down and giving clear insight into the way buttons (and the text on them) work. Thanks.

    • “It’s all about putting yourself in the mind and psyche of the buyer” — spot on. In a training course I was running this week, I used the phrase “Get inside the mind of your customer, and you’ll find better ways to please them” – which I think is often lost in the measurable world of the web.

  8. Literal, step by step explanation here.

    Deliver. No need to expound on that!

    Thanks for sharing.

    Ryan

  9. IamNTB says:

    Recently did a blog makeover. Might have to go back and change a few things based on the great information from this article.

  10. Subbu says:

    Most of the time, we give so much importance to high level decisions but all that matters from visitors is the click of the button. And your post is spot on!

  11. I was actually just working on a graphic for a subscriber-only giveaway that is similar and this gave me some usable advice – thanks.

    When you have such few words to use, how you use them becomes as important as what you are trying to say.

  12. I’ve seen some studies on various blogs (including Smart Passive Income) that show that bigger buttons convert better, so much information! I’m guessing the best thing to do is to to use Google Webmaster Tools A/B testing to see which actually converts better on a site-by-site basis :)

    I’m definitely bookmarking this page so I can use it properly at the right time!

    • Your right Rosemary — test, test, test. But further to that, test across your whole sales funnel process. A lot of tests I see are about moving a customer from point A to point B, but the journey to revenue is more like A to B to C to D. If you’re not measuring and testing the whole process you could be solving one problem at the same time as creating another.

  13. Taline says:

    This has made me realize I need to explore making some changes to the button and if I want to say “join” or subrscribe.”

    It also reminds me to place it on my “about me” page as I get a lot of traffic to that page.

    Might also include it at the bottom of each page :)

  14. Gin says:

    It’s good information to help understand that a website has to reach out to the market when no in-person contact can be done. Got to reach out and ‘touch’ somebody and presentation is everything :) great points to practice.

  15. Richard Ng says:

    Nice sharing and tips on button-ing!

    Yup, I can’t understand too why orange has better conversion rate? ;-)

    Cheers!

  16. Binny Oinam says:

    Yeah, really, I never thought of the psychological effects the little details of a button could have on web users. I had also been frustrated many times with “free download” & “join now” buttons which didn’t deliver as promised. Great post!

  17. Daniel says:

    A really well written and practical look at Buttons….Web Ninj.

    You have gone my attention on this topic, as I have noticed some interesting set ups lately.

    And as has already been pointed out above in other responses, this is something that is so easily overlooked and taken for granted.

  18. Vikram says:

    I read somewhere that the idea for orange buttons converting better originated with the fact that amazon.com uses them, and they apparently split-test, re-test, tweak and use what converts best. After that, Perry Belcher popularized his orange button which was claimed to convert like crazy – it’s what a lot of Internet Marketers adopted and is seen widely (there is also some science behind having a dashed border around, images of credit cards etc).

    On the other hand, however, I have seen some very successful marketers buck the trend and use green buttons, yellow buttons…