I recently covered The Ideal Shopping Cart Button Text, but now I want to focus on the actual button itself. You basically have 2 different types of people that create buttons.
1.) The Programmer - He/She wants a simple button that works. The opt for a default HTML style button as shown here:
2.) The Designer - He/She wants an attractive button that looks different from all the other add to cart buttons on the internet. They may choose a button that may not even look like a button, in order to make their design stand out from the competition. Here are some examples of poorly designed add to cart buttons created by designers who wanted to make their design stand out:
What you need is a slight mix of both designer and programmer. Your goal in creating an add to cart button is to make it look like a button, make it look like part of your site, and make sure it's easy to find and it draws attention to itself. Lets break this down to help better explain what I mean.
1.) Make it look like a button - Most designers are not usability experts. Their goal is to create an attractive layout and they often try to be different to set their designs apart from everyone elses. You may often come accross a button design where you're not even sure if you can click on it. While it may look pretty, it decreases your page's usability. People that shop online don't want to think about how to add something to their shopping cart. If you want them to add something to their cart, make sure your button looks like a button. If a user can't easily find it, they'll leave your site and shop somewhere else.
2.) Make it look like part of your site - Make sure your button blends in with the rest of your site. If your button clearly doesn't fit within the rest of the look of your site, your conversion rates will decrease. An example would be a store that sells computer parts, but the add to cart button has an image of a teddy bear on it.
3.) Make sure it's easy to find and draws attention to itself - Put your add to cart button at the top right corner of the page. Don't place it in the middle of the page, and definately don't put it towards the bottom below your product description. When people are ready to add something to their shopping cart, they're going to look towards the top right corner of the page. Enough online stores have placed their add to cart buttons there over the years, that people have been conditioned to look there first. Don't throw your user off course and make them look for the button, put it where they look first. Next, make sure the button draws attention to itself. The best way I can explain this is to look at one of your product pages. Now, squint your eyes and look at your page. Is the add to cart button jumping off the page? You want that button to be clearly visible when squinting your eyes. Going back to #2 I mentioned above, keep it looking like part of your site, but try your best to make it stand out. This may be as simple as tweaking the color a bit to make it brighter. Maybe all it takes is a slight increase to the button's size, or adding a "+" or shopping cart icon to the button.
Subscribe
