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.
It is my firm belief that a buy button is the single most important part of conversion factor on an ecommerce page
Just because it's one of your pet peeves does not make this any more likely, as much as you'd like it to be true! :)
I would say it needs to be the largest element on the page besides the picture of the product itself
That depends, really. To me, oversize "buy" buttons just shout at me too much.
If your customer has to scroll to find your buy button, it’s in the wrong place
have two buy buttons, one above and one below
Good buy buttons should not match your site
Good point about making sure it's on the right though.
As with so many things, the only way to find out what really works in your particular case is to test!
arran.
...the words customer and figure out do not belong in the same sentence.
This is true gospel when it comes to ecommerce.
As with so many things, the only way to find out what really works in your particular case is to test!
Indeed.
Though, most of what Hannamyluv recommends mirror the findings of Jakob Nielson's web usability studies which are based on data from rigorous usability studies on live websites.
LisaB
Jakob Nielson's web usability studies
Jakob Nielson is a very good source for usability information. Even if you don't agree with what he says, it gets you thinking about how people look at and use your site. You just can't say, I don't like that. You have to find out what your customer likes (and dislikes). Nielson is a huge advocate of watching people use your site to see what is really going on.
I think I've looked at every component of our site--many times--but not the buy buttons AND they do suck.
I have namby pamby buy buttons!
How about some more examples of great buy buttons?
It never occured to me that because the button matches the main color of my site, it actually camouflages itself a bit. I'll probably reconsider the color of this button and make it more stand out.
Thanks for the great article. This will surely go in my bookmark.
We did an A/B test earlier this year with our previous buy buttons (which matched our site) versus lime green buttons and orange buttons. The green and orange buttons performed very similar -- and MUCH better than the original matching buttons. I personally liked the orange ones better so we switched all of our "action" buttons to orange - "add to cart", "checkout", "continue", etc. I agree, that it's an easy change with big benefits.
>> The next most important element is placement. If your customer has to scroll to find your buy button, it’s in the wrong place.
Which is generally a good rule of thumb; however, with some kinds of items there are certain restrictions that you have to make sure the customer had the opportunity to see and read some kind of terms, disclaimer, etc. This is most common I think with downloadable software, because of shrink wrap laws. what I usually do in this kind of situation is where you would have normally had the buy button, still put one there, but instead of having it add the item to the cart, have it take the user (or scroll them if it is on the same page) to the necessary terms they are *supposed* to read over with your I agree checkbox and the real add to cart button there (you probably need to put it after the terms, which is not really best for usability; however, your hands are sort of tied by the law here).
Clarity is good - I have put ALOT of time and effort into really analyzing conversions on our eCommerce site, recently relaunching a new look and feel that took our conversion rates from 2.5-3% up to 5%+. There were days over Christmas where our Conversion rates were over 8% and that is with 10,000+ Unique vistors.
Clear "Add to Cart" buttons are key to that strategy and success.
That element is the single most important part of the page - however - I believe the single most important conversion element to a site OVERALL is a clear well refined checkout process. BUT without a good 'buy' button they'll never get their anyway so it is a moo point. You know... a cow's opinion.
Above the fold = YES!
Two buttons, one before copy - one after = ALWAYS!
'POP'iest element on the page = MUST BE!
Obvious what it is/does visually - YOU SAID IT - DAMN STRAIGHT!
And oh ya, I like em BIIIGG!
And so do my customers.
The one thing I'd add is that after they hit the "Buy Now" or Add To Cart" button, make sure there is a nice big "Continue Shopping" button to go along with the "Checkout Now" button.
your customers do not have finely tuned fine motor skills.
Fitts' Law [en.wikipedia.org] applies even for skilled users. From link:
the time required to rapidly move from a starting position to a final target area, as a function of the distance to the target and the size of the target
We provide lots of product detail which is beneficial too. No way can we get all that stuff above the fold, but a good "Add to Cart" button kinda gives the customer the right idea.
sadly, you've told all your competitors and mine how to really make those sales
If it was trully just that easy then we wouldnt be sitting here sharing and looking for more ideas to help improve our sites. Besides we all know the problem isn't getting the knowledge to get the site rocking, its getting the client to agree to not make the menu's out of video clip popups and work with us to get the site to the useable state customers expect.
Besides how do you know hannamyluv's significant other didn't make the post to get the sites being frequently visited to pop their buttons more to avoid the umm artistic reviews being given? :)
Best thing I've read on WW in quite awhile.
I changed the price and the buy button to much larger, and suddenly she could see it.
I couldn't agree with Hanna more - it is amazing what a modern person in a hurry misses as they scan a page. Make it easy for the consumer to give you their money!
Mayabe I should make some big gaudy flash animated buttons......
After a nights sleep clashy does look funky. I've chosen standard red. I'm still amaized at the beauty of this post, but why did they have to make it a "sticky?"
Happy Holidays Hannah!
Eye-level is buy level when it comes to the buy button. Someone coined that phrase so I can't take credit for it.
WFN
I don't necessarily agree that it needs to be the largest element on the page, however, it should be an obvious element without being an obnoxious element.
We considered 5 characteristics of the buy button while we were designing it:
1. placement
As WFN said, eye level is buy level. That's not just a web merchandising tactic, but it has existed in retail forever. Walk down the soda aisle of any supermarket and right away you will see that the name brand sodas are at eye level and the no frills are down by the floor.
2. color
We chose to use a color that was not used anywhere else on our site, yet appeared to complement our existing color palette. We also put a lot of thought into the psychology of colors. For example, red usually evokes faster heartbeats, heavy breathing, stress and excitement. Also, here in the US, its associated with "STOP!". Definitely not something I want associated with a buy button...unless its our competitor's buy button.
Green on the other hand (our choice), is a calming, relaxing, reassuring color...quite the opposite of red. Remember the good old green rooms that people would relax in before they came out to perform in front of thousands of people? Green is calm and reassuring. Also, here in the US it means..."Go ahead...its safe".
3. shape
Without going into too much detail, we put a lot of effort into utilizing a shape that most web-savvy shoppers have come to associate with being a symbol of trust and safety.
4. label
buy now, add to cart, put in your shopping bag. I don't think there is one "best label" to use for all e-comm sites. If you're selling cars, there is no way you can add a car to your shopping cart. or your shopping bag. Also, if you have an international audience, you have to consider how the terminology would translate there.
5. supporting points of reassurance
This is something that I don't see enough of and is definitely one of the easiest things you can do to increase purchases. Anywhere you are asking someone to buy now or add to cart, you should take some time to quell their doubt by placing "point of reassurance" right by your buy button. Good examples of point of reassurance would include your return policy, customer testimonial, an estimated shipping date, customer service phone #, etc.
Its also symetrical (or something)all of teh other buy buttons line up on the page, my button is almost as wide as the text paragraph describe the gear.
In short you cant miss it, which is how it must be.
Went to a credit card processor site last night and after three screens of info there still wasnt a buy now button, youd have thought that it would have been on every page after the final paragraph.
Clear, large, alluring product photos are far more important. Customer confidence elements are essential. Depending on the product, text description and details are vital. I rarely shop at ugly sites. The buy button SHOULDN'T be the largest element on most product pages.
I don't see the pros--Amazon, Wal-Mart, etc.--using flashing, blinking buy buttons, do you?
How many commerce sites have already nearly maxed out other elements? In terms of priority, creating the "World's Most Effective Buy Button" comes near the end of the list. If you've done everything else well and your price is good, customers will gladly take the extra second or two to find a mediocre buy button.
