Skip to main content
Commonmark migration
Source Link

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?

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?

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?

Tweeted twitter.com/#!/StackUX/status/177447972966105088
Source Link
dnbrv
  • 13.2k
  • 5
  • 44
  • 75

Where should the "Add to cart" button be placed in the product page?

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?