Optimized Design, Local SEO & Copywriting. One-on-one service. All in one place.

visit our blogtinyigloo

Designing Add to Cart buttons – Getting down to details

Samples of Add to Cart buttons
Greetings from inside the SEOigloo!
This list of 107 Add to Cart buttons was recently put up by Jason Billingsly, and Bill Slawski called my attention to it in his Cre8asite Forums post.
I’ve put up a little sampling here of Add to Cart buttons we’ve created for e-commerce clients over the years, and though it may seem kind of funny that anyone would actually spend time deliberating over these tiny scraps of screen real estate, they just may be more important than you’d think.
All on-line sales get to the step where the visitor has browsed and chosen their item and is ready to ‘tell’ the website that they are ready to make a purchase. Different e-commerce sites go about enabling this with different words. Add to Cart, Add to Basket, Add to Bag, Add to Shopping Cart, Buy This Item and Buy it Now are all different wordings for the same function.
Add to Cart seems to be the predominant choice. Why is it important for you, the small business owner, to notice this? It all boils down to making your website as easy to use as possible…a discipline officially known as Usability. Usability experts study how people behave when they are interacting with a web page or software application. Where the user looks on a screen, how he moves his mouse, what he clicks on…these are all actions studied by Usability experts.
Usability studies indicate two interesting things to us that can be applied to designing shopping buttons. The first is that you should go with what people know. It’s great to be creative and different, but visitors to your site shouldn’t have to tackle a learning curve to make a purchase. It would be a poor idea, for example, to replace the Add to Cart buttons on your website with buttons that said “I’d Like This Item”. True, a human being could use these words to indicate that they want something, but a button that says this simply isn’t making it clear to the user what will happen if they click on it. So, stick with common, familiar terms for things when making that call to action which is, after all, the pivotal point of an e-commerce website.
The second interesting fact that comes to us by way of the Usability folks is that Buy it Now buttons are not your best choice. Though shopping on-line has rapidly become an old-hat experience to many of us, it is always best to plan for the newcomer who may be making their very first Internet purchase. The phrase, Buy it Now, sends a confusing message and may lead the user to believe that if they click the button, they will have made an irreversible commitment and will not be allowed to remove that item from their cart if they change their mind. Truly inexperienced Internet shoppers could even incorrectly assume that clicking a Buy it Now button will result in their credit card somehow being automatically charged at once. Creating a sense of fearfulness in your potential customer is not a good thing!
Additionally, I don’t take a shine to Buy it Now as a call to action because it strikes me as a pushy command…an imperative verb. It’s the difference between an unseen vendor giving an order to the shopper (BUY IT NOW!) and putting the shopper in control by giving them the power of choice to Add to Cart. Can you see the difference?
In the terms of the visual design of shopping buttons, we like to pick a color that complements the overall design and at the same time stands out from it as a very important part of the page.
For example, if the overall color palette is cool blues, I warm up the button color by adding red to the blue for a more vibrant blue. Or, if the site is warm in feel, I might cool the button down with green added to the blue for a more teal, silvery look. Frequently, our designs have an accent color being used in H2 tags, navigation or some element of the masthead. It can be effective to use that color for the Add to Cart button, but in a slightly stronger shade. For example, a carmine pink could be toned up to a firecracker red, or a soft tan could become cinnamon, or a pale yellow could become goldenrod. We also tend to use a very faint drop shadow behind our Add to Cart buttons for an additional ‘pop’ out from the background of the page.
When you’ve put all the work into taking photos, writing descriptions, writing articles, and everything else that goes into getting a business onto the web, it would be a real oversight to regard those shopping buttons – the main call to action on your site – as an afterthought. They deserve your serious attention!