4

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: wireframe cateogory

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?

Improve this question
1
  • This is interesting. Seems as though your search is going to be such a big feature on your site. Kind of like Amazon. People shop so many things on amazon and that's why their search is front and center.
    – UXerUIer
    Apr 8, 2015 at 12:21

3 Answers 3

Reset to default
2

Having different categories is fine. However, I foresee your users using the search function far more than the navigation because people already have a "shopping list" (might not be a bad idea to implement on the site). They will look for those specific items immediately - might cause them to search immediately for what they want.

The key here is to have a really good search function in place (like Amazon). For instance, if they search for tomatoes it needs to clearly show search feedback for many possible results: raw tomatoes, canned tomatoes, tomato sauce, etc. Having a good search function will allow your users to find things quickly and checkout faster.

Amazon search function example:

enter image description here

Update

Your current solution for navigation is fine, but be prepared for people to heavily use your search function because it will be easier for them to find what they want in an instance in comparison to jumping categories and digging for what they want.

Improve this answer
2
  • Yes, of course search is a key feature, and, I totally agree with @Majo0od that it must be really good in providing feedback for many possible results. But this doesn't resolve my problem. I think that is not possible eliminate the categorization and provide only the search feature. I've come up with the idea explain above and I'd like to improve it (if possible) without counting only on the search feature (which of course remains a key feature for this kind of service)
    – Matteo Vacca
    Apr 8, 2015 at 12:35
  • Don't eliminate it, just be prepared here that the search function will be heavily used more so than the navigation. Like you said, because people buy multiple things in multiple categories, it will be harder for them to jump in and out of categories while simultaneously digging deeper to find what they want.
    – UXerUIer
    Apr 8, 2015 at 12:37
1

It seems that people will most frequently buy a small range of staples combined with a smaller number of long tail good that they buy somewhat repetitively. For example most people will buy milk, bread, cheese, eggs, ground beef, chicken breast, etc. Then people will also buy things kind of unique, like cocounut milk or something, and people will tend to repeatedly buy these things.

So, for me a useful way to buy (that would minimize navigation and # of clicks) would be to have two pages, one would have staples in a layout like http://www.craigslist.org/about/sites has cities. You have a few categories and the very common things that people would buy in each, so people can go through quickly and check off 80% of their list before they even start. But only show the top 5-6 most popular in each category. But let people search/navigate more with a link/button at the bottom of each category.

This brings you down to essentially one page for people to work through.

And remember old lists to let people start from a previous list, I buy pretty much the same things most month.

Improve this answer
0

One thing to remember is not to overwhelm the user with too many choices. 'Too many' can be calculated with Hick's law and could use it as a guiding principle with linear discovery process. The initial screen looks like a fishbone diagram and will ease the cognitive load of the customer. I would also agree that the search cannot be overlooked as a discovery of fishbone nature would be extremely time consuming.

There being no silver bullet, categorizing the user approach as top down(department-> meat-> type of meat etc) and bottom up (clementine->fruits->sale) could mean: top down user to use discovery approach and bottom up to use search.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.