When visitors land on your homepage they naturally want to navigate the store. That's right.
Do you have the omnipresent hamburger on your menu or did you opt for something fancier like vertical lettering?The navigation menu of an e-commerce store is responsible for taking the user where needed and plays a significant role in raising the conversion rate. If the menu is too confusing, boring, or hard to see, the user will either chaotically roam your site for some time or leave and never come back.
Even though many companies stick with the classic hamburger menu, we now see many brand-new e-commerce UX trends popping up. While we cannot say which menu will 100% fit your store, we can list the pros and cons of each.
Table of Content
A Side Note on Mobile Design
Drop-down menus are often listed as the #1 choice for desktop sites. The reason for that is that many readymade themes already come with a pre-designed drop-down menu. Drop-downs are also so popular on desktop sites as they allow comprehensive and clear navigation.
Things are a bit different for mobile. When you optimize the store for mobile, you aim for speed and easy intuitive navigation. The design has to be extremely lightweight too.
All that served as a reason for to come up with a variety of navigation menus for mobile. After reviewing the famous hamburger, we will have a look at other options that you can use.
"Hamburger" Menu: Are Your Customers Loving It?
The hamburger navigation menu is beloved by many e-commerce store owners. These three horizontal lines are usually found in the upper corner and are instantly recognized by the users.
There are a few valid reasons why the hamburger menu UX is so popular.
Hamburger menu pros:
- recognizable icon;
- clear navigation and UI;
- direct navigational access (right to the desired section).
In short, users know the hamburger menu and are well aware of how to use it. But this menu type has its flaws too.
Hamburger menu cons:
- poor display of sections (they are basically hidden);
- low click rates (not the best touch zone).
So should you use a hamburger menu or not?The answer lies in the sections that are hidden in the menu. For an e-commerce store, it is crucial that the customers see the main store sections right after tapping the menu. In this case, the hamburger menu may not be the best choice for a desktop store but will work well for mobile.
Our rating: 5/5
After all, it’s the most popular option for mobile because people are used to it and the interface is clear and simple.
Bottom Navigation
We see a lot of bottom navigation in social media apps like Facebook or Instagram but e-commerce stores started adopting it as well.
This navigation type is also known as a tabbed menu and is among the top UX/UI trends. One of its biggest advantages is the option to instantly see the main site sections from any page. Bottom navigation menus also provide an incredibly .
A good example of a tabbed menu is the mobile version of Joom. As you can see, its main sections are all shown on the bottom tab and can be easily recognized.
Bottom navigation pros:
- instantly seen sections;
- good button reach, higher CTA (within the natural touch zone);
- direct navigational access.
Bottom navigation cons:
- a limited number of sections (usually 4-5 at most);
- tabs need to be recognizable (which means extra work on UX).
Bottom navigation is a good option for a mobile e-commerce store. It works especially well if you add the top categories/products on the landing page (as Joom does) and add a search bar so users can immediately proceed to the desired product page or category.
Our rating: 4/5
This navigation type is gaining popularity but is not suitable for all pages. For example, it won’t work for the Cart page because it will leave too many exit points for the user causing .
Labeled Menu
If you love the navigation provided by hamburger but hate the low conversion rate, try the labeled menu option.
Instead of a three-line icon, this menu type basically has the word “menu”. Simple as that. However, this simplicity converts better.
Labeled menu pros:
- easily implemented (no need to change the menu structure);
- better engagement;
- instantly recognized.
Labeled menu cons:
- same as with the hamburger menu.
Our rating: 4/5
A labeled menu works well when you need to “hide” a big amount of information. In addition, it’s a good choice for the desktop version of your custom theme as it is more understandable than a standard hamburger.
In the case of mobile, it will take more space and may not work too well in conjunction with other buttons like profile icons and search bar. But overall, the labeled menu is a good option, especially for the elderly target audience.
Grid-style Menu
This menu option is also known as the bento menu. It takes up the whole screen and consists of a set of cells, where each cell is dedicated to a specific store section.
While the grid menu is not very popular with e-commerce stores, it can be a good choice due to navigation clarity and ease.
Grid menu pros:
- easy navigation;
- all features are visible;
- option to pair text and icons;
- good use of space and structure.
Grid menu cons:
- may not be enough for all your sections;
- icons need to be recognizable;
- some cells may be out of the comfortable touch zone.
The best UX solution for e-commerce would probably be combining a grid and a bottom menu. In this case, the users will be able to get to their profile or shopping cart at any time and from any section.
Our rating: 3/5
The Bento menu is tricky and has to be used carefully. On one hand, it gives an opportunity to see all the content straight away. On the other, it takes too much space and may not be enough for all your content.
Top Tab Navigation
The top tab menu is another good option for your mobile e-commerce store. This menu has visible and clear tabs on top of the page where each tab contains a specific kind of content.
The top tab menu works well in conjunction with the grid menu: i.e. a tab may contain women’s apparel and the grid will show available shoes, skirts, tops, and bags.
Top tab menu pros:
- smooth navigation;
- highlights the most important sections;
- clear design.
Top tab menu cons:
- out of comfortable touch zone;
- may not be enough for all the features that you have.
Combined with other menu types, top tab navigation offers a good experience for the users and generates conversions.
Our rating: 3.5/5
For the sites with a few sections, the top tab option is great as it is very visible and minimizes the users’ actions by at least 1 click. But if you have many sections, you will probably need a sideswipe or will end up with too many tabs. This will overload your design and can confuse first-time users.
Kebabs and Meatballs: What’s Inside?
One more thing that we need to talk about is the kebab menu UX and meatballs UX.
Almost all apps, especially the social media ones, usually have three vertical or horizontal dots in the upper right corner. While the abovementioned menu types are used for navigating the store, kebab and meatballs menus aka the three dots are responsible for accessing the app’s settings.
This UX element is instantly recognized by the user and contains such settings as the user’s profile, privacy, notifications, etc. Both kebab and meatball menus are easily combined with navigation menus because they perform different functions. Navigation menus guide the user through the store and kebab/meatballs grant access to the app’s settings. So it’s highly recommended to use them when drafting the UX strategy for your mobile e-commerce store.
Final Word
After choosing the perfect navigation option for your store, the next big step will be to work out the most optimized user journey. It’s crucial to maintain a seamless sales funnel that will inevitably lead the users towards completing the purchase. So if you have any doubts about your Magento UX design or simply want to make sure everything is fine, order . We will pinpoint possible issues and also help you resolve them.