Skip to content
Mobile commerce is fast becoming a dominant component in the eCommerce game with 72.9% of eCommerce sales coming from mobile. However, consumers aren’t just using mobile devices to make purchases. 80% of shoppers are using their smartphones to look up product reviews, compare prices or find alternative store locations. Thus, it's important to provide a mobile-friendly website which allows users to effortlessly discover the pages they desire in the palm of their hands. A sure-fire way to achieve this is through your mobile menu design.
Broadly speaking, a menu should simplify the user journey on a website by displaying the site’s core functions at first glance. Things become a little more complicated though when transferring this functionality to mobile devices due to the screen space available. In this article, we will dive into the best practices when it comes to designing a mobile menu for your Shopify store.
Things to Consider When Designing Your Mobile Menu
The biggest hurdle you’ll have to overcome when designing your mobile menu is the considerably smaller screen size.
On a desktop site, the wide screen space affords you with the ability to display up to seven menu options that will inform visitors of your offerings and guide them to their desired products or actions. Try to replicate the same vast amount of menu options on mobile and shoppers will be presented with squashed, illegible and barely clickable menu items. This means that you will need to find a way to condense the menu options present on the top bar.
Additionally, the smaller screen size places heightened importance on text size. With a smaller screen, standard desktop text sizing will not appear legible. For your menu items to be readable, the general rule of thumb is to size your fonts at 16px - anything smaller could compromise readability.
Another important consideration for mobile menus are fingers. Modern mobile devices are touchscreen, hence, ensuring that your menu items are big enough and spaced sufficiently is vital in allowing visitors to accurately click on their first try. According to MIT, most fingertips are 8 to 10mm wide, so you’ll want your menu buttons to have a minimum height of 10mm for optimal clickability.
What’s the Best Menu Design for Mobile?
With all these factors to take into consideration, you’re sure to be wondering exactly what menu design is best for mobile devices. There are a number of basic mobile menu patterns at your disposal which we will begin to dissect right away.
Top and Bottom navigation
This menu type involves having a bar located either at the top or bottom of the screen with a selection of icons to represent the menu items.
Facebook’s mobile site places icons on the top bar to represent actions that have become well-known to users.
A great benefit of this type of navigation design is that the iconography provides easy-to-understand visual cues, when done right. Pages such as home, chat, and search can be easily identified by users without confusion. Additionally, as icons are used rather than text, there is a little more space to include more menu options.
Bottom navigation leads the way, however, as it positions itself in a comfortable area for both left-handed and right-handed users to press with ease.
The bottom section of a phone is the easiest area for mobile phone users to click with their thumb. (Source: Smashing Magazine)
Although this mobile menu design does provide more leeway for the inclusion of menu items when compared with a text-based menu, it is still limited. If you include more than 5 icons on the bar, you’ll run the risk of making it difficult for visitors to accurately click on their desired icon. Additionally, if they remain visible whilst the user is scrolling through a site or app, it can take up coveted screen space which could be used to display more products.
Cards
This pictorial-based menu system is gaining popularity across a range of mobile sites and mobile apps. A card design pattern involves having square or rectangular-shaped boxes that are filled with an image accompanied by a text label.
Just Eat uses a card navigation system that allows hungry shoppers to scroll through food options and visualize their options.
Menus composed of cards wins favor as humans are highly visual beings, we are able to process an image sixty thousand times faster than text. This will result in menu items being easily scannable, increasing the chances of a customer quickly finding the page they are looking for. Considering that you only have 10 to 20 seconds browsing time to engage customers with your content, this menu style could really come in handy.
Cards are also very customizable. E-merchants can use real products from their inventory to give shoppers an immediate real taste of what to expect from each menu category. They can also be easily adapted to different screen sizes, and have a much cleaner look and feel when it comes to displaying a wider range of menu items.
A major pitfall of this type is the huge workload when updating your mobile site. It is much easier to fix a shorter list of elements than it is to update a range of cards. Furthermore, if you have a particularly large number of cards, it poses an issue when customers are attempting to find very specific information that is buried among all the cards.
Hamburger menu
This is a popular mobile menu option utilized by swarths of mobile commerce sites. Displayed either in the top-left or top-right hand corner, menu options are hidden behind three horizontal lines. Upon clicking on this, visitors are presented with a drop down list of menu items.
(Source: UX Planet)
The defining benefit of this menu design is that it is well-known and well-accepted. There is no ambiguity with this icon, mobile users can instantly identify it as an icon which displays menu options.
It also frees up space on the top bar. This means there’s more room to display your site’s core functions, or any actions you deem as important to your customer, and hide secondary ones behind the hamburger menu.
Furthermore, this design prevents your customers from feeling overwhelmed by a multitude of menu items shown on their small screen. This can lead to choice paralysis, which is something you’ll want to avoid at all costs as it will stop a sale in its tracks. Research has shown that people are more likely to make a purchase on an eCommerce site when they are confronted with fewer options, so condensing page options through the use of a hamburger bar could work wonders for your store.
The downside of this type of mobile menu design, however, is that it creates an extra step for visitors to be able to access certain pages. Also, it is often positioned in a hard to reach place and effectively hides information from visitors to the site.
Still, a hamburger navigation design is the best choice for the mobile version of most e-commerce stores. That's why nearly all Shopify themes use it as the default mobile menu design. So, let’s take a look at the ways you can negate the pitfalls of this menu design to get the most out of your hamburger menu.
5 Handy Tips to Optimize Your Hamburger Menu
Tip #1: Show important pages alongside the hamburger menu
To overcome the issue of hiding important pages from visitors to your site, rather than placing the entire menu behind the hamburger icon, you should have the icon alongside key pages. Dig into your website data to see which pages are popular among your customers. Select up to three of these core actions and stick the other menu options in the hamburger bar.
Zara identifies New In, Shoes, and Bags as the primary menu items their customers are interested in, leaving other page options within the hamburger bar.
Plus, there’s evidence which suggests that having a combined approach to navigation on mobile - where some links are displayed and some are hidden behind a hamburger icon - results in higher engagement. On mobile devices, 86% of people use the hamburger menu when it is placed alongside other page links - that’s 1.5x more than when all options are put in a hamburger menu! It’s useful to ensure buttons like search, shopping cart, and login are not hidden in the hamburger menu as these are highly important actions for shoppers.
Tip #2: Put the menu in an easy-to-reach position
Another point of focus is the placement of the hamburger icon. Typically, we find the hamburger icon on the top left of a page as we commonly read from left to right. However, it’s impossible to reach with just one hand, requiring some effort from visitors to your site. So how about relieving this strain by placing the hamburger icon in a much easier-to-reach position?
(Source: Smashing Magazine)
The majority of mobile phone users will hold their device in one hand, making reaching a top-left corner icon a difficult task to do without changing their grip.
(Source: UX Movement)
In response to this, some mobile apps and websites have ditched the top-left corner for the top-right or bottom bar, particularly as phone screens have become larger which exacerbates the effort of reaching upwards.
Moving the hamburger icon to a more reachable position has worked out well for companies, with Facebook reporting better engagement, speed and satisfaction metrics, and Redbooth having a session time increase of 70% upon shifting the hamburger icon to the bottom of the screen.
Nike places their hamburger icon in an easier-to-reach position for right-handed users.
Tip #3: Label the icon
Another great way to boost engagement with your hamburger menu is to alleviate ambiguity completely by labeling the icon so visitors know exactly what tapping it will lead to. Labels such as Menu, More, and Explore could increase the likelihood of shoppers pressing the icon by a massive 75%.
Now, with your hamburger icon hiding only the less valuable pages to your customers and it being in prime position for easy clicking, it’s time to move onto how to arrange the menu items in the hamburger menu.
Tip #4: Organize by priority
First, ensure that the pages in the menu are organized in terms of priority for your customers from top to bottom. Aside from the product details page, the most important pages for shoppers are the product listings pages, the homepage, shopping cart and checkout page. As we’ve already established that the shopping cart should not be hidden in the hamburger menu, place your homepage button at the top followed by the different product pages in order of popularity.
Tip #5: Optimize your categories and subcategories
If your store is particularly big with a number of subcategories, you should nest them under their relevant main category and visually show that the item is collapsable. You can make these subcategories even easier to take in by listing them alphabetically.
Red Dress makes it crystal clear that their menu items have subcategories with downward pointing arrows.
Do you use thematic merchandising in your menu like New arrivals? Well, a handy tip here is to make these subsections of the menu clear by highlighting them with colored headers. This will go a long way in assisting comprehension whilst scanning and reduce fatigue.
Adding some color to the different ways to shop will make your menu much more digestible. (Source: LinkedIn)
To Wrap Up
Optimizing your mobile menu is an important consideration for all eCommerce stores, particularly as people shift towards using their phones to shop. Making sure that your mobile menu button is easy to access, simple to use, recognizable and easy to comprehend is the best way to keep shoppers on your site for longer and lift up your mobile commerce sales. With these handy tips you can set your sights on producing a great experience for your customers.
