It’s hard to imagine e-commerce without drop-down menus; they are such an important feature of web design for nearly any kind of website. Yet, surprisingly few e-retailers have mastered the art of making them truly user-friendly. In this article, we’ll discuss the options for designing effective website navigation menus, both for desktop and for mobile. We’ll give you 8 tips to optimise your webshop’s drop-down menus and make your site even more user-friendly to navigate.
What is website navigation?
The navigation bar on your site helps your customers find their way more easily. It contains links that lead your users to the most important categories on your site. That’s why it’s also known as a ‘responsive menu’.
But website navigation doesn’t end there. Some other common features of site navigation include:
- The main menu, which lists all the website’s contents in order of hierarchical categories.
- Utility navigation, which consists of links to useful secondary functions like the shopping cart or user login.
- Filters, which enable the customer to narrow down their search results.
- Breadcrumbs, which show customers which page they’re located on within the website’s navigation structure.
- Footer navigation, which usually contains helpful links to content pages, like the ‘About us’ page and your site’s legal notice.
How does good website navigation help improve conversion in e-commerce?
Offering a positive user experience (UX) is just as important for an e-commerce retailer as it is for an offline business. That means it has to be easy for customers to find their way around your website. From the second they arrive on your site, they need to see a clear overview of the most important information so they can quickly find what they’re looking for. That’s why it’s important to offer practical, easy-to-use menus in your webshop. By enabling your customers to intuitively find all the content and functions they need, you increase the likelihood of making a sale.
In contrast, if your site is confusing or difficult to navigate, customers are likely to click away and take their business elsewhere. That drives up your bounce rate and lowers conversion. Below, we’ll show you how to create a better UX with drop-down menus and other navigation options, so you can optimise your webshop’s conversion rate.
Choosing the right main menu type: Which are your options?
When building a website for your e-commerce business, one of the first decisions you have to make is whether to display your site’s main menu vertically or horizontally.
- A vertical menu runs along the left side of the page, from top to bottom.
- A horizontal menu runs along the top of the page, from left to right.
With a horizontal menu, space is limited by the width of the screen. That’s why it often just contains short keywords. In contrast, you can make a vertical menu as extensive as you want. Just remember: It’s best to limit your main menu to the most important categories to keep things clear for your customers.
Below, we describe some common main menu design types. Most of these can be arranged either vertically or horizontally on the screen.
With static navigation (also known as a ‘fixed header’ or ‘stick menu’), the main menu is permanently visible. That means that it remains on the screen, even when the user scrolls down the page. The advantage is that the user doesn’t have to scroll back to the top of the page when they want to navigate to a different menu item. If you want to use a fixed header, make sure that it doesn’t take up too much space. Otherwise, it might obscure other useful content on the screen as the user scrolls down.
Interactive navigation is not generally a very good option for webshops. With this type of navigation, there are no links that lead your users from A to B. Instead, navigating the site is seen as part of the experience. Interactive elements gamify the navigation experience by playfully guiding the user from one section or subdomain to the next until they’ve seen all the content.
The hamburger (or burger) menu is also known as a toggle menu or off-canvas menu. It was specially developed in response to the rapid growth in smartphone use. A hamburger menu is easily recognisable by the button with three parallel horizontal lines, which usually appears in the upper right or upper left corner of a website. These lines vaguely resemble a hamburger, which is how this menu got its name.
If your site uses a hamburger menu, then users will first only see the site’s content and the hamburger menu button. When the user taps on the button, the main menu will appear across their entire screen, presenting them with all the options for navigating your site.
This type of menu is also increasingly common on desktop websites, but that means users have to click an extra button just to see the menu. That’s why the hamburger menu is primarily recommended only for the mobile version of your site.
The most common type of menus on e-commerce websites are responsive drop-down menus. These first show a main menu that lists only the main categories. When the user clicks on or hovers over a menu item, the list expands to show further subcategories. You can add as many layers of drop-down subcategories as you want. However, it’s best to have no more than two. If your product range is so extensive that you need more than two drop-down levels, you have a mega menu (see below).
A horizontal drop-down menu is sometimes also called a pull-down menu. A vertical drop-down menu is sometimes referred to as a fly-out. Both types of expandable menus ensure high usability for your customers. If you choose to use a drop-down menu, first think about how you want to structure your site’s content. Otherwise, the menu can quickly become cluttered and hard to use.
Mega drop-down menus: Pros and cons
|Provides a quick overview of contents and products.||They are not ideal to use on smartphones .|
|Can display multiple layers of subcategories.||As the menu expands, it often covers up parts of the page’s contents .|
|A precise content structure makes the site easier to navigate.||Depending on how big the mega menu is, it might cause problems related to SEO .|
|Layout, typography and illustrations provide a visual structure to all the menu items.||The menu closes automatically when the user clicks on the final menu item. If the user then wants to navigate to a different page, they have to click through to the desired submenu item all over again.|
|As the list expands to show further subcategories, it still shows the menu items clicked on previously. That means the customer doesn’t have to remember which options they chose, and it’s easier for them to click through the options until they’ve found what they’re looking for in that category.|
Web design: 8 tips for making drop-down menus user-friendly
Below are some tips about website navigation options you can use to improve your conversion rate. Our usability tips will help make your main menu—and your entire webshop—more user friendly.
Tip #1: Map out your homepage navigation in advance
Before you start choosing menu items, it’s important to plan out each function and piece of content on your website. You can usually divide functions and content into main categories and subcategories. Make sure you give clear, concise names to each category. Users generally only briefly skim over the menu items, so it’s important that they can easily tell them apart and immediately understand what they are.
Tip #2: Put the most relevant items first
The menu items that are most interesting to your users should always appear at the beginning of your main menu. If you are a SaaS provider, for example, then it’s a good idea to start your menu with items that convince visitors that your solution is right for them. Try using menu items like these:
- Why us?
- About us
If you are operating a webshop for a fashion label, your menu should focus on your products. Links to other content, like product advice or blog posts, should appear towards the end of the menu. In general, the best ways to optimise conversion for your online business depend on which industry you’re in.
Tip #3: Use a visual structure
A regular menu can only display text in a simple format. Mega drop-down menus, on the other hand, give you the option of highlighting specific menu items. For example, you can use different:
- Text sizes
- Text colours
This allows you to add more structure to the contents of your drop-down menu. Not all items have to be linked to an actual page; some words can simply serve as non-clickable headings for the various clickable subcategories.
Tip #4: Avoid including additional functions
Don’t include complex interactions in your drop-down menus, such as newsletter registration or selection and search fields, as these can often be off-putting for users. The last thing you want is for your main menu to have a cluttered design. Besides, elements like these often appear in multiple locations on a website. They have a greater impact if you put them on the pages where they fit best.
However, it can be very effective to include a call-to-action (CTA) button in the navigation bar. For example, add a button that lets your customers make a reservation or a purchase with a single click. Just remember that the CTA should be placed beside the main menu and not in the drop-down menu itself.
Tip #5: Choose between hovering or clicking
Many websites use drop-down menus that open as soon as the user hovers over the menu item with their mouse. If you’re thinking of using this option, there are a few points to consider:
- Everything at a glance: A mega menu should open all at once rather than gradually opening, one subcategory level at a time.
- Perfect timing: The menu should not be overly sensitive. You want to prevent it from ‘flickering’ when the user hovers over it too quickly. At the same time, it shouldn’t react too slowly. We recommend a reaction time of 0.1 to 0.5 seconds for optimal usability. It’s also a good idea to allow a brief pause before hiding the menu, in case the user hovers away from the menu by accident. A menu that is too sensitive or erratic will frustrate your users and cause some of them to give up and leave your site altogether.
- MouseOut programming: When the drop-down menu is activated, customers move their cursor from the navigation bar into the menu. Unless your site is correctly programmed, it will incorrectly log a MouseOut event when the mouse leaves the navigation bar, which will cause the menu to close. That’s why it’s important to set your menu so that the drop-down menu only disappears when the mouse leaves both the navigation bar and the drop-down menu itself.
- Mobile version: Hovering is not possible on smartphones or tablets. If you want to use a hover-activated drop-down menu on your desktop site, remember to use different settings on the mobile version.
Tip #6: Observe the three-click rule
On most websites, the navigation should follow the ‘three-click rule’. That means that your users should be able to reach any information on your site within no more than three clicks. Of course, this is just a general guideline. If you have a large, highly detailed website, the number of clicks isn’t so important as long as the site is well organised. What matters most is that your customers always feel like it’s easy to find their way.
Tip #7: Use multiple menus
For websites with a lot of information, it can be useful to add more than one menu. You might choose a drop-down menu with your product categories as your main menu, while also using a separate menu in the footer that contains secondary categories. This prevents your main menu from becoming too cluttered. Check out the table below to see how this looks.
|Main categories for the footer||About us||Contact||Why us?||Our tips|
|Related subcategories||Our team||Email and phone number||Payment options||Our blog|
|Related subcategories||Join our team||Locations||Free shipping||Customer advice|
|Related subcategories||Partners||Press||Fast delivery||Sale|
|Related subcategories||Ts and Cs||Customer service||100-day money-back guarantee||FAQs|
|Related subcategories||Legal||Customer service||100-day money-back guarantee||FAQs|
Tip #8: Appearance matters
An attractive menu design should stay the same size, even when the main menu items contain different numbers of subcategories. If your website contains a search function, then make sure that the drop-down menus don’t cover it up when they are expanded.
You should also include a small visual cue to indicate whether an item in the navigation bar will expand into a drop-down menu if the user clicks or hovers over it. For example, place a small arrow next to the menu name: for drop-down menus, the arrow should point down; for fly-outs, it should point to the right. This helps your buyers instinctively know that they can expect to find more information.
Mobile commerce: Making your webshop easy to navigate on a smartphone
Customers increasingly are using their smartphones to order goods online. That means it’s important to keep mobile shoppers in mind when you choose the menu options for your webshop. It’s no longer considered a good idea to hide certain menu items on your mobile version. After all, don’t mobile users expect to have access to the same information as desktop users? Let’s look at a few user-friendly options for making it easier to navigate your website on a mobile device.
The ‘do-nothing’ approach
The easiest way to design your mobile site navigation is to make it virtually identical to your desktop site. You’ll only have to make a few minor adjustments to make it easier for users to tap on the menu items using their touchscreens. For example:
- Increase the space between the individual navigation items.
- Choose a suitable text size.
However, this approach really only works for websites that have short menus and few items to navigate. For larger websites, a multi-layered mobile navigation design is a more user-friendly option.
Drop-down menus let you offer all the same options as your desktop website in a layout that’s more suitable for mobile shopping. When the user taps on a menu item, their navigation options expand over the content. That’s why this type of menu for mobile websites is also known as an overlay menu.
For mobile sites, slide-down menus are a more convenient type of menu than drop-downs. When a slide-down menu opens, it does not cover the page’s content, but shifts it downwards instead. This allows the customer to still scroll down and see the content if they want to, even when the menu is open. This type of menu is slightly more difficult to program, but it is very popular among users.
With this option, the menu isn’t integrated into the page’s layout, so it takes up no space on the screen. The user simply has to tap on the menu button to open the menu, which covers the rest of the page. Then, the website’s navigation structure is the only thing on the screen. This is an especially good option for sites with many subcategories to navigate.
Conclusion: How easy is it to navigate your webshop?
There are many options for creating a user-friendly menu for your webshop. Depending on which shop system you are using, you can choose from many navigation designs. Regardless of your choice, it’s important to start by clearly structuring your site’s content from the beginning. If you have a large product range, your best option is to use drop-down menus for your desktop website and drop-down menus on your mobile version. Use the checklist below to make sure you don’t forget any of our tips when designing the navigation menu for your website.
|Checklist for creating user-friendly drop-down menus||Check|
|1.||Category names are short and easy to understand.|
|2.||Main categories are arranged in order of how relevant they are to the user.|
|3.||There is a visual cue (such as a small arrow) next to the menu name to indicate that the menu drops down.|
|4.||The drop-down menu opens within 0.1 to 0.5 seconds when the user hovers over it in the navigation bar.|
|5.||The drop-down menu opens in full from the start. Customers don’t have to click on a category to see its subcategories.|
|6.||Visual cues, such as icons and different text colours, are used to make the expanded drop-down menu easier to navigate.|
|7.||The menu does not close if the user moves their cursor away from the navigation bar and into the expanded drop-down menu.|
|8.||Drop-down menus are all the same size, regardless of how many subcategories they contain.|
|9.||There are no interactive functions (like newsletter registration) inside the drop-down menus.|
|10.||The expanded drop-down menu does not cover up the search field or other important contents.|
|11.||Secondary functions are listed in separate menus (for example, in the footer).|