Top 12 UX Mistakes to Avoid in your Magento 2

Table of Content

magento 2 mega menu navigation
0 comments

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:

m2 design problem 1

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

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

Here you have several options to follow:

  • Navigation is not a sitemap, so making it grapes-like is not a good option not only for the Magento 2 UX design but also for your site SEO. Instead, I offer you to take a look at the sitemap and rank the elements by importance. Here's handy advice:
If it needs to be a landing page, it’s a category, otherwise, it’s an attribute.
  • When working on site navigation, don't focus on the number of clicks. The three-click rule is no longer considered an optimum. What does matter are clear navigation pathways so that the users always know where they are and how to get to their point of interest.
  • You can hide some page elements that are not related to navigation in the footer or move them to additional navigation. These elements include settings that are rarely applied, contact info and more.
  • Though many stores still have top sales on desktop, today's Google is mobile-first, and it's the mobile version of your store is what accounts for its ranking. To make sure mobile is well-covered, go to your Google Analytics account to detect the most popular devices and screen resolutions. Follow the path: Reports ->Audiences ->Mobile ->Devices
    In this section, you'll find the list of mobile devices used to access your site.
    You can also check with the screen resolutions: Reports ->Audiences ->Technology ->Browser & OS.
    When designing the site or introducing new features, cover these resolutions first.

Mistake #3
Unwanted negative space around the website

This space is called whitespace, and in some cases, it serves as a design element itself. m2 mistake 3 negative spaceIf 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.

m2 fault 4 overloaded category page

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:

 

m2 mega menu
 
magento 2 ceate custom design
 
m2 improve store usability

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

fault 5 label useTo 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:

 

m2 labels for customer groups
 
 m2 prod labels category page
 
m2 product labels show different labels
 
magento 2 product labels choice

 

 

m2 timer category page
 
m2 timer cms page
 
m2 timer design
 
m2 timer prod page

 

Mistake #6
Poor accents in the 1st screen area

 

mistake 6 faulty accents

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

 

m2 change color dropdown
 
m2 change color subtotal matrix

 

m2 change color carousel
 
m2 change color lightbox

 

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.

mistake 7 excessive info

 

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

 

m2-prod-tabs-video
 
m2 prod tabs gallery
 
prouct tabs for m2 custom
 
product pages for magento 2 extra info

 

 

advanced reviews for magebto 2 summary
 
advanced reviewsf for magento 2 any page
 
advanced reviews for magento 2 google
 
advanced reviews for magento 2 filter
 
advanced reviews for magento 2 comments

 

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.

mistake 8 unclear interface

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

 

m2 pre order sell upcoming prods
 
m2 pre order refill stock
 
m2 pre order backouder configs
 
m2 pre order backorder

 

 

m2 out of stock notif display for prod group
 
m2 our of stock notif get guest email
 
m2 out of stock notification analytics
 
m2 out of stck notif customer subscription management
 
m2 out of stock notif inform admins

 

 

m2 custom stock status prod page
 
m2 custom stock status checkout
 
m2 custom stock status info link
 
m2 custom stock statuses category

 

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

 

m2 subscribe & recurring payments billing schedule
 
m2 subscriptions recurring payments custom
 
m2 subscribe & pay on schedule global settings
 
m2 m2 subscribe & pay on schedule account

 

 

stripe payments for magento 2 secure payment gateway
 
stripe payments for magento 2 simple process
 
stripe payments for magento 2 track payments
 
stripe payments for magento 2 user friendly

 

 

m2 cash on delivery option
 
m2 cash on delivery zip
 
m2 cash on delivery enable
 
m2 cash on delivery restrictions

 

Cart and the checkout

There are 2 common mistakes here.

Mistake #11
Long and unhandy information fields in forms

 

fault 11 complex layout

 

In this case, I recommend the following steps:

  • Group fields by sense;
  • Break lengthy forms into steps and screens. Few people like to fill out information “sheets”;
  • Make use of UI components powers to reduce the number of fields and interactions with them;
  • Create default values basing on frequently used data inputs or ready-made data (IP, data from the user account, etc.)
  • Stress the field a user is filling at the moment.

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

correct mistakes in forms

 

Useful Magento 2 modules

 

m2 geoip redirect frontend
 
m2 geoip redirect germany view
 
m2 geoip redirect usa view
 
m2 geoip redirect settings

 

 

m2 one step checkout mobile friendly
 
m2 one step checkout column
 
m2 one step checkout analytics
 
m2 one step checkout delivery

 

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:

 

  • Save users from mental arithmetic. Don’t force them to do math in your interfaces;
  • Make ordering simple and make it registration-free;
  • Let customers sign in via social networks. This way you’ll get the required data minimum without bothering them;
  • According to stats, 56% of users aren’t ready for immediate purchases. They gather items in the cart to proceed with the checkout later. Such users are likely to get distracted. That is why it’s vital to hold goods in the cart until they return;
  • If users have left their emails during the checkout, you can send them a reminder about the incomplete purchase. Such email notifications are most effective in the first 12 hours after they’ve left the site.

Useful Magento 2 modules

 

m2 social login one click
 
m2 social login stats
 
m2 social login coccect many user accounts
 
m2 social login stop abandonment

 

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.

Be sure to avoid these common mistakes and also don't stop learning because UX is changing very fast across the years. Read this Maze's UX design guide or any other guide from a well-known and reliable brand to stay up to date with the UX trends.

December 11, 2019
December 12, 2019
December 3, 2019
Comments
Leave your comment

Your email address will not be published

This blog was created with Amasty Blog Pro

This blog was created with Amasty Blog Pro