Top 12 UX Mistakes to Avoid in your Magento 2

During the holiday season, store owners rush to make their Magento 2 most appealing. However, some of these speedy solutions may only make matters worse.

I’ve been designing sites and apps for various customers for 10 years. These were both small e-shops selling just a couple of goods and large stores with multimillion overturn and endless lists of categories and items. If I had charged a penny for any design mistake I fixed in those projects, I’d become a millionaire. No, a multi-millionaire. 😉

Now I’m Head of Design Team. We assist the Amasty team to attract new users and potential shoppers through the data-driven design.

In this article, I share UX tips to help you avoid unobvious mistakes in an e-store design, namely in the following elements:

• Main page;
• Catalog/product page;
• Shopping cart and the checkout.

Main Page

There are 4 key problems here.

Mistake #1
Top navigation menu doesn’t fit into the 1st screen area

This usually happens due to the banner size. To avoid these situations, you need to adapt your banner size to different screen resolutions. This way the banner won’t take up over half of the screen:

Mistake #2
Drop-down lists of categories don’t fit in one screen

This happens if you have a horizontal menu and multiple subcategories:

Here you have several options to follow:

Mistake #3
Unwanted negative space around the website

This space is called whitespace, and in some cases, it serves as a design element itself. If it’s not what you want, you can take up some steps to fill it. You can fill the blank space with the login block, the shopping cart, your promo campaigns, recently viewed products or additional info on your store’s benefits.

Mistake #4
Inefficient use of space on the adaptive site

This problem boils down to the following issues:

• Displaying contact info in the header of the mobile page;
• Links and info on non-product sections of the site in the header.

To prevent these issues, you can try the following recommendations:

• To use the space efficiently, you can minify the logo and collapse search to icon size. Besides, it’s better to arrange promos, phone numbers and drop-down menus in the hamburger menu.
• In the desktop version, you can place additional info in the menu. As for the adaptive site, it’s better to hide this info and only place links to your store’s categories.

 

Useful Magento 2 modules

And here comes the promised extension tip:

• Mega Menu, a special menu-centered module:

 

How to design Product page in Magento 2?

This page is like a shop window in brick-and-mortar retail: it showcases products to motivate for a purchase. Therefore, it’s important to deliver most engaging user experience.

Good intentions here often lead to different design mistakes.

Mistake #5
Faulty use of labels on product picture

To avoid this issue, bear in mind the three tips below:

• Use labels that don’t overlap with the product photo;
• Place labels out of the image area;
• When it comes to large elements (counters, long label images, etc.), they can be placed horizontally below the image.

Useful Magento 2 modules

There are Magento 2 modules that can make labeling easier:

• Item Labels:

• Ticking Clock module:

Mistake #6
Poor accents in the 1st screen area

In the majority of cases, you should follow this hierarchy of accents:

• Product photo;
• Price;
• Call-to-action (e.g. Buy now).

Mind that the price element should be more catchy than the elements that drive customers away from the purchase button. Favorites, the product comparison button and other functionalities should be less noticeable than the previous three points.

Useful Magento 2 modules

• Item Labels;
• Magento 2 module for choosing item color.

Mistake #7
Excessive product info in the 1st screen area

We faced this issue when working on our website design. This situation is usually the result of conflicting demands from different teams/stakeholders.

Example. One team wishes to emphasize the new functionality, another team stress seamless compatibility with other products, and stakeholders believe that positive reviews should be stressed first of all.

You should stress the product info that is useful for visitors, i.e. how the product can help them and not your colleagues or partners. Move other data out of the first screen or hide it using the UI tools (bookmarks, spoilers, etc.)

Useful Magento 2 modules

• Tabs for Product Pages:

• Advanced Reviews:

Mistake #8
Unclear interface

There are 3 key points to remember here:

• Always be honest with users. On the buttons, write clearly what happens upon clicking them (Submit → Confirm Payment). This is valid not only for buttons;
• Timely notify users about additional costs. This way you will foster trust in your store and lower the cart abandonment possibility;
• Avoid dark patterns, specific design techniques that aim at deceiving the customer in some way. For example, you may be pushed to click on a brightly colored button and accidentally purchase a good you don’t need. In the short run, dark techniques may increase sales. But this has a reverse side that is often silenced: dark patterns cause an increase in returns, support overload and the loss of customer loyalty.

Mistake #9
Out-of-stock goods not announced

I faced this problem when working on the shop that expanded faster than the owners expected. The turnover grew, and so did the customer base. And at one point, the growth stopped because the owners had contracts with only one supplier a single delivery service.

To avoid this problem, you should:

• Connect with several suppliers of goods and carrier services;
• If the good is out-of-stock at the moment, the stock will be refilled soon, you should offer to notify shoppers about the good availability.

Useful Magento 2 modules

• Preliminary Order:

• Out-of-Stock Note:

• Custom Stock Status:

Mistake #10
Limited choice of payment and delivery options

You should let your customers choose a payment method as long as the carrier and delivery date and time. Sometimes the goods are needed urgently and the client is ready for an extra fee, and sometimes they don’t mind waiting for the standard delivery time. I urge you not to overdo – customers will be grateful if you don’t make them think over these simple patterns of interacting with the interface for too long.

Useful Magento 2 modules

• Repeat Payments:

• Stripe Payment:

• Payment on Delivery:

• Calcurates, a handy shipping solution.

Cart and the checkout

There are 2 common mistakes here.

Mistake #11
Long and unhandy information fields in forms

In this case, I recommend the following steps:

Form field captions should always be visible. Don’t simply highlight mistakenly filled or missing fields. Try to explain the mistakes:

Useful Magento 2 modules

• Redirect by IP:

• Single Step Checkout:

Mistake #12
Inconvenient shopping cart

It seems nothing can go wrong when the customer has chosen the good and already added it to the cart. However, a complex and unhandy shopping cart page can put an end to their session on your site.

On average, 70% of shoppers abandon carts without proceeding to the checkout. And in some industries, the cart abandonment rate exceeds 80%. Disturbing, isn’t it? To solve this issue, you can simplify the shopping cart :). Try out the following measures:

Useful Magento 2 modules

• Single Step Checkout;
• Form-Free Login:

Magento 2 UX recommendations: sum-up

As a rule, interfaces only cover the needs that lie on the surface.

Broaden your focus. Consider why exactly users need this or that functions or information. Then offer the solution they really need.

In the majority of interfaces, mistakes are unavoidable. And if they arise, help your users overcome them quickly and easily.