14

I came across this awesome question on LinkedIn. The author has posted it across multiple UX groups (some open & some closed) so I'd like to preserve the best answers in one location.

Many would say that "Add to cart" button should be placed close to the price and not far from the product's image since it is strongly related to the product. There are different cases depending mostly on the kind of product. There is a substantial difference between products with rich specs (e.g. computers) and products with sparse specs (e.g. clothes).

Let's simplify it and say that the user experiences the product page during two main phases:

  • an exploration phase
  • an active "add to cart" phase

During the first phase, if there are many specs and details to be read, the "Add to cart" button would be distracting placed in the center of the page amongst other important text. However, such placement would be OK on a page with few product details, such as a T-shirt.

This is probably why Amazon places it in the top right corner, boxed and isolated from other elements. This way it won't annoy the user that is still deciding whether to buy or not.

So is there a set of guidelines for placing "Add to Cart" button in relationship to the product description, images, and price? Are there any studies (A/B or multivariate tests) that support those guidelines?

Improve this question

2 Answers 2

Reset to default
6

I get the best results when it:

  • is large
  • is above the fold
  • is very obviously a button
  • is to the right of the product image
  • explains the action well - Add To Cart and not just something like "add"
  • has plenty of room to breathe and stands out

When I tried a 3-column layout like Amazon does, I didn't have much success, but there's plenty of other things that tie in obviously.

I'm sorry for the lack of numbers to back this up, but I've been building "ecommerce" sites for 4.5 years and this is just based on my experience and what I have observed.

Improve this answer
1
  • 5
    I would be curious if designs for right-to-left languages have better luck with the button on the left rather than the right. (ie. at the end of the "sentence")
    – cdeszaq
    Commented Mar 7, 2012 at 17:09
0

There is an anecdotal evidence of Crutchfield.com doing A/B testing with a placement of "Add to Cart".

Here is an article from 2008 that talks about how Crutchfield has "Add to cart" button on left side of screen. http://www.grokdotcom.com/2008/01/25/call-to-action-split-testing/

Some time between 2008 and 2012, Crutchfield moved the "Add to cart" back to the right side of screen, while the overall layout has not changed much. http://www.crutchfield.com/p_4728TCHB/Apple-8GB-iPod-touch-Black.html?tp=237

Improve this answer
2
  • 2
    Could you please summarize the findings in the article and replace the link with a screenshot? We're trying to avoid link rotting in the long term.
    – dnbrv
    Commented Mar 7, 2012 at 17:01
  • 2
    @dnbrv - I wouldn't take out the link entirely. It's still very much useful for as long as it is active. Having the information directly in the answer though is the most critical part.
    – cdeszaq
    Commented Mar 7, 2012 at 17:10

Not the answer you're looking for? Browse other questions tagged or ask your own question.