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:
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
Fonts
Icons
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.
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.
