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

Gravity Sketch on Oculus Quest: disrupting the future of design

The Boolean Game | Critique I

Forget Slack. Discord is the best messaging app I’ve ever used.

Gradient — Nature effortlessly achieves what takes designers so much effort to copy.

Presenting the paper 'Requests from companies and requirements for design education in Brazil…

Supporting Elements of Information Architecture.

Build In Resilience

OTT Apps: Combat short attention spans, and keep users engaged

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

For digital authors drawn to unstructured writing, separating composing from performing yields…

Digital Initiatives and Strategy at the Hammer Museum

Weekly Dose of Inspiration — July 12, 2021

Best Podcast Software for a Great Podcast — Podcast recording software, podcast editing software…

Best Podcast Software for a Great Podcast — Podcast recording software, podcast editing software and podcast host etc.