I'm looking into possible A/B testing for a bag icon for a website. The first version of my test will be to change the style from a shopping bag style icon with the item quantity to the right to this:

My question is - is there a best way to display this notification style e.g. number of items to the left or the right or is this purely subjective?

Left/Right Basket

Any help/links to blogs etc to help me understand the reason would be great. Thanks.

  • But if you're A/B testing, does it matter what we suggest? Wouldn't you get the data you need to determine what's best for your site/app from the testing? – maxathousand Nov 14 '17 at 14:12

The one with the number on the right feels more natural, since it would work like this:

user scans for basket/shopping-cart icon - finds icon - finds number of items next

Usually the user is not scanning for the numbers inside the basket/shopping-cart so why display it first?

  • That was my initial thought but after doing a bit searching around on different sites I saw a big mix. Thanks! – sclarke Nov 14 '17 at 12:44

In addition to the answer by Pectoralis Major,

Numbers are aligned to the right in general, in order to make the comparison between numbers easy. It is a common convention to see numbers grow from the right side to the left. Hence it makes more sense to add the number badge to the right side of the icon for LTR language users.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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