8 Ecommerce UI Design Mistakes You Can’t Afford to Make
Designing a pleasant, reliable, and responsive UI for ecommerce brands can be quite the challenge. There are so many boxes to tick. Elements need to load fast but also to provide a personalized experience. They need to be unique but also recognizable and easy to use.
In this post, we’ll be looking at eight common ecommerce UI design mistakes and how they can damage a store’s conversion rates and user experience. We’ll also show you examples of websites that have successfully avoided them so you can get inspired and improve your own UI.
Illogical Product Categorization
A major UI design mistake you can make is not categorizing your products clearly.
When a customer lands on your website, you want them to be able to find exactly what they’re looking for in a matter of minutes. If you have too many categories but only list some of them in your main menu, this won’t be possible.
If you choose category names that your target audience does not understand, or if you only provide one type of categorization, customers simply won’t be able to find their way around your store.
Some brands make the mistake of trying to target low-hanging fruit keywords with their category names. However, just because a search phrase has low competition doesn’t mean your audience will understand or care for it.
Let’s look at a website that has successfully avoided this issue. Digestive Warrior gives their customers two ways to find a product. They have a Shop category, which lists every brand they stock. This is great for all shoppers who already know exactly what they need.
They also have a Help With category, which categorizes products based on symptoms and issues. Here, customers can find what they need even if they have never heard of a specific brand or product.
By having these two types of categories, they effectively cater to their entire target audience.
Inadequate CTAs
Calls to action are one of the most important elements on any ecommerce website. They are, after all, the direct path to conversion.
Failing to optimize them well can reduce your conversion rate. It can also lower the overall user experience on your pages.
Here’s what makes a good CTA:
The button is clearly clickable.
It’s of a color that stands out from the rest of the page, but not too vibrant or garish.
Its font is slightly larger than the font of the rest of the page.
The copy is short and straightforward; it clearly explains what a click will result in.
It is surrounded by plenty of negative space and easy to reach via mouse or thumb on all screen sizes.
Let’s look at ShopSolar as an example of getting CTAs right. They have two in the header of their homepage, both of which are as clear as can be. They are of different colors, so they stand out and clearly show customers there are two different conversion paths before them.
Also note how the brand has cleverly chosen their “quick quote” CTA copy. They understand that the product is complex and niche and that most customers will need a bit of help choosing the right one.
Limiting Social Proof to Product Pages
Social proof is an incredibly important UX and UI element. It can significantly boost trust and credibility and help you stand out among your competitors.
In the ecommerce space, the most effective kind of social proof is product reviews. Customer testimonials also work well, especially if they speak about the overall quality of your brand, your packaging, or your customer service.
The mistake most brands make, however, is not forgetting to include social proof or including sub-par social proof. It’s limiting it to their product pages.
While product reviews are effective on a product page, what happens if a customer never looks at a product? You don’t want to miss out on the opportunity to show them the quality of your inventory.
To that end, you should include social proof in the review format on your homepage. Mannequin Mall does this very well. They have a sticky Reviews flyout on the right. Customers can easily click on it and check out what others have had to say about their products, without having to browse numerous pages.
Info Clutter on Product Pages
Speaking of product pages, another UI design mistake you can easily and inadvertently make is creating unwanted and unnecessary clutter.
Most product page optimization guides will tell you that you need to write detailed, benefits-oriented product descriptions and use as many relevant keywords as you can.
While this is certainly true, it also comes with the unwanted side effect of too many words on a product page that customers simply won’t want to read. And if they feel overwhelmed, they are not likely to keep exploring.
The solution is rather simple: all you need to do is hide some of the information under a dropdown header.
Check out ATH’s electrolytes product page as a good example. It has several collapsible sections that provide all the relevant information about the benefits of the products, how to use it, and other frequently asked questions.
This solution leaves the page clutter-free and light on the eyes. Customers are only shown the most vital information when they first land: basic product information, pricing, and potential discount. For everything else they might want to know, they can just click on the intuitively named sections and read more.
Limited Zoom Capabilities
Being able to zoom in is one of the most important UI elements on some types of ecommerce websites. While it will not be as important for brands that sell supplements, for example, they are key for brands that sell clothing or furniture.
A lot of brands offer a basic zoom feature. They let customers enlarge an image a bit without actually letting them see the finer details of the item. Other ecommerce websites have an even poorer zoom option, which opens a slightly larger image in a new window without zooming in properly.
This is simply a bad UX solution, and it can reduce your conversion rates significantly.
Here’s how you can get the zoom right. Check out this long-sleeve maxi dress page. The zoom is quite substantial, and it lets you see all the finer details of the item.
Even better, the zoomed image opens up right next to the original one. That way, the customer is in control of the area they want to zoom in on, and the feature is very simple to use.
The brand has also cleverly added several kinds of product photos, one of which is significantly closer up than the others, so there is opportunity for some precise zooming, too.
Not Providing Guest Checkout
Another common UI mistake is omitting to provide guest checkout options to your customers.
From a marketing and sales standpoint, it makes sense to ask every customer to create an account. It provides additional functionalities to shoppers, too, like creating a wishlist or keeping track of all the items they have purchased over time.
However, this additional checkout step can alienate a lot of people. Those who want to check out fast and use their browser’s autofill option will resent it. Those who don’t want to create an account with yet another brand, especially if they think they will only be making one purchase, will find it annoying, too.
Setting up a guest checkout option is simple. While it may limit your marketing efforts and limit the amount of data you store per customer, it will speed up the conversion process.
Pottery Barn, for example, has nailed this option. They clearly segment two types of checkout: one for registered users and one for guests. They also clearly spell out the benefits of creating an account: there are rewards to be had for members.
Not Including Related Products
One of the best features an ecommerce store can add to its product pages is a related or similar products carousel. It’s a great way to upsell and cross-sell, and it can also increase your average order value.
It’s also a great tactic for improving user experience. Some customers like to browse from product category pages, but if you stock thousands of items per category, they will rarely see them all.
When you recommend similar items on product pages, you significantly increase the chances of customers finding something else they are interested in.
Ideally, you want to recommend two types of products: those that will go well with the item a customer is currently looking at, and items that are similar to it.
H&M does this very well. Check out this crew neck T-shirt page. It recommends both products that go well with it, all in the same basic theme. It also shows similar products others have also bought, both in the same category and from other, related ones.
Being Unclear About Costs and Shipping
Finally, one of the worst UI mistakes you can make on an ecommerce website is being unclear about the cost of an item, the cost of shipping, or shipping times.
Of course, you won’t always be able to tell customers when they can expect an item or how much shipping will cost. But when this is the case, simply add a sentence informing customers that shipping starts at a certain amount and that they will get more precise information at checkout.
Whenever possible, though, you want to be specific. Check out this cat cave product page. It shows the specific price of the item and the amount of loyalty points it will earn the shopper. It then also lets customers know they can use Klarna to split their payment up into three. Most importantly, it has a countdown feature that shows when customers can expect to receive the item.
Wrapping Up
Are you making any of these commerce UI design mistakes? If you are, make sure to check out the examples we’ve listed of brands who’ve got it right.
Try to improve your UI as soon as possible. It will significantly impact user experience and, ultimately, your bottom line.
