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
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”
“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”
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).
The results:
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
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.
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
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
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
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
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
