User experience is all about eliminating bad design choices and optimizing your Magento store based on customer behavior. That’s why it’s so hard to launch a perfectly optimized store: the customer interaction data is simply not there. When you don’t have data to back up or prove wrong your UX decisions, all you are left with is a gut feeling.
Of course, you have the experience of others that they freely share: from to and that can benefit any store. But the challenge is to tailor this advice to a very specific business case. Your own business case. And it’s not easy.
In 2019 building a web store on instinct instead of data is a bad idea. So let’s do something about it. Let’s bring science into the equation and replace gut feeling with hard facts. Because even without the necessary customer behavior data you can improve your user experience based on industry best practices and our experience.
We’ve collected crucial UX mistakes from e-commerce stores from all over the world to show you how you can improve your own store at your competition’s cost.
Table of Content
Building the Perfect Store
We know every store is different. But there are some mistakes in e-commerce that 90% of the stores do. After seeing the same mistakes literally countless times we decided to make the most comprehensive list of common UI/UX mistakes in Magento stores and help store admins avoid them.
How do you eat an elephant if you are small and the elephant is big? The logical answer is piece by piece. We have never eaten elephants in our lives but it’s fair to say the same principle applies to Magento stores.
Let’s go over the major sections of the store and see where you can improve.
1. Navigation and Store UI
1.1 Fix. Your. Store.
First things first. If something is broken in your store and you know it’s broken, get it fixed. Especially if it’s something your customers interact with every day.
There’s a difference between a misaligned SEARCH button and everything being broken.
Short tips:
- use maintenance mode to deal with major frontend and backend fixes;
- sometimes your brand image is more important than immediate profit;
- you will lose more money than you earn the longer your store remains broken.
Feel free to browse more recommendations on how to in our detailed guide.
1.2 Boost Your Magento Performance
Speed can make or break the overall user experience. You have the patience for your store to load. Your customers don’t. Build a robust server environment and optimize slow Magento in order to offer them a fast and easy-to-use store.
Speed sells. Every second your users wait for your site to load, someone will leave. This way, if your store takes more than 7 seconds to load, you already lose about half of your potential customers. Adding every new second to the load time cripples both conversion rate and engagement even further.
There are many ways in which you can improve your Magento store performance, both real and perceived. Refer to our comprehensive to make your store faster.
1.3 Stop Overdoing It with Floating UI Elements
What looks well on a big screen can become completely unusable on a relatively small display. Take a look at this store.
The topmost navigation bar takes up a third of the whole screen when you use a notebook. Add to that a huge Cookies Policy notice at the bottom and you get the same view that World War II tankers had of the battlefield.
Not a great experience.
1.4 Don’t Chase the Trends
Users shouldn’t click twice just to get to the main navigation menu. Hamburger menus might be cool and all but it doesn’t mean you have to use them everywhere just because you like them. Every element of the UI must serve its purpose. Instead, we have a situation when stores implement UI elements because they are trendy or because the owner likes them.
Hamburger menus on desktop sites are a good example of thoughtless UI. Unlike mobile sites, desktops have enough space to accommodate everything at the top of the page.
Note: when you offer a clear view of your options to the customers, they also get a better overview of your entire inventory.
1.5 Get Rid of 404 Pages and Categories
Keeping the store clean is your number one priority. 404 errors will disrupt the customer journey, create distrust towards your brand, lower conversions and search engine rankings.
Another thing to consider is the amount of 404 errors on your site. The more you have, the worse are the consequences.
Fix 404 errors to repair customer trust and avoid Google penalties:
- create proper 301 redirects (permanently moved) to all the important links that are no longer valid but might have some traffic that you want to capture;
- create 410 redirects (gone) for unimportant links to help Google “forget” about these pages and discard them from the index;
- replace both types of 404s in your store to avoid multiple redirects in navigation menus and other places.
1.6 Tone Down Your Required Fields
Your goal is to sell, not collect every possible detail about your customers. Help people decide what product will suit them best. Provide useful answers. Offer alternatives. Don’t install roadblocks between your customer support and the users. If you need an email and a name, ask them after the live chat. This way, you create a positive impression of swift service and indicate that you care about feedback and ready to continue to be helpful after the chat via email as well.
Most of the time, required fields create barriers to customer interactions lowering your conversion rates. Get rid of them where you can.
1.7 Visualize!
Get creative with what users can see and interact within the store. If you’ve never seen bright UI elements somewhere it doesn’t mean it’s a bad idea to add more colors! Liven up your menu to add new accents to your design.
This approach works great when some menus have lots of options and some very few. In order to create a consistent look, you can build pictures and other visual elements into smaller menu lists. This way they will appear the same size as their bigger counterparts.
2. Categories
2.1 Avoid Single-Item Categories
Store categories serve a specific purpose. They allow your customers to shop by brand, by room, or by anything specific. When a category contains a single item, it confuses your customers and wastes their time. Try a different approach if you have lots of single-product categories that never seem to grow.
2.2 Avoid Duplicate Content in Categories
This is not a strictly UX challenge but duplicate content interferes with Google ranking algorithms and can cripple your SERP rankings.
Learn how to get rid of by following Onilab's best practice guide on how to reduce duplicate content to a minimum in the top 5 most common places:
- product categories;
- product pages;
- search and filter results;
- different domains and protocols;
- Magento multistores.
2.3 Make Sure Your Categories Are Consistent
Your menu is something everyone will see at least once. Take care to make it presentable, consistent, and clear. If you choose to capitalize headlines, do it everywhere. What it will tell your customers if the company states it cares about even the slightest details of their experience and then shows neglect in their own menu.
2.4 Don’t Overcrowd Your Product Grid
Too many details on the page scatter user attention. A large amount of items interferes with what you need to accomplish: create an easy-to-use, natural sales funnel to direct your customers towards the checkout.
Choose a single focus on each page that serves an individual goal. For example, the goal of the product list is to offer the user enough products and information about them so they can click on something they like and read about the product in more detail.
Next, the goal of an individual product page is to offer enough info so that the user decides to buy it or find an alternative that they like more.
This way, each page is logically connected with the others and you build a strong and concise path from the homepage to checkout.
3. Product Details
3.1 Fill in Empty Spaces With Product Descriptions
E-commerce stores sell thousands of different products at once. Sometimes this means content managers get lazy and don’t bother to add a comprehensive description to each product.
Why is this important? In an offline store, a customer can examine the product in their hands, ask a salesperson any question they like about it, or compare two products side by side. In an online store, the product description will have to fill in for both the missing salespeople and the ability of a customer to actually hold something in their hands.
Bear in mind that the description doesn’t have to be long or short. You need to make it just right so the text answers any questions your visitors might have about the product and at the same time doesn’t bore them with unimportant details.
3.2 Remove Weird UI Choices
Do you want your store to look unique and inspiring? We highly encourage you to beat your competition in every possible way! Just don’t try to stand out by using outlandish interface elements that hinder user experience instead of improving it.
Here’s a dropdown quantity menu. It looks weird. It’s hard to use. It raises questions.Is it necessary? No. You can limit your order quantity in a more elegant way.Is it convenient? No. It’s a pain to use.
Being consistent in UI elements with your competition is not a bad thing. Users like the stuff they are familiar with. You should innovate in other areas that are more ambiguous than a simple input field.
3.3 Avoid Excessive Use of Popups
Popups are rarely a good idea. Even Ethan Zuckerman, the man who invented popups for advertising, publicly apologized for their use. 99% of the time popups are overused:
- visitors on mobile devices often have issues with popups;
- popups block all other content on the page from the user;
- most people close popups without reading them;
- popups don’t have URLs which means content can be hard to reach later.
You can always replace a popup:
- Create dedicated pages for delivery info, refund policy, and any other key locations you want to link to. When you carry this data out of the page, you reduce the amount of duplicate content and improve SEO.
Build the required information right into the product page. Take pity on people who visit your store from mobile devices!
What’s a good example of a popup? Live chat windows and region selection popups are helpful and bring a lot of value to the customers. Everything else? Not so much.
3.4 Offer Rich and Informative Product Images
You can’t expect an adequate selling process without good photos. We don’t talk about excessive detail here. The customer expects multiple photos from different angles, real-life product settings, dimensions or material close-ups if necessary.
Media plays an important role in selling your product for you. Photos remove the guesswork for customers who need an additional visual aid to complete the purchase. Photos capture user attention and support customer fantasy of owning your product.
3.5 Make the Copy Shine
Product title and description are among the first things a shopper notices on the page. So it’s crucial you invest some time and effort into creating an engaging and fresh copy.
Product Title
The main goal of a product title is to inform the user about the product and its features. For that, follow a simple format:
- brand name (if applicable);
- color;
- size (if applicable);
- quantity or size (a set of items, unit of length);
- keywords (if relevant).
Example of a title for a set of tableware: Harrison Champagne Glasses, Set of 4.
Product Description
Did you know that 20% of sales failure is by confusing product descriptions? Luckily, writing a good description is a clean sailing once you got the most important aspects covered.
First, get to know your audience and find the right tone. Do your shoppers like humor, use slang, or prefer formal business language? By knowing all that, it will be easier to that causes a response from the users. Remember: you are writing for people so don’t go for an ultimate sales pitch.
Second, include the core elements:
- product features;
- product benefits;
- keywords.
The main point about writing a good product description is to offer value to the shoppers and answer their question, “Why do I need this product and how will it benefit me?”
Tip: for better engagement, place a short product description and then add the “Learn more” option below. This way, you will serve both those people who don’t like lengthy copy and those who want to learn everything about the product.
3.6 Don’t Be Afraid to Cross-sell and Upsell
Upselling and cross-selling are great for boosting sales and providing a personalized offer to shoppers. The most popular way to use these methods in e-commerce is in the form of product recommendations.
Luckily, Magento already has built-in options of cross-selling and upselling that you can configure as needed. But remember the golden rule: always bring value to the user.
When cross-selling, make sure the offered product complements the initial customer’s purchase and increases its value. If you upsell, justify your offer and point out all the advantages of paying more.
Tip: do not impose your opinion. Many e-commerce stores write messages like “We recommend you try this…” but that’s less efficient than “Other customers love…” statement. The secret lies in the fact that shoppers want to make independent decisions – so give them a choice instead of deciding what’s best for them.
3.7 Add Product Variations
“I love this product but do you have it in another color?”Retailers hear this one too often. Shoppers may love the brand – but they also love the variety and need a few options to choose from. This is where product variations step in and save the day.
Variations are basically the possible options of color, pattern, size, or shape. While seemingly minor, the display of product variations can double your conversions and greatly improve customers’ experience.
The only thing to watch for is navigation between the variations. One of the most frequent problems for e-commerce stores is that the users do not see how they can choose the desired option. So when they try adding a product to the cart, they receive an error notification and leave the site faster than you jump in to help them.
A great way to allow shoppers to find additional options is by to the left-hand side of the results page. These enable shoppers to filter results based on their given criteria, which allows them to shop from relevant, in-stock items.
What you can do is either make the buttons larger and more visible or add a “constructor” to the store that will help the user assemble their perfect product step-by-step.
Example: Ali Express
3.8 Make Your CTAs Visible
CTA buttons encourage users to buy your products so you want to make them extremely visible and interactive.
The main rules for the CTA buttons design are:
- make them bright and easily spotted;
- place them where users will see them (top of the page, near the product image);
- personalize the content.
Even though there are certain rules to follow, you should always do the A/B tests to see which option works best for your specific site. It may happen that unconventional design decisions deliver better results.
Example: Public Desire
3.9 Always State the Price
Visible and understandable pricing is the number one rule if you want shoppers to buy from you.
If the user is confused about the price or finds out that the price on the product page and the one in the cart differs, this will immediately lead to cart abandonment and will drag your sales down.
Here is what you can do to avoid such problems:
- use a large font;
- use a bright color;
- always inform the users about additional fees (i.e. shipping or taxes);
- place the price near the important elements (product title or CTA button).
A good idea would be to add a price calculator to either a product page or checkout to provide a better user experience and eliminate any unpleasant surprises upon paying.
Example: Christian Louboutin
3.10 Add Customers’ Reviews
85% of the shoppers rely on reviews when choosing a product and the display of reviews on the product page can your conversions by more than 200%.
Reviews increase the store’s credibility and help the shoppers make a buying decision. So don’t forget to use this element in your product page design to raise conversions and build up shoppers’ trust towards your store.
One more thing: don’t be afraid to display negative reviews alongside positive ones. In fact, mixed reviews cause better response because the shoppers see them as more reliable and honest.
Example: Ikea
4. Check Your Search, Everyone!
You can’t even imagine how often e-commerce websites add store-wide search without a second thought. It doesn’t matter if the search works poorly or if it’s too slow. They never test it. They never use it.
The situation has become so bad that experienced shoppers never even try to search for stuff anymore. It’s extremely telling when ordinary users just expect the search bar to be broken.
Isn’t it sad? Fix your search, people. Seriously.
It’s sad to see a slow or broken store-wide search since seamless integration with smart search options such as Elasticsearch engine.
5. Checkout and Wishlist
5.1 Stop Asking Users to Sign Up
Imagine you are browsing an interesting collection and you’d like to add a few items to your Wishlist. You click the Heart button and get instantly transferred to the Register screen. This sequence completely disrupts the shopping flow. It prevents your visitors from browsing naturally, how they would do that in a supermarket or at a brick-and-mortar fashion store.
It’s a bad idea to interrupt your customer’s journey with a sign-up request. Your goal is to convert users to make a purchase but it doesn’t mean they want to buy the first thing they put into their Cart or their Wishlist. Being pushy will make users suspicious. Any trust you’ve already built with a prospective customer will be gone.
Give them some breathing room. Let them take their time. Instead of asking to sign up, use cookies and Magento’s capabilities to work with your first-time customers on their own terms.
When you click the heart, you get instantly redirected to the signup page.
Compare this approach to how another store deals with the situation. When an unregistered user adds something to their Wishlist, they get to choose. The user feels in control. They feel you care about what they want. You can still gently push them towards the registration button. But it is nowhere as brutal as the forceful redirect to the Sign Up page.
This one is elegant. Seamless. It does not disrupt the shopping experience. And it’s an actually good use of the popup window. Well done!If you absolutely have to ask users to create an account, speed the process as much as possible. Social networks offer a nice alternative here.
5.2 A Tedious Checkout
There were dozens of random stores in your life where you wanted to buy stuff once and never use that store again. It’s completely normal. Yet so many stores make customers fill in endless forms to complete the purchase.
And instead of retaining a new customer (a good idea, just not for this kind of one-time buyers), they might end up losing a sales opportunity because of their needy behavior.
One of the reasons customers abandon their carts is the long checkout process. Here’s how you can improve your Checkout conversion rates:
- place all checkout forms on a single page;
- remove unnecessary fields from your checkout;
- make checkout as fast as possible to avoid shoppers second-guessing their decision.
Buyer’s remorse is a thing. Don’t risk it. Play it safe.
5.3 Few Payment Options
Making a good Checkout page is easy. Add more payment options and reduce the number of fields. That’s it. Yet the vast majority of store owners want to know everything about their shoppers and don’t pay enough attention to giving them more checkout options.
Your first and most important goal is to close a sale. As a business, you want to make the payment process as accessible and easy as possible. Everything else is secondary.
Another great way to improve conversions is to indicate all payment methods you offer on the Cart page. This way the users will always know what to expect and whether your store has their preferred method of payment. The more you offer, the more they trust you.
5.4 Add Address Validation
Address validation makes stuff easier:
- saves store admins the time to review and confirm the order;
- increases conversion rates by helping users check out faster;
- helps users fix occasional mistakes in the delivery address to fulfill more orders;
- adds another layer of defense against automated fraudulent activities.
With address validation, you no longer need to manually check if the address is imaginary, obsolete, or incorrect. This removes a whole bunch of issues with shipping: non-existent addresses will obviously lead to delivery returns (that’s a cost you can avoid), inaccurate addresses will slow down delivery significantly (wrong zip codes, mistakes in street names or neighborhoods).
Address validation is an (almost) free way to improve customer satisfaction with fewer delivery returns, faster shipping, and better overall customer reviews. In addition, most popular validation APIs are free and easy to implement.
6. About Us and Contact Us Pages
6.1 Make Yourself Transparent
Intentionally or unintentionally hiding your contact information leads to fewer sales:
- Google improves the rank of stores with a visible address;
- customers trust stores with a physical address more than the one without it;
- customers can see stores with an address on Google Maps through Google My Business.
All this is beneficial even for an online-only seller where you never expect visitors to come to your location.
Make every effort to convey trust and build close relationships with your users. Create an image of transparency and honesty. Add address, contact phones, and as many alternative ways to communicate as you can manage: Facebook page, Twitter, LinkedIn, or other social media.
6.2 Use Your Team to Build Trust
Business is about people, their relationships, skills, dreams, and vision. Adding an inspirational (but real!) image of your team is key to creating a vital connection between the company and your customers.
If you are not ready to do this properly it would be a great idea to not do it at all. The example above is by far the worst you can do. It leaves the impression that your store is either broken or unfinished (which it probably is).
Steer away from stock images of the team. Buying happy people on an image stock reeks of scam and completely destroys customer trust. It would be better to have crappy homemade photos of your real crew than something as vapid as a Shutterstock fake team.
6.3 Offer Customers Live Chat Options
Live chat is a powerful communications channel. Don’t underestimate it. Done right, it can be a huge boost to your conversion rates and sales. For some customers, it’s more convenient to call, for others – to text or email.
By limiting your options you cut off opportunities that would have otherwise resulted in a closed sale. Live chat captures those users who for one reason or another can’t call you directly but still need to ask a question and get an answer fast.
Email inquiries imply a slower response time so they are not exactly equivalent to a live chat.
Creating a Better UX. One Step at a Time
UX is hard but it’s not rocket science. You can actually validate any design choice with a few simple questions you can ask yourself. Because if you think about it... Most of the time you don’t need thorough months-long A/B testing to find out users hate to choose numbers from a long drop-down menu, long checkout forms, and annoying popups.
Common sense and experience are enough to eliminate two-thirds of bad design choices. Leave focus groups and deep analytics to challenges that really need them. Before you approach harder UX challenges, fix the ones that are easy, obvious, and have a bigger impact on your store.
And if you find yourself in a situation where you have already dealt with the most glaring issues, Onilab team will be happy to help you do a thorough of your store and advise on how to fix any issues we find.