3 Menu's on top of a website

Question

So I started working on a site with 3 menu's on top. The client insists that people need to be able to access categories and collections quickly. I just don't know what to suggest that would work well. Drop downs? Any other ideas? The site sells commercial equipment as well as to enthusiast market. I am not a designer and cannot think of an elegant solution. The website is made on a commercial cart software and uses bootstrap menus if that helps. Thank you for reading my question, I am attaching a quick mockup of what I am talking about.

Answer 1

Your client is basically correct - your users need to be able to find what they are looking for quickly and efficiently - not only is this good UX, but in e-commerce it improves conversions and therefore profit.

However, their insistence that all three menus be visible at once is misguided and perhaps even detrimental to the fundamental user goal mentioned above.

The users themselves are not necessarily bothered about the overall structure of categorisation that guides the products, a fact compounded greatly if the structure of categorization is something internal to the business rather than out in the community of users. You should check that the client isn't using a system familiar to them to build this menu that might not be familiar to users.

There are several ways you can help the user to discoiver what they are looking for.

Faceted search

Facetted search is the technique of giving users a breakdown of the different features available in any given result set and allowing them to break things down further by selecting those features or defining ranges of values for those features (the former is typically done for things with discrete values like colour or size and the latter is typically done for scaled numerical values like price).

A basic example applied to the OPs specific situation would be to have a top-level categories menu then a faceted search box which allowed filtering by collection. This technique can get much more sophisticated though, with all sorts of features brought in to allow the user to quickly drill down to a combination of product features that reflects their goal, or to quickly build a result set containing a mixture of features they are interested in.

A good example of faceted search can be seen here: Asos Clothing.

Some more info about faceted search is here: UX Matters

Tagging

By utilising tagging you can set categories / features for products in a less hierarchical and more natural way (you could also look at this as a product being in multiple categories) You can ensure a product appears in multiple relevant places on the site. This is great because it means users with different terms in mind when attempting to reach their goal will still find the product. When a product is in one category and one only and that category is in one place only then you can create a lot of dead ends for the user.

Our own Stack Exchange uses this method. Questions are tagged with up to five relevant tags and the result is that they appear for users with different goals but remain relevant when discovered. Tagging can be done internally, by business employees only, or it can be also done by trusted users (like SE too) meaning you could get rich tagging information from people expert in your product base. Both are worth considering.

Tagging also works very well with faceted search.

In the case of a product set that was very strictly categorised and with a user base who could guarantee know that category structure, tagging becomes less relevant.

Basic Searching and Sorting

A basic keyword search facility is also useful as long as it is well written only points at legitimate goals. So is a sort mechanism on results.

Menus that reveal themselves

Finally where there is a menu, it can be dersigned to gradually reveal itself, so as the user decided 'I am interested in x' they can be shown x-y, x-z, x-n, x-m etc. This helps to reduce cognitive load on the initial visit to the site, showing several top-level items and letting the user choose.

All these methods can help the users do what they need to do, which is navigate themselves to a goal and I think you should go back to your client with examples and ideas, look at the user base and how they use any current business, online or offline, then talk about how to make the available options work best for your users.

Answer 2

What is the difference between 'Contract', 'Sales' and the various 'Shop' options?

I would mention to your client that as a best practice, navigation is often kept to 5-9 items in accordance with Miller's Law. However, this is not to say that all navigation is limited to a maximum of 9 items. Different groupings, placement within the website, and design elements can be used to separate related items and reduce the amount of working memory required of the user in reviewing their navigation options. In your mockup, the borders around each grouping successfully differentiates them, and design elements such as color could provide further differentiation.

Another option would be to pull a few items out of the main navigation into a utility menu. Utility menus often appear in the top right corner of a website. 'Log In' and 'Register' could be considered utilities.

Regarding the overall content structure, if the primary users of the website are aware that the client's products are distinguishable by both categories and collections, then perhaps keeping both 'Shop Categories' and 'Shop Collections' is necessary. If not, perhaps 'Shop' could serve as a parent navigational item that displays 'Shop Categories' and 'Shop Collections' in a sub menu when the user interacts with 'Shop' via mouse hover or touch (on a tablet or mobile device). Alternatively, depending on the number of categories and collections in relation to available screen space, you could display each list under the appropriate heading in the sub menu.