Top 5 UI & UX errors that impact ecommerce sales

The user interface (UI) and user experience (UX) of an ecommerce website are without doubt critical factors in driving customer engagement.

A seamless interactive web and visual elements can help to build trust and credibility. The visual aspect of a website can also guide potential customers towards actions that are desirable for positive business outcomes.

While most companies place heavy focus on researching the best UI and UX design in their initial online store setup, they make the mistake of not validating for errors that subsequently appear over time. UI/UX errors occur as a result of new site integrations, changes to existing features, product catalog updates, etc. Even the biggest ecommerce companies fall prey to such errors. If left undetected, the majority of UI/UX errors can leave a lasting negative impact on the business.

In this article, we will have a look at some of the most common UI/UX errors in ecommerce websites, specifically focusing on the ones that hamper sales conversions and the overall customer experience. Keep reading to find out the top errors to look out for, its impact, and how to catch them before they affect your business.

Five UI/UX errors that negatively impact ecommerce sales

1. Error in add-to-cart or shopping cart functionality

The checkout process is a vital part of the ecommerce experience. It should be easy and straightforward for the user. However this is where critical errors are commonly found in ecommerce.

Here are some real examples of a broken add-to-cart / shopping cart errors:

• Incorrect display or miscalculation of shipping charges, causing the user to abandon the purchase
• Unexpected error message upon selecting the payment option
• Previously added products appear missing from the minicart or during the checkout steps. 

The economic impact is quite significant for this group of errors. Any hint of a problem in the way the product, shipping details, or the cart total are displayed can cause the user to immediately abandon the purchase. An unexpected error message such as a server timeout or some technical issue will discourage the user from trying to purchase from the site again. Similarly, if a user is unable to complete an order with the desired product choice, he or she is not likely to return. 

As you can see, there is no room for error when it comes to the execution of the checkout and payment process of an ecommerce site. 

2. Broken links, misdirection and the dreaded 404 page

The 404 page – it’s like getting a phone call from your least favourite telemarketing company.

There is not an Internet user in this world who has never encountered a broken link or a 404 page at least once. 

Do you recall what happened the last time you encountered a 404? It was probably just disappointing and not pleasant at all.

Broken links are no fun either. I’ve had my fair share of links that I’ve clicked multiple times until I realized I wasn’t going to get to where I wanted. Close cousins to the broken links are links that either redirect you to a completely unexpected page, or to some weird technical error message.

How does a broken link or 404 Page affect your ecommerce?

Whether found on an ecommerce homepage or on the least visited page of a website, it has dire consequences on the impression it leaves on users and on the business. 

As an example, here’s the economic impact of a 404 page:

• 70% of customers who encounter a 404 error page, leave your site and never come back. 
•  It directly affects conversion rate and, as a result, your revenue. 
• 1-2 % of customers fall on 404 pages. So if you have 100,000 visits per day, you are likely to lose 2000 potential clients.

This group of errors are some of the most notorious you can find on the Internet. Critically, they are the ones that often lead to irreversible damages to sales and the brand itself.

3. Unresponsive web design  

How is your mobile commerce experience?

Some of the most common UI/UX errors are detected in the use of a variety of devices. It is glaringly obvious that ecommerce sites need to be mobile-friendly, yet we still see poor mobile web formatting such as stretched images, non-visible text, or missing features that would otherwise be available in a desktop version of an ecommerce website.

A great mobile site experience is absolutely important in this era of ecommerce. Users will keep looking for a mobile-friendly site until they find one that is error-free and works for them. That means your competitors will stand to benefit if your site fails in doing so (and vice versa).

The above findings from Google are important reasons for companies to regularly test and validate their mobile commerce UI/UX. 

An ecommerce store should present all the details that customers typically look for in an expected way. Product images and descriptions should clearly describe the product and entice the customer to purchase. However, if your site’s design is not fully responsive across different devices, or is difficult to use, it will drive customers away.

4. Overlapping web elements

There are several flavors to this type of error, none of which gives a good feeling.

You may find a UI element that covers the one that you would like to click on, such as shown in the image above. As a result, you find yourself unable to apply the filters to navigate to the products that you are interested in.

You may have also seen on other sites, where different texts overlap one another. If it is still legible, it may not be such a big deal as a user. But what if the text overlap makes the information not comprehensible? The issue is exacerbated if the text overlap occurs on important details such as the price of the product. This issue prevents the user from making a well-informed purchase decision, therefore discouraging them from buying the product.

Curiously enough, the issue of overlapping web elements are also some of the easiest to detect with proper visual UI/UX testing processes and tools in place. If you are keen to learn more about visual UI/UX testing, click here.

5. Poor functioning navigation filters

We’ve seen from the previous examples, several different ways a UI/UX error can impact the navigation experience of an ecommerce user. Filters and sorting are advanced user navigation features that can either enrich the online customer experience, or devalue it if not working as expected.

There are several different ways that filters can be affected: 

• Missing or poorly visible filter options
• Sort by price or newest product arrivals does not order products correctly
• User’s selection of desired filters returns the wrong list of products

Online users filter and sort products according to the product features they want, such as size, price, color, and rating. When these features perform poorly or fail, the shopping experience is tarnished and users are likely to abandon the site out of frustration. 

61% of users said that if they didn’t find what they were looking for right away on a mobile site, they’d quickly move on to another site (Google Research)

Catching UI/UX errors before they impact your customers

Now that we have identified the top 5 UI/UX errors in ecommerce, is there a way to avoid making these mistakes?

Yes and No.

Due to the dynamic nature and complexity of modern ecommerce platforms, as well as the complex third party integrations beyond one’s control, it is almost impossible to prevent UI/UX errors from occuring. Visual errors have become commonplace, that we almost don’t blink an eye when we see them.

Nevertheless, it is important to understand the economic impact that such errors can bring to the business. Also, we can certainly reduce the possibility of UI/UX errors occurring.

The logical first step to prevent them is by implementing the best possible UI/UX for your ecommerce right from the beginning. UI/UX design practices has become a massive industry in itself. Adobe’s recent acquisition of Figma just shows the importance of tools that can help create better customer experiences. 

However, it is also necessary to ensure that once your ecommerce is up and running, that your customers can continue to interact with your website, and to regularly validate that its features work correctly. Testing, monitoring, and analytics are the best ways of seeking feedback on the usability of a website.

By providing a great ecommerce UI/UX experience, online retailers can attract customers and consequently build a positive association with their brand.

Leon Lau

Digital UX, writing about the latest ecommerce trends.