Find and fix them with this guide.
Recently, I have been buying summer clothes and accessories, mostly online. It was a great opportunity to think again about online shopping. Shopping wasn t always fun.
Both e-commerce and mobile commerce are on the riseas accessing portable devices is getting easier and easier. This is evidenced by the following facts:
- Roughly 4 out of 5 Americans now shop online, with more than half of them doing so using mobile devices.
- The likelihood that users who have a negative experience of using your mobile store again will buy something from you by 62%.
In this article, I ll show you the most common UX mistakes I ve encountered on websites.
The cart does not show the quantity of items added to it
I liked the product, so I clicked the Add to Cart button. And then … bam … nothing happens. No feedback. The cart icon does not show anything – it is just in the upper right corner and does not tell me that there is actually something inside it. “Has a product been added? Or maybe you can t buy it? Should I try again? ” I thought it was some kind of mistake … and clicked the add button again, and again, and again … and when I finally went to the cart to check it, there was 10 of my product.
Takeaway: Make sure the cart displays the number of items added immediately after the user clicks the button.
Difficult to edit shopping list
I wanted to change the quantity of a product (for example, I accidentally clicked the “Add to cart” button twice). But there is no easy way to do this. I ended up having to remove an item from my cart and there was no other way to add it again but to re-search the catalog for it. I got angry and left the site without purchasing the product.
Takeaway: Make sure there is always an easy way to change the quantity of an item added to the cart. Offer items that the user has shown interest in somewhere under the cart.
A nightmare with transaction and call to action buttons
These elements have two main problems.
First problem: the main call to action, such as “Buy Now” or “Buy Collection”, is almost invisible. Sometimes in a photo that does not have the proper contrast, there is only a thin outline with an unreadable font.
Why then put it there at all? It is not visible. Users will simply ignore it. Conversion from these buttons is close to zero.
Second problem: during ordering, there are only two buttons: “Return” and “Proceed to payment”, which look the same. Why on earth? Don t you want your customers to buy something?
Takeaway: Make your call to action visible. Use a different style or color and reserve it for call-to-action buttons only. This will help your users distinguish them from other buttons.
There s too much going on
It happens when literally everything on the store s website screams “BUY ME”, “LOOK AT ME”, “CLICK HERE”. This makes me feel anxious. I don t know what to focus on. I feel depressed and lost. I see your store has a lot to offer, but would I like to know the details? Most probably not. Farewell.
Takeaway: Give the user a break, show one thing at a time. It is good to have a wide range, but the more options, the more difficult it is for the user to make a decision. Take Miller s Law seriously and don t overwhelm the user.
Price is hidden
I know I know. There are luxury stores that do not show prices for goods because this is their marketing strategy (for example, Chanel – I love their bags and accessories, but the price will always be a surprise, for them it all comes down to the boutique shopping experience).
But sometimes the price is not indicated in ordinary stores. Or you can barely see it. Why do that? If I want a price, I will look for it even though you hide it from your clients. This is a very annoying dark pattern and users always complain about it.
Conclusion: don t hide the price of the product. Make it visible and accessible.
Language change is hidden or not possible
It happened that I went to the website of a foreign store, but there was Dutch, French, Spanish … and other languages I did not understand at all. I started looking for the English version. Checked the header, hamburger menu, bottom footer, but no sign of language switching.
Conclusion: make sure the store has English version (she can be useful for user, even if score not delivers products by all the world). Place option switching language in easily accessible / noticeable location.
Important elements are hidden under modals or pop-ups
This is mainly found in mobile versions of stores, and it always amazes me. Does anyone even check these online stores to see how they look and work on different mobile devices? Quality control can help them … Some real-life examples:
- Subscribe pop-ups overlap calls to action and are difficult to close.
- “Chatbot” or “Can I help you?” overlap a call to action or part of the navigation
Takeaway: In the interests of the user, always make sure that no element overlaps the main functions or interface elements, so that they are visible and easily accessible. Models that work well for desktop computers rarely work well for mobile devices.
There are also two problems here:
- Some categories are hidden under photos or icons and are not visible enough.
- The navigation is designed in a very non-standard creative manner and is difficult for the user to understand and use.
While many are against using a hamburger menu, I think it s better to make a hamburger menu than to design other weird, non-standard patterns and interface elements.
Conclusion: the simpler, clearer and more standard navigation, the better. Don t force the user to master complex patterns when your main goal is to make the buying process quick and easy.
The easier and more convenient the experience is, the better. The buying process should be as pleasant and fast as possible. Tell the user about his choice. Don t hide important information. Make the navigation simple and straightforward so that the user doesn t have to think for a second. It is best to use well-known patterns. And if you add new features, always check how they look and work on both desktop and mobile.