Shein: Usability Analysis
Shein is a Chinese online retailer that serves over 220 countries worldwide, attracting customers through its variety of items, in diverse styles and sizes, and (extremely) affordable prices.
In this article, I am doing a walkthrough on “Jakob Nielsen’s 10 Usability Heuristics” to analyze their website’s main usability heuristics with examples of how they can be applied to e-commerce websites.
#1: Visibility of System Status
The design should always keep users informed about what is going on, through appropriate feedback within a reasonable amount of time. (nngroup, 2020)
- The shopping bag indicates new items have been added by showing bag content for a few seconds after the user has pressed the “add to bag” button.
- The use of a pathfinder during checkout helps users understand where they are and how many steps they have until they complete the purchase. This helps users have more confidence and autonomy when using the website.
#2: Match between system and the real world
The design should speak the users’ language. Use words, phrases, and concepts familiar to the user, rather than internal jargon. Follow real-world conventions, making information appear in a natural and logical order. (nngroup, 2020)
- The term “shopping bag” is used even though it is not actually a bag. This relates to the experience of shopping in a physical store, where customers are given a bag to store all their products while they shop.
- Division of outfit categories similar to physical stores — names and information architecture. Ex: “Tops” includes blouses, t-shirts, polos, among others. This makes the experience more intuitive even for users that are not familiar with online shopping.
- Size charts show the human figure for users to better understand they should measure in their own body. In specific products there is also a fit finder where users can calculate their size based on height, weight, age, and body form. These features allow users to have a more realistic view of fitting according to body measurements and types.
#3: User control and freedom
Users often perform actions by mistake. They need a clearly marked “emergency exit” to leave the unwanted action without having to go through an extended process. (nngroup, 2020)
- When entering the shopping cart, users may choose to exit it and continue shopping by pressing the “continue shopping” button. This gives users a guarantee that they can perform such action without resorting to the browser back button and risk losing all progress.
- If users for any reason close the product page tab, they can easily find it again in the “recently viewed” button on the profile dropdown menu.
- The total price is available for consult on every page once the user hovers over the shopping bag. This helps users check if they are within budget.
#4: Consistency and standards
"Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform and industry conventions." (nngroup, 2020)
- All buttons on the website are consistent within its category. CTA buttons have a black background fill, the main menu buttons look identical and have a hover interaction indicating which button the user has the cursor on top (this is especially useful since all of them open dropdown menus), size and color buttons look the same in every product page (color buttons even look the same in the results page), among others.
#5: Error Prevention
Good error messages are important, but the best designs carefully prevent problems from occurring in the first place. Either eliminate error-prone conditions, or check for them and present users with a confirmation option before they commit to the action. (nngroup, 2020)
- When a user deletes an item from the shopping bag, a pop-up message asks the user if they want to save the item for later in their favorites tab. This prevents users from losing the product among so many options within the website.
- Users input their address on the first step of the checkout process, and this information continues visible once the user moves on to the next step. This helps users check their information multiple times and prevent them from ordering to the wrong address.
#6: Recognition Rather than recall
Minimize the user’s memory load by making elements, actions, and options visible. The user should not have to remember information from one part of the interface to another. Information required to use the design (e.g. field labels or menu items) should be visible or easily retrievable when needed. (nngroup, 2020)
- Most of the buttons on the Shein website are labeled (and the few that are not have captions with hover function). All menu buttons are clearly labeled and in the corresponding category.
- The filter bar is fixed on the left of the page, making it visible to the user at any time, even if they scroll to the bottom. This way, users don’t need to memorize the filters applied.
#7: Flexibility and efficiency of use
Shortcuts — hidden from novice users — may speed up the interaction for the expert user such that the design can cater to both inexperienced and experienced users. Allow users to tailor frequent actions. (nngroup, 2020)
- On the results page, the user has the option of selecting the product’s color and size and add it directly to the shopping bag, without having to open the product page.
- If users want to remove all filters they do not need to uncheck one by one, Shein provides a “clear all” button to make the process more efficient.
#8: Aesthetic and minimalist design
Interfaces should not contain information which is irrelevant or rarely needed. Every extra unit of information in an interface competes with the relevant units of information and diminishes their relative visibility. (nngroup, 2020)
- It is a push to say that Shein’s website design is minimalistic since they have a significant amount of content. However, they organized the content in a way that is clear to the user and easy to find their way. The choice of black and white as their main colors helps since all they already have a significant color presence from the product images.
#9: Help users recognize, diagnose, and recover from errors
Error messages should be expressed in plain language (no error codes), precisely indicate the problem, and constructively suggest a solution. (nngroup, 2020)
- When a product is unavailable during checkout, users receive a message and are required to remove the item manually. This helps users understand which item they are removing and if they would like to continue with the purchase anyway.
#10: Help and documentation
It’s best if the system doesn’t need any additional explanation. However, it may be necessary to provide documentation to help users understand how to complete their tasks. (nngroup, 2020)
- Shein provides a customer service page where users can ask questions or read the FAQ section to find what they are looking for.
Overall, Shein offers a user-friendly website where familiar and non-familiar users can easily get around and accomplish their tasks in an efficient and fun way.
