10

Suppose if a user clicked "Add to Cart" from a product listing page, Do we need to redirect to Cart page instantly? Or stay on the same page and show "Added to Cart" with disabled style ?

How do we know user is going to purchase only one item or multiple items?

Which of these provide better user experience?

Improve this question

4 Answers 4

Reset to default
6

There isn't a definitive "best way" to handle this, as it varies depending on the site design.

Showing a confirmation message is best used when you are listing a number of items on a page that a user may want to also add to their shopping cart. It is the method that gets out of the users way the most.

Taking a user to a screen where you confirm that the item has been added to the shopping cart works best when the item that you are looking at is a full page, and so directing a user away from the page has little negative effect. The new page gives you an opportunity to suggest other items that they user may be interested in. This has been proven to effectively increase sales, and is the method that Amazon use.

enter image description here

Improve this answer
6
  • I may decide to add it to the shopping cart earlier than I have finished reading all the details. Being taken to the shopping cart at this stage can be frustrating. Reasons to take you to another page, cart or suggestions, are all commercial (that's not bad, but not ux either). If you must mess with my "flow" then do it in an overlay that I can dismiss with a simple [Esc] instead of having to wait for a page (re)load.
    – Marjan Venema
    Apr 25, 2013 at 6:32
  • 2
    @MarjanVenema I agree with everything there other than commercial consideration not being part of UX.
    – JohnGB ♦
    Apr 25, 2013 at 11:19
  • @JohnGB +1 amazon was considered one of the best websites when "Don't make me think" was first published (especially for its tabbed navigation) and it's still a source of inspiration
    – Toni Toni Chopper
    Apr 25, 2013 at 12:09
  • Well, I guess that depends on what you consider commercial reasons. I don't see commercial reasons as part of UX, because as a user I really don't care about a sites conversion rates or their turnover. And patterns used to increase these somehow often seem to the detriment of ease of use. A site's opportunity to up-sell is my annoyance in getting in the way of what I want to do.
    – Marjan Venema
    Apr 25, 2013 at 12:59
  • 1
    @MarjanVenema And we all want everything to be free and never have to pay for it. Unfortunately we can't work in isolation of the business needs. UX needs to enhance the business performance, and so it has to take those needs into account.
    – JohnGB ♦
    Apr 25, 2013 at 13:09
2

Nope. The user should continue being on the same shopping page. An indicator at the top of the page that the item has been added to the Cart is enough

Improve this answer
2
  • To add to this, it would not be necessary to disable the "Add to Cart" button once it has been clicked. If the user wants to add another of the same item to the cart, that is OK. The code-behind can handle how this will be displayed/handled in the cart (add a second item, change the quantity, etc.). For ease of use, the cart can give the ability to view, on the product pages, what is inside of the cart via a drop down or something else (depending on how the page is laid out).
    – The Sheek Geek
    Apr 24, 2013 at 17:59
  • I disagree with this answer, it's more important that an indication is made around the "Add to cart" button, rather than some other hidden corner of the page.
    – Steve
    Apr 25, 2013 at 10:59
2

There are several aspects of this:

  1. Give feedback to the user that the item has been added to the cart

  2. Let the user continue browsing your store and buy more items

  3. Prevent the user from accidentally buying an item twice

If you look at Amazon, they generally navigate to a separate page that tells you the item was added, and also shows suggestions of what to buy next. That covers #1 and #2, and since the "buy" button is not on the new page, also #3. They also have a popup where you can choose to buy several copies of something, right above the "buy" button. Also, there's a button that lets the customer buy now whatever is in the cart so far.

However, I often find the change of page annoying when there were suggestions on the previous page I also wanted to buy. An alternative would be:

For a short while (at least until the request is through) disable the "buy" button. Then show a temporary banner at the top of the page that says "Item added to cart" and after a short delay, reactivate the button.

If the user clicks the button again, check if the item is already in the cart, and if it is, ask for confirmation and how many times it's been added so far, and that this will add it another time.

Also: Many web sites have a shopping cart icon somewhere prominently, which displays the number of items in the cart on it, and quickly lets the user get to the "buy now" page. It is very important that the user gets to see where they can go after they've added an item to the cart to actually buy it. Maybe you'd want to add a "go to checkout" button somewhere to the confirmation banner mentioned above to make this obvious.

Improve this answer
2
  • Yes, changing page will be annoying when user wants to purchase many items.. But the same time if user only purchasing One item, then he will be happy to see the checkout page
    – Surjith S M
    Apr 25, 2013 at 12:22
  • 1
    @SurjithSM Sure, I thought you might wanna encourage people to buy more stuff at once (more profit through lower shipping costs). Also, showing the page after every item that's added annoys customers who buy several things much more than the odd customer who buys a single item would be annoyed by having to click "check out".
    – uliwitness
    Sep 1, 2015 at 12:46
1

You could let it depend on the size of the typical order: if most of the orders contain only 1 item send them to the cart.

If users typically add more than 1 item in the cart you could apply the aforementioned solution

Additional edit: Why show a disabled button? You could let the cart (usually at the top right position) fly out and fly in to show there is an item placed in the cart

Improve this answer
2
  • In most case, User may Purchase One mobile only, or they may purchase the mobile with two or more Accessories. So that will be difficult to understand.
    – Surjith S M
    Apr 24, 2013 at 12:56
  • 2
    In that case you could let the user decide. The following site shows a demonstration of the principle I have in my mind: on bol.com you can place an article in the shopping cart (find a product and click the button "+ In winkelwagentje"). The product is added to the cart, which uses a fly-out to communicate the product is added to the cart. The button of the cart changes to "Bestellen" ("Order"). This way the user can easily go to the checkout, or decide to shop further for accessories
    – Ivo
    Apr 24, 2013 at 13:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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