Shopping cart has become the name of the game for e-commerce websites like Amazon, Flipkart, or for any e-retailer that you can think of. It has become a common experience metaphor used widely in the online world.
However, the way the cart’s behavior is modeled isn’t always the same. There are subtle nuances (not very apparent to you as you shop) that often vary across these sites.
Recently, we were designing an experience for a mobile application that allowed sports fans to order snacks & drinks inside a basketball stadium. It’s like you are watching a game in the stadium, cheering up your team, emotions are high, and you would like to order something to munch as you watch the game. Well, from an experience perspective, understanding the environment was crucial to craft the right experience. Like considering the implications of fans cheering up their teams, noise levels inside the stadium, not so well lighted arena’s, the game being the central part of their focus, etc. This blog isn’t going to talk about all the design considerations, but will talk about something small, which yet turned out to be a brain teaser.
This app, as it turned out, had a CART metaphor, again! One of these subtleties was the choice between showing the number of items in the cart v/s the total cost of the cart, or both? Well, sounds like we never notice this when we shop online, but yes, we wanted to ensure the design decisions follow a strong rationale, no matter how small the decision was. Also, we didn’t want to copy somebody, just because “they did it like that…”.
There has been a lot of discussion on this topic, some advocating to show both the pieces of information while some suggesting that either # of items or the cart cost should be sufficient. Certainly, each approach comes with its own rationale.
Our study led us to settle down to show ONLY the # of items in the cart, and NOT the total cost of the cart, and here’s why:
Cart concept is actually a borrowed concept. It started from the e-commerce domain. The shopping behavior in websites like amazon is different from what we had in our case. Amazon (or any other e-commerce marketplace) for instance, will have an extensive portfolio of products. Our app. on the other hand was going to have a shallow menu to choose snacks and drinks from.
Number of Items (yes, our choice):
Our portfolio of items/menu was shallow. It’s wasn’t like amazon where users will spend maybe half an hour or more to go and browse, pick up stuff. Another thing to notice is people don’t buy multiples (of the same product) on amazon. You won’t buy (usually) 3 MacBooks at the same time, and then add 3 more iPhones over it. And that’s the same reason you won’t see the choice of a number of items when you are picking up the item on such sites.
In our case, it was different. It’s more about quickly browsing the menu, and one of the primary actions was to add multiples of the same item (imagine you going to the stadium to watch a match with your family and friends). Multiple burgers, beers will most likely end up in your cart.
We thus made the feedback of adding an item (or its multiples) very clear by associating the action with its implications on the cart. Like every tap bounces the cart and the number increments.
Another question, should 4 burgers, 2 fries = 6 items or 2 items. Seems like not a big deal, but something to ponder on. We went for the initial choice (i.e 6 items) since the action of adding an item is closely tied up with its implication on the cart. The feedback sets up a good mental model and shows how this thing works (and the number of items you end up picking at the pickup counter).
Price of the Cart:
Here we tried to answer a higher level question, which was to think about the importance of the cart icon on the top-right of the screen (something common you see). At a very high level, the cart sits there mainly to give a sense that there is something there to be checked out. Showing total price of items along with the cart doesn’t seem to offer too much of value. Will users not order if the cart shows $30 instead of $28? It’s an in-stadium experience, users are not going to care too much about the final cost of the cart. It’s like you going to a theater to watch a movie. Will you not buy popcorns for 5 times their regular price? And not to mention we were levying a few dollars of the convenience fee. Cost doesn’t seem to thus make too much sense along the cart icon in this experience.
We finally agreed on this equation:
- We show number of items (4 burgers2, 2 fries) = 6 items
- We ensure the interactions (like cart bounces) + visual emphasis (we can further highlight the cart for e.g once items are added)
- Although the spatial position of the cart is pretty evident and common, we can include with it a forward chevron to give a sense of further navigation to the checkout screen.
Well, something small, but turned out to be quite a brain teaser. Certainly, this equation might turn out to be different in the context of what you are designing for. Thinking about these subtleties, after all makes the whole difference.
