Welcome to WebmasterWorld Guest from 220.127.116.11
Forum Moderators: buckworks
It is my firm belief that a buy button is the single most important part of conversion factor on an ecommerce page. You can convince your customers until you are blue in the face, you can have all the best copy and pictures and advertising in the world, you can have a product that is so good that sells itself, you can have a page that comes up #1 for a term that gets a million searches and it won’t mean a darn thing if the customer can’t find the buy button. Too many times on websites a buy button is treated as a design element rather than a functional element.
So what makes a good buy button? I think the most common question I see is "Should my buy button say 'Buy Now' or 'Add to cart' or something else?" This is, IMO, one of the least important parts of a buy button. You have many, many more important things to worry about before you get here.
The first thing you should look at is the size, for a few reasons. The size of your buy button will make or break a good button. It needs to be big, I would say it needs to be the largest element on the page besides the picture of the product itself. Now, this does not mean that it has to be ugly. For example, I love Target.com’s buy button. It is huge, but if you surf casually you would never realize it. They blended the size in very well. You can have a large buy button and have it look good. A large buy button makes it visually easy for your customer to locate how to buy your product. Easy = more conversions, many more conversions. (E=MC2, Einstein was an ecommerce genius as well ;) )
Another reason that you should have a large buy button is that some of your customers do not have finely tuned fine motor skills. They can not use a mouse with the scalpel accuracy that someone who spends all day on a computer can. They may not use a computer much, they may be older, they may have medical issues that interfere with fine motor skills. Whatever the reason, a 30 pixel wide button is something that is nearly impossible to click on for them. A bigger buy button makes it easier to click. E=MC2
So look at your buy button. Is it big, can you make it bigger?
The next most important element is placement. If your customer has to scroll to find your buy button, it’s in the wrong place. If your buy button is not on the right hand side of the page, it’s in the wrong place. If your buy button appears only below the copy, it is in the wrong place. If your buy button is not relatively close to the picture, there is a chance it is in the wrong place.
Scrolling is a killer to any page that sells things. Yes, people will scroll, if they have to, but they don’t like to. Do your really want to make your customers do something they don’t like to do just for the privilege of buying your product? Plus, there are some people out there who are either too stupid, too lazy or too ignorant to scroll. Honest to god, these people exist. While they may be stupid, lazy or ignorant, they have money to spend. Make it easy for them to spend there money with you. Make sure your buy button is above the fold. E=MC2
You buy button should be on the right hand side of the screen. Draw a mental line down the center of your webpage. Your buy button should fall somewhere on the right side of that line. Why? Because everyone else’s does. Sorry, but this is not a place to be original. Everybody else has trained customers to look for the buy button on the right side. Don’t disappoint them when they are looking. E=MC2
The buy button should appear above your copy. The reason is that people who read copy and people who click on buy buttons are two different people. If they do read the copy, they are not ready to buy yet anyway, they are still shopping. They will read the copy, leave your site, read the copy at a few more sites and if you are lucky they will return to your site and buy. People who read copy are in research mode. They are not going to part with their money right now anyway. It is okay to make them scroll a little. Everybody else read the copy on your site (or someone else’s) a little while ago and they just look at the picture, maybe the name of the product (which should be above the buy button) and say, “Yep, that’s what I want. How do I buy?” Why would you want to make them wade through the copy again to get their money? E=MC2 If you feel really uncomfortable about getting rid of the buy button from below the copy, have two buy buttons, one above and one below. Nobody said you couldn’t have two.
Which now leads us to the picture. This is not a hard a fast rule, but as stated above, when someone is in the mood to buy, they will look at the picture to confirm that this is what they want to buy, and then they will look for the buy button. Make it easy to find that buy button quickly. E=MC2
So, take a look at your now big buy button. Is it in the right place?
The next thing to consider when looking at your buy button is the color. Buy buttons are like good art. Good art should not match your couch. Good buy buttons should not match your site. There is a technical term that they used when I worked in direct marketing. It was “pop” factor. Your buy button should pop. When you look at the page, the buy button should pop at you. It should be the first thing you notice. Chances are, if your buy button is the same color as the rest of the page, it will not pop. The color you use is up to you. Try a contrasting color. Try a slightly off from the rest color. Try a color that just plain clashes. Test a few things. DO NOT LET YOUR GRAPHIC/WEB DESIGNER CHOOSE THE COLOR BY THEMSELVES. It is the designer’s job to make things look pretty. It is your job to sell things. Work with your designer on this one, if you must, but make sure your buy button is a color that pops. That way your customer will see it right away which makes it easy for them to find. E=MC2
So take a look at your now well placed, big buy button. Does it pop?
Lastly, we come to what should be on the buy button. Buy now or add to cart or whatever you want to put call to action wise on your buy button is totally an industry driven thing. You have to test it. But how you put it on the button is pretty standard. Make sure your call to action is clearly and simply written. No fancy fonts, use sharp lines on the font you use and make sure that the font color you use is a clear, easy contrast to the color of your buy button. Yes, the theme fonts look cool, but they are hard to read. Yes, your customer could figure out that the theme font being used says “buy now” or whatever, but the words customer and figure out do not belong in the same sentence. There should not be a chance that they will have to figure out anything. Figuring things out is hard, you want to make things easy. E=MC2
So take a look at your now eye popping, well placed, big buy button. Is it easy to read?
You may also want to consider using a pictograph on your buy button. Believe it or not, there will be a percentage of your customers who can not read or can not read English (or whatever language you sell in). A simple little cart pictograph or something similar will make it easy for these people to figure out which button is the buy button. Plus, most people’s brains can process a picture faster than they can process words. A little pictograph will register with them that much faster that this is how I buy the product. E=MC2
So take a look at your now easy to read, eye popping, well placed, big buy button. Can you fit a pictograph on it? It just makes it bigger, and when it comes to buy buttons, bigger is never a bad thing.
multiple, clashing, oversize "buy"
Multiple is not something I would go with, but there are some people who would. Test, test, test is always the way to go.
Clashing button is easy. Etoys.com has the lime green button already mentioned here. It in no way matches, contrasts or one off’s the colors of their site. Amazon’s is a one-off contrast. Target uses a unique shape to make the button pop. You have choices. They do not have to be ugly to pop.
And oversize is a relative term. Amazon, Target, Walmart, all of them, on the product page, the “buy” button is the second or third widest graphic on the page above the fold, outsized by only the product picture and the logo.
flashing, blinking buy buttons
customers will gladly take the extra second or two to find a mediocre buy button
Or they may just hit the back button and click on the next result down on the SERP who has button right there and looks just as trustworthy. You just convinced the customer to buy and they just went to your competitor because it takes less time to “figure out” how to buy. I have seen this hundreds of times. The other scenario is that in the two seconds it takes them to figure out where your buy button is, the phone rings, their kids come up crying the dog needs to be let out or one of a million other things that can happen and you just lost the customer because they had something else to do.
If your customer knows how to buy even before you have even convinced them to buy, you stand a greater chance of not losing them. If a customer has an item in their cart and is halfway through the checkout process, they are less likely to abandon than if they haven’t even started the check out process. The checkout process starts with that buy button.
But, if you follow any of my threads in the past, you know I am a huge advocate of testing. Never, never, never take anything you read as wholesale gospel truth. I don’t care if you just paid a usability expert a $1000/hr to review your site. You test before you make things final. Every site and industry has quirks that do not work with best practices. On the same note, you should never stop testing. You should have some sort of test running constantly. I don’t care how good your conversion is now, it can be better.
I don't see the pros
Beware of looking at “pro” sites. I use to have contacts at some of those “pro” Internet Retailer Top 50 websites. You want to know how many of them decide how their website should be put together? They hand it off to a graphic designer. Sometimes even a graphic designer who has no web design training. Even if they do give it to a web designer, there are precious few web designers who are properly trained in usability. If you find one, they are worth their weight in gold. Many of those “pro” sites have also never actually watched one of their customers use the site they have up. If any of you have never actually watched someone shop on your site, go borrow a person in your demographic who has not seen your site before, sit them down and don’t say a word as they try to shop on your site. Don’t explain anything. All you say is “please buy something from my site.” They will do things that you would not have even thought of. I promise.
If any of you have never actually watched someone shop on your site, go borrow a person in your demographic who has not seen your site before, sit them down and don’t say a word as they try to shop on your site.
Yeah, that can be an eye popping, mind boggling experience! (Even pure info sites should do this.)
We all forget that most users of the web do not have the experience and knowledge that we have.
My mother prior to me giving her my last PC had never used a computer before, the web? Thats something spiders sit in.
She buys from the same sites over and over again. Why? Ease of use, good delivery, good communication be it email or through the post.
So if you want to capture customers for the long term your buy button is just one of the features you require.
"customers will gladly take the extra second or two to find a mediocre buy button - No they wont.
So would you sacrifice another key element--large product photos, thorough text descriptions, etc-- to create a large buy button above the fold?
How long does the whole buying experience take? 15 minutes? 30 minutes? A few hours for an expensive techie product? A whole Day, when the shopper is looking for "just the right gift?"
This thread could just as easily have read:
Do your photos suck?
Does your cart suck?
Does your main page suck?
Do your prices suck?
Do your product descriptions suck?
Do your fonts suck?
Does your navigation suck?
Does your page loading time suck?
etc, etc, .....
And those things involve trade off. You can't have everything in legible font above the fold on the main page.
Overall, the buy button is a pretty minor component.
And there is nothing that says you can't have copy and the buy button above the fold, if you feel it is crucial to your user's experience. A three column layout with the pic, then copy, then buy button & product options gives you the best of all worlds. Plus it works well with the natural tendancy of the human eye to move across the screen rather than down the screen. You then give your customer the option of what they want to do. Look at the pic, read more about the product or buy. It's all right there.
My original post was meant to get all of you out there thinking about that button. Agree with me or not, you will look at your button and think about it now, eh?
I don't think it's worth debating whether the buy button is the most important element on product page - it's a mundane point. Everyone agrees that it's important and that there are other important elements.
I think everyone agrees as well that testing new ideas is the only way to quantitatively improve an e-commerce web site - I got some new ideas from this thread, so thanks :D
bluefly (add to bag)
buycostumes (add to cart)
dell (customize it, configure, more details, continue)
Dell takes the approach that I advocate, they make what I call the "primary action" button appear the same on every page. In other words, when multiple stages are required to get someone to perform your ultimate conversion (conversion funnel, the "primary action" buttons that "connect the steps" are all styled the same. This way, you are training your visitor to look for the exact same object throughout the funnel.
Now I don't know about you but ideally I want my customers to continue shopping and add more to the cart. But I'm afraid it would be tacky to make the continue button bigger than checkout. Buycostumes e.g. has equal sized big buttons for all three choices.
Which approach is better?
Great question and I think its totally circumstantial.
If someone has committed to putting a cart in the item and you put more focus on the to continue shopping, you run the risk of them second-guessing their "impulse".
On the main site that I oversee, we take the same approach. We sell high-ticket items that require substantial research and a number of visits over a period of several days. When someone adds one of our products to a cart, we do not want to focus on anything else other then helping them complete their order.
Its definitely something worth A/B testing in your case. We have, and we have had much greater success with our current approach.
Now I don't know about you but ideally I want my customers to continue shopping and add more to the cart.
True. Though, I've noticed that once Amazon.com gets you into their checkout procedure, they don't want you to get out. The page structure changes such the horizontal navigational structure normally at the top of the page is replaced by a non-interactive status display (e.g. "sign in -> shipping & payment -> gift wrap -> place order").
The only link to get off the page that Amazon provides is at the bottom of the checkout page. You can still use your back button, but its clear that Amazon is loathe for you to leave the checkout.
You make a very good point. And for the site you reference I completely agree. Complete the sale ASAP.
In the site I'm referencing it is imperative to get several items in the cart. So we do not want the customer reaching "premature checkout." Freight factors make it beneficial for the customer to purchase several items and spread the cost. Which they usually do.
Definitely need to set up some testing for action button placement and size.
That's very interesting observation about amazon. Maybe their varied distribution drives that decision.
joined:Mar 13, 2005
To me it's a bit like a car key, I don't really care what it looks like so long it fits, turns, and starts the car.
To the person said a text link was better, yes, text links get far higher CTR's than images, always have, always will. As for me, my button is connected to a form the customer fills out, so I don't think a text link would do in my case, but the link that goes TO the page, yes, that is a text link.
Text RULES - It loads fast, gets higher CTR, and never fails to load or look unpleasant (it just looks like text).
I've never heard anyone suggest that red or green traffic lights be replaced by text.
By the way, while red can mean "stop," it can also mean "this is really, really important"