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.