Skip to content
The holiday season is fast approaching! If you're an eCommerce merchant looking to make the most of this profitable time, you don’t want to be held hostage by poor web design.
It's vital to ensure that your website is easy to use for the swarths of online shoppers scouring the web for great deals if you want to convert visits into sales efficiently. To set yourself off on the right path in achieving superb conversions, an awareness of common user interface (UI) and user experience (UX) mistakes in web design is necessary. Thereby, you can avoid these errors and best prepare your site for the holiday season.
Before we get into these common UI and UX errors, let’s first dive into the importance of these two elements.
Why are UI and UX Important to eCommerce Web Design?
Despite often being spoken about in tandem - for good reason as they do go hand-in-hand - user interface and user experience are their own separate elements.
UI refers to everything visitors to your site click on, touch, or even speak to - they are the parts of your website people interact with. UX, on the other hand, focuses on how consumers feel as they interact with a site. So we could say that UI is the face of a website whereas UX is the heart of it.
The focus points of UX and UI in web design (Source: UX Design)
When we break down the different focus points of these elements, we can begin to understand how a lack of attention to them could result in lower conversions.
Did you know that 95% of internet users view user experience as the most important part of a website? This aspect of web design is so valuable that Google recently announced it as now being part of their core web vitals. This means that UX now directly affects SEO.
When it comes to the UI of a website this is just as important to digital consumers with 75% of them judging the credibility of a site based on just visual design, and over 92% citing the visual dimension of a website as a crucial factor in influencing purchasing decisions.
So where do UI and UX often fail to meet the needs of shoppers?
Common UI & UX Mistakes to Avoid this Holiday Season
Let’s take a look at some common UI & UX errors and provide some useful ways to fix them so you don’t miss out on conversions.
Poor and unintuitive navigation & call-to-action (CTA)
For an optimal user experience, visitors should be able to move through your site as if it was second nature. However, there are a number of barriers to this present on many sites.
Vague navigational labels can be a real pain as they can hinder exploration and leave visitors to your site feeling very confused.
Previously, Lush used categories such as Fun, Gorilla Perfume, and Emotional Brilliance which lack meaning without any context. This has now been rectified and their menu options make more sense to anyone who lands on the site.
Another extremely common mishap in navigation is too many options on the main menu. Our short-term memory can only hold seven things at one time. As a result, menus with more than seven options will be lost on visitors, making it hard for them to remember how to move around your website.
Rather than listing a large number of menu items, try to condense them to no more than seven categories. If you have a particularly large store where seven categories will not suffice, a dropdown menu or mega-menu is a better option.
Quicksilver minimizes the load on the shopper’s memory with six menu items which expand into a dropdown mega-menu. What’s great about this menu is that the additional categories also do not surpass the seven mark, and the options beneath the majority of them are also not more than seven.
Check out some more navigation tips here: Shopify Navigation: Best Practices for Your Store
CTA buttons can also face a hard time on eCommerce websites. CTAs that are vague, do not stand out from the rest of the website, are placed in an unintuitive spot, or are not visible at all can act as a barrier in getting your products in baskets.
(Source: Spyhouse Coffee)
On Spyhouse Coffee’s homepage, there is a collection of products with no CTAs. For visitors, there is, therefore, no sense of urgency to purchase or even find out more about the product. There is also no clear path as to how to get to the product page, which could lead to confusion and a missed opportunity for a sale.
The first set of products on the Yummy Bazaar homepage are all accompanied with green Add to Cart buttons that stand out against the white background, gaining the attention of shoppers. (Source: Yummy Bazaar)
Your homepage is the prime page for drawing customers in and enticing a sale as this is usually the first place to land when they visit your online store. Hence, items here should have clear, action-based CTA buttons that are easily identifiable. They should be placed either below the product image or to the right of it as we read from top to bottom and from left to right. Color is also really important as you want the CTA buttons to be one of the first things consumers notice when scrolling. Finally, make sure there is a good amount of white space within the button to really make the text stand out.
Inefficient content
Content is, of course, crucial when it comes to sealing the deal on purchases. It provides context for consumers on what they could potentially purchase, and can help you climb SERPs bringing more people to your store. However, if the modern digital consumer is not at the front of your mind when creating content, you’ll find yourself falling into some common unfortunate scenarios.
Although 70% of online buyers look at a product review before making a purchase and a further 93% stating that it impacts their purchasing decision, many eCommerce stores either fail to include social proof on their website, or fail to highlight reviews sufficiently. This can be a real miss as product pages with reviews experience 3.5 times higher conversion rates than those that don’t. Plus, Google search engine algorithms place value on these and rank them well in their SERPs. Having reviews and testimonials featured in your store can go a long way in convincing holiday shoppers that your products are a more worthwhile investment than your competitors.
(Source: Maplin & Sally Beauty)
Whilst Maplin does include reviews on their product pages, they are a little hard to find as they are at the bottom of the page obscured by a live chat bar. It’s better to make sure your reviews are as visible as possible, as seen with Sally Beauty’s star rating, and allow shoppers to click through should they want to read up on them.
Having too much information on pages can also diminish efforts to inform consumers about your product as people scan when looking for information online. Product details that are not organized in a way to help consumers easily and quickly pick out key points will deter them. Long pieces of text packed full of keywords will not feel genuine or useful. With online shoppers having an attention span of just 10 seconds, short content that uses simple informal language split up into chunks will work best in making your information scannable. Include keywords but make sure that they are included in a way that reflects your brand’s voice and adds value.
Whilst the Headphones.com description makes for an entertaining read, it does not serve online shoppers well as key points are hard to find within the dense wall of text. The description provided by Shure is much more digestible.
Too much information also applies to the content on homepages and product pages. Bombarding visitors with as many deals as possible is tempting, but this will be a sensory overload causing choice paralysis. Moreover, an excess of content can increase the loading time of a page, which is bad news as 80% of online shoppers find slow websites more frustrating than one that is temporarily down.
It is a great idea to include different types of content on your homepage and product pages to accommodate the different ways people like to consume information. However, limit the load-on page speed by limiting the file size of images and videos, and using lazy loading for videos. Organize the content on your homepage into clean blocks with even spacing, and limit to seven as this is what our short-term memory can hold.
A site with too many things competing for visitors’ attention can be overwhelming. Limit the content on your site and organize them into boxes that are of consistent size and aligned as Compliments has. (Source: WP Amelia & Compliments)
Not optimizing for speed
Consumers’ expectations are high when it comes to page speed. 47% of consumers expect web pages to load in 2 seconds or less and 40% will abandon a site should it take longer than 3 seconds to load. This seems to be an issue that grapples many eCommerce merchants with the average load time of desktop sites being 10.3 seconds and top retailers falling slightly short at 3.88 seconds.
To optimize your eCommerce store for speed not only should you limit the sizes of images and videos, but also minify your code, reduce the number of redirects, remove broken links, and limit app use if you are a Shopify merchant.
Poor internal search & filtering
Up to 30% of visitors to an eCommerce website use internal search. Moreover, as their level of intent to purchase is higher, their conversion rates can be as much as 5 times higher than a non-searcher. This makes optimizing the search function of your store of utmost importance, especially as doing so could help you to increase conversions by 43%. However, there are some sites out there that do not make site search simple and efficient for shoppers.
Presenting shoppers with a no search results page and providing them with little to no options is one of the worst things you can do if your aim is to increase conversions. Yet 68% of eCommerce sites leave customers at a dead-end when a search term does not precisely match up to their inventory.
(Sources: Airy & Marks and Spencer)
Airy prompts searchers to continue shopping when the term bikini is misspelt, however, they do not provide search suggestions or any related products. This may cause shoppers to abandon their search and the site itself. Marks and Spencer, on the other hand, acknowledges the spelling mistake and brings up results based on a similar keyword - bikini. Therefore, it gives visitors options that closely resemble a search term which is a much safer bet than not even attempting to narrow down results. Another tip is to present popular products when no search results are returned.
Read more: Best Practices for Instant Search Box - What to Do With ‘No Search Results’
Flawed filters and facets are other noticeable features of eCommerce sites. They are great improvers of user experience as they can narrow down the search to specific criteria, bringing them closer to their ideal product. However, they are often incorporated with a one-size-fits-all approach assuming that all shoppers search in the same way.
(Source: yd)
yd allows customers to filter their search in a number of ways. However, when it comes to the Filter by colors, there is no way to view multiple color options at once. Visitors have to run separate queries each time which can be a strain on memory as well as a tedious task.
These search and filtering woes can easily be resolved with Boost’s Product Filter & Search app on Shopify. Internal site search is optimized to help visitors find precisely what they want with features like auto-suggest, synonyms to group similar words together, auto-correct, and as-you-type live search results. Shopify merchants can also create filters for virtually any attribute, and shoppers can select multiple filters at a time for smooth exploration of your store.
Bad choice of fonts & colors
An interface disaster is the improper use of fonts and colors. You may be tempted to change the color scheme and fonts of your website to give it more of a holiday feel. However, if the contrast between the background color and text is not high enough it will be difficult to read.
Having too many colors on your pages will also make it difficult for consumers to establish a visual hierarchy of importance as well as being overwhelming for them. Furthermore, fanciful cursive fonts may look good but they too will be hard to read.
When experimenting with colors, use contrast checking tools like Coolors to ensure that your choices are legible and stick to just two shades. For your fonts, it’s best to stick to Google Web Fonts and following these golden rules for line spacing:
- Aim for about 140%-180% line height for good readability
- Limit line length to 70–80 characters
- Font size should be at a minimum of 16pt
- Increase spacing for smaller fonts
- Check your line spacing when you change font or font size
Bad forms
The final step in making a purchase will include some sort of form filling. Lengthy and/or complicated forms will deter customers from completing a purchase. In fact, 28% of consumers abandon their carts for this reason.
Asking for too much unnecessary information in order to make a purchase is something you’ll want to avoid at all costs. Research has shown that 12-14 form elements are ideal for the checkout flow.
A zig-zag flow is not as intuitive and can therefore cause confusion and errors. Repetitive information and wordy labels are also a turn-off. (Source: Prototypr)
The organization of forms can also create confusion when not done well. It’s best to organize them into one column with clearly labeled fields as a heading above rather than using placeholder text. This is key as disappearing placeholder text can be a strain on short-term memory, particularly for users who are quickly moving from field to field, and also prevents customers from checking their work effectively before submitting. Having a single-column layout with adequate spacing will foster a better connection between the label name and its input.
The space between form elements should be much greater than the spacing between the label and its input field. (Source: Medium)
Final Thoughts
With the holiday sales season coming soon the need to alter web design elements is an understandable urge. What may seem attractive and logical to you may not be the experience consumers have and could affect your store’s ability to convert visits into sales. By being aware of these common mistakes and knowing what digital consumers expect from web pages, you can rest easy knowing that all your web design elements are working in your favor.
