Mega Menus work very well for ecommerce stores
A mega menu is an excellent choice to improve your navigation on desktop. This is doubly so if you have a large site structure with lots of categories and sub-categories.
Since navigation options are revealed on hover, mega menus have been shown to be much better in terms of usability compared to drop-down menus while still saving you screen space. Having one isn’t an end in itself, implementation is just as important.
How do you implement an objectively good mega menu?
- For starters, you should show your sub-categories as columns, not rows. This makes those options easier to scan.
- Limit the number of your sub-categories – ideally three to five if these sub-categories have sub-sub-categories of their own. Having too many options is needlessly confusing to your visitors. A person’s short-term memory can only store so much information before confusion sets in. Shopping should never be made to feel like a mental workout.
- Optionally show an image for each column. Thumbnails can be used for each item in the event that you only have a few sub-categories. Our minds interpret visuals quicker than plain links. They also are remembered more easily, and go a long way with customers who have visual impairments. This makes them especially important if your store targets older customers.
- Implement a reasonable hover delay. Having your menus fly out every time a mouse pointer hovers over them causes screen flickering and needlessly annoys your users. According to Baymard, you should allow the mouse pointer to hover over an option for 0.3 to 0.5 seconds before showing the expanded menu. You also need to keep displaying the menu for another 0.3 seconds after the pointer strays away before disappearing it.
- Group related products together rather than relying on alphabetical order. Intuitive categorization simplifies navigation for your users and rids you of unnecessary confusion that might cost you conversions.