Last week, a student in the wechat group raised a question: what are the differences in the design of shopping carts? Yes, the shopping cart interface design is somewhat similar to other functional interfaces. But that doesn’t mean it doesn’t make sense to study it. On the contrary, it could be even more important.
As long as it is an e-commerce product, the function of shopping cart must be inseparable, which can be said to be the standard function of e-commerce product design. As one of the most important links of platform trading transformation, the adjustment of every detail may bring data fluctuation.
Therefore, it is more necessary for us to have in-depth thinking and careful verification. Today about shopping cart design, we start with a short story about it.
Cart VS Bag
If you spend a lot of time on various e-commerce platforms, you’ll notice that some platforms use Cart and others use Bag for the concept of shopping Cart.
Apart from some special cases, we can find that usually only vertical e-commerce platforms of fashion, cosmetics and accessories use Bag, such as Zara’s independent client.
What’s the difference between using Cart and Bag? Will it affect trading? Conversion Fanatics, an American design firm, did a study on this question two years ago on the occasion of a design redesign for its clients.
They ran a test with Add to Cart and Add to Bag during the revision. The results were surprising. In the 50:50 traffic distribution test, using Add to Cart brought a 95.3% higher PV to the payment interface than using Add to bag, while other data also showed a significant improvement.
As we mentioned earlier, shopping cart is one of the most important links of e-commerce platform transaction conversion, and even a slight increase in conversion rate will bring huge benefits to the platform. So why did these vertical e-commerce platforms choose bags to replace shopping carts from the very beginning?
Uxmovement has an article about this issue. They believe that users will have many different understandings of Bag. If users are shopping on a platform selling bags, they believe that Add to Bag will make them buy another accessory that they do not need.
From a psychological perspective, Cart is a container that helps users collect the goods they want to buy. Users can put or take out the goods at will without any pressure. The Bag makes the user feel that the item has already been purchased and cannot be changed.
Let’s go back to the comparison data from the previous test. Maybe this is a special case, or maybe the sample size is not large enough. But it actually tells us something very important:
- There is often a lot about the user’s understanding of information that we are not aware of;
- Even small changes can have a significant impact on the platform’s overall funnel;
- We need to be cautious about changing the design of the transformed core link.
Regarding Cart and Bag, Conversion Fanatics does not provide more follow-up information, but more points of view to observe and understand users.
What does a user understand about a shopping cart? What message does it send to the platform? How to achieve greater levels of success? These are the questions we need to think about in the process of designing the functional interface of shopping cart. With this information in mind, let’s talk about the design logic of the shopping cart.
What problems do shopping carts solve
In the previous Pattern division, the shopping cart was classified into the business type. That is to say, its design is layered. In addition to the basic (default) design, we also need to superimpose a layer of business characteristics, and its final presentation has a strong relationship with the business.
In general, the shopping cart is a functional module used by the platform to facilitate user purchases. On the surface, it is used to temporarily store items that the user wants to buy, but more abstractly, it is used to bridge the gap between “shopping” and “buying”. In this gap, we need to start from the most basic function point of view, step by step to enlarge the value of shopping cart.
The screenshot above captures the shopping cart interface for four different platforms. We can see the complexity of the information and functions in the shopping cart interface step by step from left to right.
If we just look at it from a pure performance level, there are a lot of designs that we have a hard time explaining why we need them, right? Why would you do that? Therefore, we need to split the design of the shopping cart, partly because the shopping cart pattern is necessary, and partly because the business features are added.
Shopping cart basic frame
As we mentioned earlier, the design of a well-defined, user-recognized functional module needs to be universal. Only on this basis can we first maintain its basic guarantee for the whole trading link. After all, the design that is too advanced in concept may not be used by most users, which will also go against our design goals and business goals.
Leaving the business side aside for a moment, a basic, common shopping cart interface might look something like this: Fancy. Mainly for commodity information, price, total price display and CTA.
If we expand the scope a bit and take several different product shopping cart interfaces and overlay them to create transparency, you’ll see some common information that every shopping cart interface has. For example, product title, picture, quantity, unit price, total price, CTA…
Therefore, we can obtain a basic interface framework for the shopping cart interface through these “similar items”, which is also the basic equipment for the shopping cart interface.
The shopping carts that users encounter on a daily basis contain these elements and are laid out in this way, which should be the starting point when designing the shopping cart interface for a new product to ensure minimal learning cost and greater efficiency for users.
From the perspective of this basic framework, the most basic problem to be solved by shopping cart is to inform users of the items they want to buy, their specifications and quantity, as well as the total price and guide them to pay.
After satisfying the basic framework of shopping cart interface, it can basically support the most basic shopping of users on the online shopping platform, and complete the purchase behavior smoothly.
However, as one of the most important links in the whole transaction path, we also need to continuously enlarge its conversion rate through design. This means that we need to “decorate” the shopping cart interface so that users’ purchase intention and purchase quantity can be further improved.
The above is an excerpt from the 11th issue of Design System series. In the following content (payment part), we will further disassemble the Design of shopping cart interface from three different levels through the analysis of several practical cases.
Join PinDesign to receive the full text of this issue’s theme “Design Logic of shopping cart” and the first 2 weekly issues of this series. Annual payment members will receive all the articles in the Design System series (01~10) as gifts.
Design System is a new series of PinDesign weekly that summarizes experience in systematic Design of products based on the concept of “Design Systems”. I hope to share my feelings and experience with you to help you read.
Click to receive a 50 yuan coupon for PinDesign membership program
The Design System series has been updated:
5key: What is the Design Systemzhuanlan.zhihu.com
5Key: Design Systems 02 – What are Design Principleszhuanlan.zhihu.com
5Key: What are the differences between Components and Patternszhuanlan.zhihu.com
5key: What temperament should you design for the productzhuanlan.zhihu.com
5key: indicates the Design Token in the Design Systemzhuanlan.zhihu.com
5Key: Design Pattern instance – User notification and interruptzhuanlan.zhihu.com
5Key: Design Pattern combination instance – list page Design thinkingzhuanlan.zhihu.com
5key: The division of Design Pattern is the logical thinking of Designzhuanlan.zhihu.com
5Key: Design Pattern – Display logic of page informationzhuanlan.zhihu.com
5Key: Talk about form design from another perspectivezhuanlan.zhihu.com
Click the link below for details of PinDesign membership program:
PinDesign Internet Product Design weeklywap.youzan.com