Using filtering and search on products

Question

I'm developing a website for a supermarket and I'm facing some difficulties when building the searching product design. Just to give the context, I'm working with more than 10 categories and over 10.000 products.

Currently I have this simple design:

The "search" options on this would be:

• Select an specific category;
• Sort the list (A-Z, Z-A, Lowest price and More sales);
• Filter the Category by typing something on the search bar (this will only filter the current selected category);

The problem is that typing on the search bar is only going to filter the list already displayed.

I'd like to also have a feature where the user search for something and it will make a request to the database to search within all the possible categories. But I'm finding it difficult to represent it on the current design.

I could add another search bar on the header, but I think it's not going to be very clear on why there is 2 search bars.

I don't know what are the options for this problem. Both features seems to be required on this scenario, since it's envolving a lot of products. Any ideas/suggestion? The design is only my preference, but everything can change. The main goal is to improve user experience.

Answer 1

If your current design is giving you problems with completing your user and design goals, it might be an idea to reconsider the choices that let you to the current design. Kill your darlings.

That being said, here are some ideas that might support you;

• Having multiple search bars will confuse the user. One might think that different search bars will give different results. There's also a chance of pogo sticking.

• A search button searches the entire database. You could filter the search either after the search or before the search (by using 'advanced search'). This might be a clear cut solution for your problem, but I'd consider the other points as well.

Try and figure out what your information architecture really is. Do so by making use of user research. Do card sorting and interviews.

Remember; you are not the user. Chances are you are more skilled than the average user, know and care more about your product. Do now let it cloud your vision and design choices.

Answer 2

1)

What about a global, present search like Amazon / eBay do it. Both provide a dropdown within the search bar.

By default you are browsing the category, but you have the choice to switch to another category or browser even globally.

2)

A second search bar would be acceptable if

• the main search bar is styled clearly as a global search bar (for example very large at the very top of the page with clear wording).
• the secondary search bar is within the product results table. I saw this kind of secondary bars in datatables. In datatables you can usually sort/filter using AJAX.

But I'd go for the first suggestion.