Summer is just a few days ahead of us. I’ve been shopping here and there lately for some summer outfits and accessories, mostly via the internet. It was a great opportunity to give those e-shops a second thought. The shopping experience wasn’t always a delight.
Both e-commerce and m-commerce are on the rise, since the access to portable devices is getting easier and easier. It is good to know, that:
- Roughly 4 out of 5 Americans are now online shoppers, with more than half having made purchases using a mobile device.
- Users who have a negative experience in your mobile store are 62% less likely to purchase from you in the future.
Here are my recent observations about the most common UX mistakes I’ve witnessed.
The cart doesn’t show any number
I liked a product, so I clicked the “Add to cart” button. And then…whoosh…nothing happens. No confirmation. The cart icon doesn’t show anything — just sits in the upper right corner and shows no interest in telling me that there’s actually something inside. “Has the product been added? Or maybe it cannot be bought? Should I try again?”. I thought there was some mistake…and I clicked on the “add” button again, and again, and again… and when I finally got into the cart to check what’s going on, there was my item with the quantity of 10.
Conclusion: Make sure that the cart shows the quantity of the items that have been added to it, right after the user does it.
Editing the shopping list is hard
I wanted to edit the quantity of the product (for example, I’ve accidentally double-clicked the “Add to cart” button). But there is no simple way to do that. I ended up with completely deleting the item from my cart, and there was no other way to add it again, but to search it again in the catalogue. I ended up irritated and I left the shop without buying the product.
Conclusion: always make sure that there’s an easy way to edit the quantity of the items. Suggest the items that the user has shown interest in somewhere below the cart.
CTA and transaction buttons nightmare
Two main problems with those.
The first one: the main CTA, for example — “Buy now”, or “Shop the collection” are barely visible. Sometimes, there is just a delicate outline with a very unreadable font, placed on a photo that doesn’t have the right contrast.
Why even put it there then? This is not visible. Users are simply going to ignore it. I went through a lot of user sessions and the conversion from those buttons is near 0.
The second one: at the checkout, two buttons: “Go back” and “Proceed to payment” are looking exactly THE SAME. Why on earth? Don’t you want your customers to actually buy something from you?
Conclusion: Make your CTA stand out. Use a different style/color and save it only for CTA buttons. This will help your users to differentiate them from others.
Too much is going on
It’s the situation when literally everything on the shop website screams “BUY ME”, “LOOK AT ME”, “CLICK HERE”. It just makes my anxiety level go up like crazy. I don’t know what to focus on. I feel overwhelmed and lost. I see you have a lot to offer but do I even want to learn more? Probably not. Goodbye.
Conclusion: Give the user some space, one thing at a time. It is good to have a wide offer, but the more options, the harder is for the user to actually decide. Take „The Miller’s Law” seriously and don’t overwhelm the user’s cognitive load.
Price is hidden
I know, I know. There are luxury shops that don’t show the price of the items, because this is their marketing strategy (for ex. Chanel — I love their bags and accessories, but the price is always a surprise and they’re all about shopping experience in their boutiques).
But sometimes more regular shops don’t show the price, too. Or it is barely visible. Why do that? If the price is a concern to me, I am going to search for it despite the fact that you‘re hiding it from your customers. This is a very irritating dark pattern and the users always complain about it.
Conclusion: don’t hide the price of the product. Make it clearly visible and accessible.
Changing the language is hidden or impossible
Sometimes I’ve visited a foreign shop and wanted to take a look at the offer. But then there was Dutch, French, Spanish… and all the languages that are completely not understandable for me. So I started to search for the English version. Checked the header, hamburger menus, footers, but no signs of the language switch.
Conclusion: make sure that the shop has the English version (it may be helpful for the user even if the shop doesn’t ship worldwide). Place the language switch option in a place where it’s easily accessible/visible.
Crucial elements are hidden under modals or popups
It happens mostly on the mobile versions of the shops and I am always amazed with it. Does anyone even check those e-shops, how they look and work on different mobile devices? Some QA could come in handy… A few real-life examples:
- „Cookie policy” modal or other floating element is covering main CTA/purchase button.
- „Newsletter popups” are covering the main CTA’s and are too hard to close.
- „Chatbot” or other „may I help you” stuff is covering CTA or some navigation
Conclusion: for the user’s sake, always make sure that no other element is covering the main features/UI elements, so they are visible and easily accessible. Things that work well for desktop are rarely good for mobile, too.
Unclear navigation
There are two problems here, too:
- Certain categories are hidden under photos or under icons and they are not visible enough
- Navigation is designed in a very non-standard, creative manner and it’s hard for the user to understand and operate
Although many are against using hamburger menus, I think it is still better to do a hamburger than to design any other weird, non-standard UI elements and patterns instead.
Conclusion: the most simple, clear and standard navigation is, the better. Don’t make the user learn difficult patterns when your main focus should be making the shopping process quick and easy.
