I'm working on a website (responsive) for a supermarket. I'm thinking about the best way to provide a structured navigation both on mobile and desktop. How would you organize the navigation? I've thought about a mega menu who list main categories (meat, fish, pasta and sausage, fruits and vegetables and so on). After users click on the main category they are redirect to the category page where there are a second layer of navigation which represents sub-category (several kind of meat for example), but I have some doubts: - in the grocery context, users generally buy several products which belong to several categories. So they are forced to change the category several times. The behavior could be the following: - choose the main category (ex. meat) - 2 click (1 for open menu, the other one for click on the category) - choose the sub category (ex. chicken) - 1 click - choose some products of this subcategory - change the sub category (ex. beef) - 1 click - choose other products of the new sub category - change the main category to another one (ex. fruits) - 2 clicks and so on.
Do you think could be a better way to give users the possibility to navigate easily in different categories without be annoyed?
This is my idea:
As you can see I've put the category button on top-left. This opens a mega menu which contains all main categories. Below there are sub-categories (beef, chicken). Users can easily navigate between sub-categories clicking on them. On the left, in a sidebar, there are "Product type". This is my idea about it: a supermarket has lots of products for each sub-category (ex. beef). With this sidebar users can reach the desired kind of product (italian beef) without have to scroll the entire sub-category. In mobile devices this feature is hidden behind a "filter" button.
I've come up with this layout but I'm not sure about the constant "open menu-choose main category-choose sub category". For a grocery list of 50 items could be annoying.
What do you think about it?