Search filtering in B2B product

Question

I'm working on a webapp that contains 1000+ "recipes". A user gets a list of all recipes by default and search options to narrow down the results. Within the team we did a sketching session and came up with a few options.

The wireframes show a part of the webapp. There is a big navigation drawer on the left side (not shown in wireframes).

Some things we mentioned during the brainstorm:

• use as much screen real estate to show the cards (recipes)
• should be intuitive and fast for user to move forward and switch back
• the amount of options in a group (product / category / exchange) can be > 10

Q: I'm very curious what variant has your vote, and why?

Q: Also if available are there any examples online that deal with the same problem?

• Show all items in one row, so it's clear all the options belong to each other. Also using less space. On the other hand, the search bar results in a list of results, which are filter-able by the select boxes. To this can be confusing.

---

• Variation on variant A, where I tried to de-couple the search bar and the results filters. Uses a bit more screen space.

---

• A common e-commerce solution, so users know how to use it and what to expect. Mostly used on the left side, but in this app there is a navigation on the left side, which conflicts with the filters. All options are visible in one view, so the user doesn't need to take action (click) to see what's possible. With the navigation on the left and the filters on the right, there is not much space for the results.

---

• Tried to apply the Google search solution of using tabs for the products. The user then sees the results grouped by category. This allows the user to fully focus on results per product. But on the other hand doesn't allow a multi product search.

Answer 1

My preference would be option B, because there is a clear way to filter through a searchbox, followed by checkbox filters. I would figure you could filter through only the checkboxes as well. Reading from left to right and top to bottom this seems like a good placement for me. Also this way at first there is a clear "view all" to start with.

Option C hogs a little much of the screen estate, in my opinion. Option D takes away the overview when you divide the content in tabs. Users might miss the tabs and not find the recipe they might be looking for. I think I would start with a clear overview state that you can filter in. Option A is similar to B. However B has my vote since the checkbox filters have their own defined space. In option A this might be overlooked or it might be perceived that the searchbox and the checkbox filters are dependent on eachother, which I would figure is not necessarily the case.

I hope my rambling helps you somewhat. :)