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. The right things are there: retail location drop down (showing the current store’s hours for the day — nice touch), search bar, menu and cart icons. It was that last thing, the cart icon, 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?
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.
Maybe Indigo’s UX research budget allowed them to run a test that showed users found the cart faster if there was a badge on it (it’s definitely more eye-catching, and I admit I’ve seen a visible zero on carts on other sites, including Amazon). But it doesn’t need to be eye catching: why would someone need to find an empty cart as fast as possible? Shouldn’t their initial focus be on buying things?
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, you could give the icon more weight by making it solid black.
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 perhaps their unlimited user testing budget told them otherwise).
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.
Update
At some point since I published this post, Indigo revamped their site. Their header remains nice and minimal and I’m delighted to see they removed the notification badge when you’ve got nothing in your cart.
