0

Ajax is likely the best method of adding an item to a shopping cart. By which I mean, the item is added client side, with no page refreshing. But what is the best experience to let a visitor know their item has been added?

The two methods I have used are:

enter image description here

  • Large Popup - it takes up a lot of the screen, mentions what you have added, included quantities, and totals. Needs to be closed manually.

Advantages

  • As it's larger you can add more info in there, such as recommended or related products, that can be added to the cart.

  • Call of actions to checking out can be prominently displayed at such an appointment time.

  • Can't be missed - there is no way the visitor will miss the fact their item has been added.

Disadvantages

  • Disrupts the experience as you can't see the page any more, due to the popup taking up most of the screen, and needing to be closed by pressing escape or clicking off it.

enter image description here

Temporary Notification - a small popup letting you know the item has been added to the cart. Likely places are by the header, where the cart quantity is displayed, or by the add to cart button itself. It might last 5 seconds, and fade away.

Advantages

  • Quickly informs the visitor that their item is in the cart.

  • Doesn't detract from the visitor's flow of what they were doing.

Disadvantages

  • Limited space to notify visitor anything such as estimated delivery time, or up sell related items. At best you might have a View Cart link.

  • Limited time also, if you have any call of action such as View Cart, then it will only be displayed for a few seconds before fading away.

What are other people's experiences with notifications when visitors add products to the cart?

Improve this question
1
  • 2
    You can also have an animation of the item being moved to the cart.
    – drabsv
    Sep 9, 2016 at 7:36

2 Answers 2

Reset to default
2

Give user a consistent feedback. Choose a place where all notification must be displayed for all kind of feedback. Popups are annoying. Also make it very simple and no input should be required from user when they get this notification. It should be removed after a while by itself.

Yes giving a temporary message is a good design but think about other devices like mobile phone same message won't work there. So, make some space between header or footer and provide it in some special colors updating user about the event.

Improve this answer
0
0

I agree with consistent feedback. I assume that the cart icon is at top right of your website. You can highlight it with yellow it and fade it to white (like facebook does) when user adds a product in the cart. And after fading ends, you can keep the phrase "You have 1 item in your cart" there.

Improve this answer

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.