Characteristics
The top-level menu is usually displayed on most pages of the site. It is, for many users, the starting point to browse your products. As a result, it should be:
- informative: it should give a good overview of the types of products you sell
- easy to read and use: users will only spend a few seconds on it before their next click.
- visible but not intrusive: users should clearly see that a main menu is there if they want to use it, but it shouldn’t distract them from the rest.
What to display?
Before making any decision on how to display the menu, you should concentrate on the information you want to display. You might not need to display everything, especially if you have a large amount of products. If you display to many categories and sub-categories, the menu will become confusing for the users and might put them off browsing your site.
The questions you need to answer are:
- what are the users expecting?
- what are the users looking for when they come to your site?
- what is the most logical display (for the users, not for the site owner)?
- what are your competitors doing?
It is sometimes useful to have someone who is not so familiar with all the products to have a try at sorting them. See what makes sense for the typical user.
The e-commerce site we’ve just finished has over 1,000 products and many categories, sub-categories and facets to sort it all. I was convinced, from the beginning, that not everything belonged in the top-level menu. But the client wasn’t. Their main worry was that if not all sub-categories were displayed, then some products would never show up when users browse the site. So I took my pen, paper and spreadsheet and tried to make sense of their product database. Quickly, 3 types of sub-categories appeared: all-year-round popular, seasonal and specialist. I drew up a proposal, explaining in detail the rationale behind it and adding bits of market research. In the end, they agreed to:
- display only 12 sub-categories in each category of top-level menu
- include specialist sub-categories only when they are featured for marketing purposes
- include seasonal sub-categories for short periods of time and rotate them
- include all all-year-round popular sub-categories
It didn’t take much to convince them that this structure was more efficient and user-friendly. They just couldn’t imagine how it would work until they actually saw it.
How to display?
Let’s have a look at a few different examples:
Marks & Spencer – They have a big fat menu that works well. Given the amount of products they have, you would expect such a menu from them. There are a lot of categories and sub-categories but it doesn’t feel overwhelming. It’s actually clear and very easy to navigate. An example that fat menus work when neatly done.
Vertbaudet – A fat menu with a picture to make it easier to the eye and 3 featured sub-categories on the right-hand side.
Zoom Office Chairs – Unusual position on the left column. The pictures immediately tell you whether the category contains the type of chairs you’re looking for.
Liberty – A skinny menu with no more than 12/15 sub-categories. Simple, effective and user-friendly.
Smartcard Store – A B2B e-commerce so it just made sense to allow users to browse by brands as easily as product ranges. They also wanted FAQs, technical sheets and other important information to be easily available, hence the third ‘Help & support’ tab.
These 5 different examples show that the main menu of an e-commerce site can be informative, user-friendly and aesthetically pleasing. It just needs to be adapted to your business and your target audience.
Should you remember only one thing…
…let it be this: always put your target users at the centre of any decision. Find out what makes sense for them and keep their needs and expectations in mind when building your menus. Should you try and remember something else, then it would be to discuss the site’s structure and organisation right from the start, before you even start the build.
