2

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?

Variant A

  • 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.

Variant B

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

Variant C

  • 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.

Variant D

  • 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.
1
  • Hi, welcome to StackExchange. Can you edit your question with information on how you arrived at each of these variations, and why you're struggling to decide on which one is correct? It looks like some of these are filters and some are facets, can you discuss your process for selecting them? Thanks.
    – Izquierdo
    Jun 30, 2022 at 16:55

1 Answer 1

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. :)

2
  • Thank you for your answer. I agree with you that version B could be the best solution based on order, reading direction, ease of use and screen space usage. The biggest concern is if users understand why / how to use the filters. Could I add / change something to make it more clear? Jun 29, 2022 at 13:05
  • I believe it is not an uncommon way of filtering. A real world example is hm.com. When you are on a page with products at the top you can add filters like material, color, size etc. If you want it to be more clear what filter is applied you could use chips. m3.material.io/components/chips/overview Here you can see some examples of single and multi select fields to play around with: react-select.com/home
    – Rubinat
    Jun 29, 2022 at 13:42

Your Answer

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

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