How to "Add to cart" properly
Today I want to talk about "add to cart" buttons in e-commerce apps and mobile web. I've been working as lead mobile app designer at Autodoc (Play Store, AppStore) for 2 years and I had to design product pages for 5+ apps. Every time I face the same questions when designing purchase experience and particularly with product lists and pages where people make their decision about purchasing. I'm going to share a system that I use for this key part of e-commerce app and I hope it will help you in your design.
So you need to design e-commerce app. At some point it is time to design page with products list and the product page. As usually you draw container with a product name, photo and price something like this:
First question is:
Should I put "Add to cart" button in product list?
I recommend you not to put "add to cart" button in the product list if:
- your products are filled with details and usually are bought after
thorough characteristics research. Better make them go to the product page to buy;
- people usually buy one item, not ten (unique products, expensive products);
- you are a fashion clothes shop.
Basically, you can manipulate users to buy from product page rather then from product list using "Add to cart" button and its up to you to decide what will work for you best. Situations above are usually shops where detailed description and trust-building rises conversion. This can be achieved better from product page where you can place important details about your products, like info about delivery and guarantee.
I recommend you to put “add to cart” button in the product list if:
- your products are usually bought on impulse and you want to shorten the purchase loop;
- your products are usually bought in packs;
- people tend to compare products before buying (your products has substitutes, that are also available to buy);
- you are using discounts and offers a lot, and placing "add to cart" button will rise your conversion;
- people usually know the product that they are going to buy, so they don't need to learn specifics about them.
"Add to cart" button at product list speeds things up for user because he can compare product prices and add to cart without extra actions. It is always good to make things fast and convenient for users. But be careful not to make a mess at product lists. The most important thing about any list is easy scanning.
Second question is:
How "Add to cart" should be designed?
This set of recommendations may be obvious but I still see a lot of mistakes in dribbble designs and real apps as well.
1. If you mark your cart with an icon use the same icon for "add to cart" button. Mixed symbols makes your app messy and less intuitive.
If you want to use phrase "Add to cart" accompany it with matching icon from your cart:
2. Your button must be informative and responsive.
User should always see what happens when he presses the button. In case of -adding to the cart user need to be made sure about:
- what will happen when he presses the button (for example icon with plus shows that this button adds);
- product is added to the cart (for example tick icon suggests successful adding);
- how many of this product are in the cart;
- where the user can find the cart (often mistake).
Example:
We see three visual responses to user:
1. icon changed
2. number is seen
3. cart reacted
In the next chapter I will tell you how you may deal with multiple product adding.
Another problem is “Add to cart” at product page. One single button may seem too “massive”. Here are options people usually consider:
To fix or not to fix?
It is always better to pin the button to the bottom of the screen but don't forget to save empty space at the end of the content so your button will not cover important data.
Recommendation: if user can see "Add to cart" button when he enters the screen in any case (screen size, content size) — you may not pin it to the bottom. If user need to make a scroll to see the button — pin it:
Should you use "white base" (#3 in "Most used patterns" pic) or "float" (#2), or any other way — its up to you, but consider this:
1. If you use a phrase note that its length may vary in different languages.
Maybe you will translate your app for different countries in the future and you don't want your phrase to be wider than the button. To avoid this use long buttons and height that will work with two lines of text
2. Consider the multiple adding functionality. Maybe you are going to have a "calculator":
3. Consider additional buttons, for example Wishlist button:
Eventually you need to design your button keeping in mind additional elements that you may add in the future.
Last question is:
How to design intuitive adding of several products?
How user should add more than 1 product in the cart? It depends on several factors. Let's review those to help ourselves find the best way:
1. What quantity people usually buy?
If its mostly 1–5 products tops, you can use "more taps = more copies" system:
It is simple and elegant.
There is a system where first click adds to cart and second leads to the cart. It is done to speed up the purchase but I recommend to avoid it. Unwanted screen change can irritate the user and distract from browsing. Make cart button obvious instead.
If users usually/can buy from 5 to ∞ clicking will not be enough. There are 2 alternatives for "calculator" that I want to show you, but first let's talk about calculator problems.
2. Why I shouldn't use the "calculator" counter?
- It takes a lot of free space.
Especially if you want to make it right — with big enough button for easy press and pressable number to change it with keyboard. Is it worth that space? - It can have two possible scenarios and none of them is native.
User wants to add 2 items. He presses "plus" 2 times presses "Add to cart". What he will see?
a. Calculator will stay with number "2". What should user do if he wants to add one more? He should press "plus" and item will be added automatically or he need to press "minus", set counter to "1" and press "Add to cart" again?
b. Calculator will reset to "1". Again we have a confusion moment. In order to have specific number of items (7) user needs to count in his head (2+5).
3. What about "zero"?
Another question is what should we do with "minus 1"? It creates a lot of unnecessary logic. Analytics show that users will try to press "minus" to remove accidentally added items. But it will conflict with cells with not added items.
4. What about products that can only be bought in pairs?
It is a rare situation, but sometimes your products can only be bought in pairs. And calculator don't have functionality for this cause. For example at Autodoc brake discs can only be bought in pairs. Because of this manual change of the number is disabled which is bad for usability.
If something works in certain way at one page it is supposed to work the same at other pages.
Other ways will look like element is broken.
I have 2 suggestions
1. Intuitive
If user clicks once (or three/five times, depends on how many copies people usually buy) — one item is added to the cart with each click. But if he clicks more than one/three times we give him a popup that says "Seems like you want to buy a lot of copies! How many copies do you want?" and a manual input. It is intuitive decision directed to users that buy 10+.
2. Built-in calculator
If you can't live without calculator feature you can put it in the button to save some extra place. It is relatively new and can be risky if your users are
conservatives or retirees;
3. Button for fixed quantities
If you can only choose fixed quantities use can use this:
Conclusion
- "Add to cart" button can help you create specific patterns in user experience in your app;
- It is a sensitive element and requires responsiveness and consistancy;
- Be careful with multiple buying;
- Easy buying experience — easy conversion.
Thanks for reading and good luck!
I am Sairengy and you can find me at Facebook, Dribbble, LinkedIn
My article about shapeshifter.design
