10 common UX/UI issues in Shopify online stores
We conducted hundreds of UX audits of online stores in the past five years and noticed that Shopify-based sites have some common issues. In this article, we provide practical tips on how to avoid the most common usability issues on Shopify that prevent users from purchasing and, thus, affect the main KPIs of online stores and increase conversion rate of Shopify store.
Note! Due to the NDA, we can’t share the info about our clients, so we add the examples of the Shopify sites with the same issues.
10 common UX/UI issues and best solutions
Here is a list of the most widespread interface mistakes found that affect user experience and, as a result, can decrease the conversion rate of online stores.
1. Homepage: big banner and no CTA
Most of the problem is a large banner, without any call to action. So the user enters the site and there are no entry points: no products to see or anything to get interested in, no promotions to look at, no new arrivals, and so on. In other words, there's nothing to engage the user on the site.
So, to increase conversion rate Shopify sites, we recommend using banners with current promotions with clear CTA visible on the first screen. It will inform the user about what he/she can get at the online store and help you engage the visitor to go deeper on the site.
2. Not fixed upper navigation
The top navigation is not fixed, and there is no button to jump to the top of the page. That slows down the interaction with the site because the user is to scroll for a long time when it's needed to go back to the menu, for example.
It’d be better to fix the top navigation so that the users always have access to it whatever the position on the page. Also, it is worth adding a “Back to top” button in the right bottom corner to hasten the interaction and increase conversion rate.
3. No shipping & returns pages
There are no pages of Shipping and Returns in the header of the site. The user is to search for the information on the site to get all the terms and conditions when needed.
Yet, such important information as shipping and returns should always be clearly visible and easily accessible to the user. That increases the trust in the brand (customer loyalty), so we recommend placing links to these pages both in the footer and in the header of the site.
4. No live chat and contacts
When the user needs quick help or advice, he just can't get it, since there are no contacts in the site's header and no Live-chat in the lower right corner. The user is to scroll to the page bottom to get the contacts of the Help Center and/or a link to the Customer Support page.
To increase conversion rate Shopify-based online stores, we recommend adding the contacts in the fixed site header so that the users have access to the help center whatever the page and position on the page they are on.
5. Site search gaps
When typing a query into the search bar, frequently a list of items or just pictures or products are displayed on Shopify online stores.
We recommend displaying prompts with the most popular queries, related queries, and so on, just like they do in Google. Such prompts speed up the search for goods because there is no need to enter the entire query, but to choose the appropriate one from the list. So not only do you shorten the customer journey, but you also demonstrate customer care, which also contributes to the customer's loyalty to the brand and helps to increase conversion rate.
6. Inefficient catalog page structure
Frequently, a large banner is placed on the catalog listing page, filling the entire first screen and lowering the overall product selection beneath it. That disorients the user. So s/he can think s/he is mistaken and then leave. It also distracts the user from the goods and, therefore, from the purchase.
Besides the banner, at the beginning of the catalog page, you can see the long text explaining what kind of page it is, what the benefits of the products are, etc. Yet, according to our experience, users prefer seeing to reading.
That's why you should shift the focus to increase conversion rate on Shopify sites. Make the banner narrower and show more items while placing the category text at the end of the page.
7. No “Previously Viewed” block
Neither on the page of catalog listings nor in the product card is there a block with previously viewed items. In this way, the user is forced to search for an item all over again in case s/he accidentally leaves the page or simply changes his/her mind, for example.
It's a good idea to add this block both on the categories and in the product card to help the user in making a decision.
8. Non-informative product card
As we mentioned above, shipping and returning information is a crucial aspect of the decision-making process. That's why such details should be placed in a clearly visible place both in the header and on the product card.
Add shipping and return information next to the item's description and features on the product pages, and also add a link to a page with more detailed terms and conditions for conversion rate optimization.
9. Too big and non-informative website header
Online stores on Shopify often make website headers too big with a lack of such crucial information as Contacts, Shipping, About Us, and so on. We recommend making headers smaller and more useful for users by adding important information and links to them.
10. Non-informative product page previews
Often online stores sell unisex items, but that is not obvious from the product preview because there is only one item image on a single model. The user can see that the clothing is unisex only by going to the product's card.
It's better to add a gallery in previews: a demonstration of the item on both men and women (models of both sexes) when putting the cursor on the product preview.
Bonus: Mobile version issues to mind
With a growing mobile audience, adaptive versions of sites become critical nowadays. That’s why it’s crucial to take care of the usability of mobile users. Here we outlined the most common issues we revealed that affect the user experience.
- The burger menu is at the top left of the page and opens on the right by tapping. That is confusing.
- Very large blocks result in a long scroll through the page to see all the offerings.
- Overloaded header. Unlike desktop, in the mobile version of the site, the header is very overloaded with various elements, making it difficult to hit the right icon. So it is better to move some elements (language switch, account, and "Favorites" list, for example) in the burger menu to make it user-friendly. Keep only the most important elements: logo, search, cart, and burger menu.
- The burger menu slides out when tapped, and it would be better to open it on the side or full screen.
Here are only a few issues described that can affect the conversion rate and other crucial KPIs of the site. Even small changes can lead to great results. So, it’s crucial to conduct the usability of your website regularly to identify and address the main issues for optimizing your conversions and sales, increase conversion rate of Shopify store and take your business to the next level.