Hey! Look over here! I have literally nothing to tell you!

Recently I was doing some shopping on the Indigo website and found myself staring at the header. It’s a good header, from an interface point of view, especially on mobile. Everything you could want from a shopping site is there: retail location drop down (showing the current store’s hours for the day — nice touch), search bar, menu and cart. Specifically, it was that last one, the cart, that I was staring at. I hadn’t added anything yet, so why the eye-catching red badge? Then I saw the zero. Thanks for drawing my attention to … nothing.

There’s nothing in your cart.
There’s nothing in your cart. Oh no wait, sorry, there’s something in your cart.

Zero is not a notification

Most of us are familiar with notification badges from when smart phones came into our lives. The little red dots on the email, text, and phone icons let us know when there are new messages or missed calls. But once you catch up, the dots disappear. If all those app icons constantly had badges with zeroes on them it would be harder to know when there was something new to check. Which is exactly the point. The main role of a notification badge is to alert us when there’s been a change from nothing to something. The number is secondary — it’s a detail of the notification. The role of the badge is equally important in communicating a change in the opposite scenario: when a user removes all items from their cart, the badge should disappear to confirm that the cart is empty.

A definitely empty cart…
… and a much clearer change to something in your cart.

Now, maybe Indigo’s UX research budget allowed them to run a test that showed users found the cart more quickly if there was a red badge on it. I wouldn’t doubt that; it’s definitely more eye-catching (I should also mention that I’ve seen a visible zero on carts from other sites, including Amazon). But even if my imagined scenario is true, my question is: why does someone need to find an empty cart as fast as possible? Shouldn’t their initial focus be on buying things? Regardless, I’d argue that 100% of users would still find the empty cart with no badge on it, given the conventional placement in the top right of the header.

Emphasizing the cart (without a badge)

I think simply removing the badge when there are zero items in the cart is the only change needed. But if someone said I have to make the cart more obvious, I’d quietly grind my teeth for a moment, then suggest alternatives to using the notification badge. I think the options below are solutions in search of a problem, but they do make the cart stand out more.

Make it red:

Can’t say I love it, but it is more distinct.
The badge is still an obvious change from empty.

Make it solid:

I prefer this to the red tint above, though a solid black cart competes a bit visually with the search icon.
The badge still jumps out on a solid cart.

I mentioned earlier that Amazon also has a zero on their cart, though a key difference is that they don’t use the notification badge style (I still don’t think they need the zero, but I’m guessing their unlimited user testing budget may have told them otherwise).

A zero, yes. But not a notification badge.

Conventions help users

Over the years, we’ve become familiar with all sorts of visual elements in our online world. Our brains process these elements quickly as specific things. Three stacked lines = menu. Red numbered circle = notification. Web interfaces are a language that we rely on to navigate a site quickly. When using familiar styles, it’s best to stick to implementing them in a way that’s consistent with their established use.