Cart icon & mental model

Buying things from the internet became so natural all these years. Finding a product you’re interested in, looking for the big button, in order to add it into your bag, sorry basket, i mean cart.

This journey sounds straightforward, but as we know has many pitfalls that can often lead to dead end. We will magically skip the tricky parts on users buying journey and we will talk about things that usually seem obvious or least important.

How the heck should we call the thing in the top right corner where I review my item before I complete my purchase.

But first, what text e-commerce use for their purchase CTA

“Buy now” vs “Add to Cart / Bag / Basket”

Image for post
Image for post

“Buy now” type of wordings used to be a common pattern in the past. They tend to create a sense of implied urgency to convert more views into sales. Implied urgency is when you use words like “now” and “today” to nudge readers to take action. There is no real urgency, but we’re suggesting that there’s a need to act now.

We see companies now moving away from words that imply immediate purchase commitments. This type of wording seems too final, and might scare people off who put a product in their cart, but are still deciding whether to go through with the purchase.

Takeaway: Use Add to Cart / Bag / Basket

“Add to Cart” vs “Add to Bag” vs “Add to Basket”

Image for post
Image for post

Which wording should I use? That leads to, which icon should I use?
We did a little bit of research through some well established e-commerce sites (direct or indirect competitors).

Image for post
Image for post

The results:

Image for post
Image for post

From the above research we can highlight the following:

  • Cart & Bag are icons we saw repeatedly in our research
  • Basket icon is not so commonly used compared with bag & cart (we didn’t took into consideration FMCG though).
  • Fashion sites use bag
  • Multi product sites use cart

In parallel we run an in-house survey about “cart” icon preferences with 76 responses, with the following results:
52.6% Cart / 27.6% Basket / 19.7% Bag

Let’s analyse these a bit further.

Fashion sites use bag

Multi-product sites use cart

Users mental models

Mental models even simpler are deeply held beliefs about how the world works.

Users form their mental models based on the physical world and the websites and apps they use in their daily lives. So they expect to see a similar functionality to the one that they are used to from their previous experiences.

The physical market

  • Walking into a store.
  • Adding the products to a cart.
  • One last chance to think if we got everything.
  • Go to the registry and pay.

If you think about the physical world, things make kind of sense. You use a cart for larger objects, for example, electric appliances — a basket for smaller ones like groceries, and a bag for the smallest items, like clothes.

What’s wrong with the ‘Cart’ anyways? Well, it just doesn’t fit with every kind of store. Some stores don’t use carts in their physical stores, so it might not make sense to use them in the digital one.

Experimenting outside the norms

  • 1–3 — Display a Bag
  • 4–6 — Display a Basket
  • 6+ .. — Display a Cart

https://www.youtube.com/watch?v=nGcbhgJvetM&feature=youtu.be

Codepen link: https://codepen.io/srekoble/pen/wvBdRXK?editors=0110

Pros

  • Interactive icons give life to a static element

Cons

  • Inconsistency between text (that remain static) and icons
  • Bag, as the smaller icon, will be the default icon

What if we introduce “bag” icon only for apparel categories?

  • Display Bag for fashion categories (etc clothes, shoes etc)
  • Display cart for the rest

Pros

  • Common experience with other apparel sites

Cons

  • Messy mental model, users has to understand our separation
  • Cross-category purchases can become confusing

Being different may be costing you

“Choosing a different [link] color is by no means a problem, but it may affect the speed with which users find [your content],” wrote Fedeyev.

Translating this to our case study

“Choosing a different icon is by no means a problem, but it may affect the speed with which users find your cart”.

Putting all the pieces together

  • There is a trade-off between convention and innovation
  • Users are so familiar with cart as a concept that visually ignore icons

Takeaway

Since we are talking about an e-commerce website, all we want to do is to reduce the friction in the flow and reduce the cognitive load of the user. Everything has to look familiar and work as expected. — once we do, we will find successful ways to break away from the norms.

References

Product Design Manager @Skroutz

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store