UX best practices for your Magento Webshop

UX best practices in your Magento Webshop

Be it shopping online, searching for a business, or a product review, everyone turns to the web for information. This makes an online presence, one of the most sought after mediums through which information is shared by an entity and a necessary means to build brand credibility.

“If your business is not on the internet, then your business will be out of business.” – Bill Gates

With the ever-increasing popularity of online shopping, it is becoming a challenge for e-shops to attract and retain customers. In order to gain higher conversions and build loyalty amongst its customers, it is imperative to look at holistic user experiences to build a customer base and to increase the sales on your site.

Here are a few pointers to help you along:


Intuitiveness is key. When a user quickly finds what they are looking for, with a minimal amount of effort and by not getting lost in a maze of navigation and sub-navigation, it increases ‘site-stickiness’. Care should be taken to structure the navigation in the right hierarchy and also in nomenclature that is relatable. What you call your categories and sub-categories has to be popular terms that users are familiar with within your domain.

  • Keep the navigation ideally at the top. Sticky navigation is a trick that is often used.
  • Keep the number of sections to a minimum, with the most relevant clearly visible.
  • Do not have categories that cannot be linked. Always link categories and sub-categories.
  • If the category has a large number of sub-categories, use a mega menu to classify.

Make it easy to find. Site search has a definite impact on overall site usage, improving conversions and customer satisfaction. Have a search bar on all the web pages, include functionality like auto-completion to include intuitiveness and make it easier. Even highlighting the nearest possible term based on the user’s input helps improve the overall search experience.

Use filters and sorting options for users to narrow down choices so they find their desired product faster. Segregate your products and create filters based on type, color, size, occasion, brand, price, etc. Also, sorting based on price, customer reviews and ratings play an important part in customer decisions.


What you see is what you get. Try not to use stock images and people to sell your products and services. The user is likely to engage with your service more if they can relate to an image where your product is actually being used.

Make sure all your images are of the optimal quality and are not distorted or badly cropped. Customers prefer to see multiple views of the product to compensate for the lack of ‘touch and feel’. Video showcase of products will make the experience even more relatable.

Customers read reviews, customer ratings and product feedback of your products/services. Use quotes and testimonials and keep them accurate as users are likely to also read them for authenticity. Social proof plays a huge role in influencing purchases. Real-life emotion sells better and in e-commerce, it matters a lot.



  • Over 75% of smartphone users have made a purchase online using their mobile device.
  • 80% of shoppers used a mobile phone inside of a physical store to look up product reviews, compare prices or find alternative store locations.

A lot of users use their mobile devices to connect with a brand because it’s convenient. And, if the experience for the desktop version is good, it doesn’t mean that the mobile experience is covered. Mobile UX is a completely different ball-game.

Here’s what you need to keep in mind.

  • Use mobile native features to make the experience natural.
  • Account for the lack of space and communicate only truly relevant information.
  • Disable features which can be a deterrent while entering data, like auto-correct while filling addresses.
  • Give the users the option to save and continue to avoid loss of critical information like shopping cart contents, addresses, etc. This also allows users to enter less information on future visits especially since entering data can be challenging especially on the move.
  • Reduce the number of clicks to complete a transaction.
  • Make the experience seamless from one device to another whenever the user switches.
  • Use the appropriate keyboard for inputs. Eg. Number keyboard for dates, credit card numbers, OTP, etc.

You may have often heard this:
“Clean, neat, crisp layout that breathes!”

LAYOUT – Pay attention to the overall look and feel of the website as the tone of the page will determine the way a consumer perceives your brand. Crowded and cluttered websites have the tendency to be less used as finding what one wants is difficult. Make use of negative spaces and the right balance of colour. A proper design system for typography, colours and styles will play a positive role in building your e-shop.

PRODUCTS – Make sure your products are visible and prominent within the islands/portlets you showcase them in and that the range that your store covers is showcased in the first fold. Provide detailed product descriptions to help buyers understand the product. This could be by giving them the information in small chunks and detailing it further on request using the expand and collapse (accordion) function. This helps in reducing information overload, and your customer won’t feel overwhelmed.

Allow customers to discover products and categories with intuitive placement and callouts. Categorize them as new, best-selling, popular, recently purchased, etc., as many customers are often just browsing and not looking for anything in particular.

CONTENT – On content pages like shipping options, returns, delivery tracking, etc., make sure your customer is able to easily access this information so as to build confidence and to help them to make a more informed decision. While Policies and T&Cs are also important, keep it short and truncated. Show more only if invoked by the customer.

FORMS – Keep your forms short and relevant. Facilitate them with automation/functionality to speed up the process. Ask for only relevant fields that are required for the process to be completed as per regulations. Make relevant suggestions where the customers may be hesitant due to lack of clarity or understanding. Place positive actions prominently using a position and color to highlight while negative actions can be underplayed by the use of text links and smaller sizes.

  • Minimize the number of clicks: While you want your customers to view every product, keeping the overall journey minimal will go a long way. Do not let customers get lost in their quest to find the product they want to buy.
  • Product Recommendations: Showing similar products and suggesting what other customers bought will help a customer make a decision faster. It may never guarantee a purchase but at the least you have been able to showcase your range.
  • Shopping Cart: Show a clear order summary with the details and never hide any information for lack of space. Let your customers know what they have selected to purchase along with quantity, price, color, size, etc. Display all additional charges like shipping, packaging charges & taxes if any, in the cart summary, allowing the customer to know the exact amount he is paying. Allow the users to be able to manage their cart for additional quantities, remove items or move them to a wishlist for future purchase.
  • Checkout without registration: Impulse and ad-hoc purchases amount to at least 40% of e-commerce sales. Eliminating the need to register or logging in before any purchase facilitates this further. Simple integration of the data provided during the purchase like Shipping & Billing information can help create an account in the background without the customer having to explicitly register. Allow the customer multiple options to purchase and choose the way in which he would like to proceed.
  • Use Social Media for registrations: If you must register your customers, remember everyone hates filling up form fields that seem redundant and unnecessary. Make it easy to register by using social media to enable registrations.
  • Progress during the purchase: Provide visual feedback of the stages involved in the buying process allowing the customer to navigate back and forth. The progress can be saved to avoid any loss of data entered.
  • Payment Options: Allow users a variety of options to pay depending on their comfort levels. Remember, not all customers are comfortable giving their credit card information to a web store they have no relationship with. Trust has to be earned and will not happen with the first purchase.
  • Order Confirmation: Give your customers confirmation that includes successful payment processing and delivery details like address, delivery method, and anticipated delivery date. Additionally, give them a reference number to quote for any disputes and queries. Also, allow the user to Print and Save the receipt for reference.
  • Order progress and updates: Send the order confirmation via email to customers for future reference. Follow it up with updates on delivery progress and the ability for a customer to track the shipment. Any changes in the dates or the order itself, need to be conveyed to gain customer trust.

With your e-shop launched and live online, your journey has not quite ended yet. There is a lot that needs to be done to continuously monitor performance, learn and tweak the many issues that will crop up.

  • Accessibility: Is your website being extensively used by people with special needs like hearing impairment, color blindness, old age, or other disadvantaged groups? Use assistive technology like screen readers, speech recognition, screen magnification, etc. which will help those who need it, navigate your site.
  • Audit usability: Usability testing with real users is a great way to see how easy it is or is not to use something. Users are asked to complete tasks, typically while they are being observed by a researcher, to see where they encounter problems and experience confusion. Compare your journeys with other e-shops in the industry, understand how each web-store has a different journey and get to the bottom of its rationale. Look for flaws and correct them and remove any unnecessary steps if it helps speed up the buying process.
  • A/B Testing: There will always be multiple journeys that feel workable. A/B split test them to know how the customer perceives your journey. The winner will emerge from the data collected.

The pointers in this article are not merely the basics but necessary hygiene to ensure that you have an e-commerce website that’s user-first. In fact, Magento templates available online have taken most of these aspects into account and work rather well across devices. So, consider choosing a template that best suits the nature and content of your website. Supplement the required plugins to further amplify the user experience.

Leave a comment