3

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: enter image description here

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.

2
  • Why it's only possible to search for products which are already displayed? A search bar should browse the whole site (user's expectation).
    – Ruslan
    Jul 12, 2017 at 12:08
  • @Ruslan That's the problem. It's not restricted to this, I can search on the database through all the products. But I also need to keep a Filter, to filter only the current list based on what the user is typing on the input. I want to know how to use both features together. Jul 12, 2017 at 12:10

2 Answers 2

2

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.

1
  • I agree with you, this is why i said it can change the design, the goal is to improve UX. We are currently trying to make some user research, but since the product isn't ready, we just have some expectations. But it's helping, advanced search may be an option. Jul 12, 2017 at 12:58
1

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.

enter image description here

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.

1
  • The first case is an option I was thinking about. The Trivago website does this and on the left column (with multiple options), there is an filtering by hotel name at the very bottom. It's a bit different from Amazon and Ebay, but I'm analysing all of them. Thanks for the hint. Jul 12, 2017 at 13:04

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.