Welcome to Blueleaf's UXpert, our regular look at UX that could improve your website for users and ultimately deliver increased conversion rates. This week, we're talking about add to bag notifications.

What's the problem?

Adding an item to the bag is one of the most important interactions on any ecommerce site, yet many sites do not offer an adequate user experience.

What's the solution?

There are three areas where you should consider notifying users that their item has been successfully added to the bag:

  1. The bag icon in the header shows the total number of items/price

  2. The minibag pops open to show the item(s) added

  3. Messaging on or around the Add To Bag button on the PDP

One of the common UX issues that we see (especially on mobiles) is that when the user is scrolled down away from the header on a PDP and adds an item to the bag, the interaction confirming it is off the page, i.e. the mini bag opens and the bag icon in the header update but are not visible. This leaves the user unsure if their item has been added. For that reason, make sure that you implement number 3 – show an "Added to bag" message inside or next to the Add To Bag button.

What could the benefit be?

The benefit is obvious – clearly informing your users that they've successfully added items to the bag is an ecommerce fundamental that will help reduce abandoned baskets.

I hope you found this useful – if you have any questions on this or anything else to do with UX, please do message me.


Sign up to our regular email Blueleaf UXpert to keep up to date!

Comment