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

“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

Multi-product sites use cart

Users mental models

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

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.

Experimenting outside the norms

  • 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

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

“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

--

--

--

Product Design Manager @Skroutz

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Quick Guide to the Sitemaps in the UX

4 ways to improve Robinhood — a UX case study

Sample Blog

User flow uncovering. Fluent

Screen Printing Support

Parametric design in VR

Build communities around a program: Mediate, Nudge, Celebrate

Benefits of a Clean Desk Policy

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
vangeltzo

vangeltzo

Product Design Manager @Skroutz

More from Medium

A collaborative project from Masai school.

The dangers of working in customer support

Do Insurance Agents Need a UX Strategy? Yes: Here’s Why

Don’t design anything until you get answers to these 3 questions

A person with curly purple hair looks questioningly at question marks floating around them