Cart icon & mental model

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

There’s one thing all e-commerce sites have in common. You have to click a CTA to select the items you want to purchase. CTA is one of the most important elements, think of it as the door to the next step of our funnel, where every click is a potential purchase. CTA should have a clear meaning, and be representative of the action our visitors are taking. But the text labels on the buttons aren’t always the same.

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

Takeaway: Use Add to Cart / Bag / Basket

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

  • 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

Fashion sites use bag

From our research, the word “bag” is primarily used by apparel retailers like Macy’s, Asos, Zalando. This trend follows with a rate of 80% of sites using the icon “bag” whose focus is on apparel. Nowadays the term ‘Bag’ has become the new norm at least for websites that focus on apparel and fashion.

Multi-product sites use cart

The word ‘Cart’ has become the default word when it comes to e-commerce. It was Amazon and Zappos in the late 90s that familiarised the idea of the shopping cart and users didn’t seem to have trouble understanding what ‘Cart’ means. The ‘Cart’ became the norm, and it seems that it is tough to break out of the norms. From our research when it comes to mixed commerce sites, cart is the way to go.

Users mental models

Mental models are an artefact of belief. They are the beliefs that a user holds about any given system or interaction. In most instances, the belief will — to a certain extent — resemble the real life model. This is important because users will plan and predict future actions within a system based on their 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

In our case, shopping in a store. So the scenario would be something like this:

  • 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.

Experimenting outside the norms

What if we had an icon that behave differently based on the number of products?

  • 1–3 — Display a Bag
  • 4–6 — Display a Basket
  • 6+ .. — Display a Cart
  • Interactive icons give life to a static element
  • Inconsistency between text (that remain static) and icons
  • Bag, as the smaller icon, will be the default icon
  • Display Bag for fashion categories (etc clothes, shoes etc)
  • Display cart for the rest
  • Common experience with other apparel sites
  • Messy mental model, users has to understand our separation
  • Cross-category purchases can become confusing

Being different may be costing you

Taking for example blue links, that is something all of us despise, will make you realise that there’s a reason why blue has remained the standard color for links — the color has become an intuitive call to action for people. Over the last two decades or so, people have grown accustomed to certain usage patterns on the web. And if you want to switch things up?

“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

  • When in doubt, use cart as the safety brand icon
  • There is a trade-off between convention and innovation
  • Users are so familiar with cart as a concept that visually ignore icons



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