4

We have a web app that displays a list of items as tiles. Each item can have zero to many 'tags' which can be used to filter items using a row of toggle-able buttons at the top of the page. There will be a maximum of around 30 tiles and 8 different tags.

When filtering by multiple tags should the list show:

A. All items that contain any of the selected tags

B. All items that contain every selected tag. Note that this would also change the list of filters since it wouldn't make sense to show filters that if selected with the current tags would lead to an empty list.

C. Something else...


Here's an example displaying restaurants and filtering by food:

Toggle filter example

4 Answers 4

3

Provided you define how the filters work to your users, I would go with option B.

Consider the different user scenarios:

  1. A user is peckish for sushi and needs to find a sushi restaurant.
  2. A user is peckish for sushi and her boyfriend prefers ramen.
  3. A user is undecided between sushi and ramen.
  4. A user wants ramen and she might consider a side of sushi.

-- Option A covers successfully scenarios 1 & 3. It partially covers 4 but the user will have to search and find the restaurant that serves both.

-- Option B covers successfully all 4.

Option A also looks like a "weaker" way of filtering. You are still throwing a lot of restaurants to your user and not really thinning down their options at all. In the scenario where they want to find "an authentic sushi restaurant" they'll just search for sushi and that's it. Same for ramen.

In general, the most common reasons (in your particular example) a user would like to see all possible restaurants is usually because they are browsing or they are massively undecided.

This is an excellent test for A/B and user testing btw. And I am sure you'll get some interesting results!

3

I will do it like that: enter image description here I basically agree with "Socrates Kolios" that option B covers successfully all 4 user scenarios, but! It also cut some options, that suit scenario 1, 3 & 4. So I think putting this additional search result below will not harm scenario 2, but can contribute greatly to scenario 1, 3 & 4, especially when there is not much of the search results. Also it is better to get search result that partly suit query than not get any at all. I also propose to borrow from google the way to show which part of result doesn't suit. enter image description here

It showing what is missing and informing user that he/she reach a part of "partly suit results" (if she/he didn't read the head line).

1
  • I like it, ordering the result who don't match all filters at the end and make it apparent with the strikethrough text. Maybe highlight the tags that are presents too ?
    – GrecKo
    Oct 4, 2017 at 11:09
2

Basically you are not sure what will / should happen and that is exactly how your users will feel. I think the question shouldn't be which one is specifically right, but what causes this problem. The filters themselves are just empty words, without a clear title or description.

  • You can try to provide a bit more context to your filters. If for instance you add 'amounts' to your filter tags, it will give a user a better idea of how many results he'll get.

  • Adding a title could also provide a better context of what these filters will do. Like 'Dishes' or 'Cuisine'

  • Adding an additional first item that just says 'All (18)' that is already selected could work as well.

  • Adding a short descriptive text of how the filtering works: "Showing 14 results for Sushi & Ramen" / "...results for Sushi or Ramen"

.

For example:


Dishes: All (18), Pizza(2), Ramen(6), Sushi (8)

"Showing 14 results for Sushi & Ramen"


This gives a user much more context of what is being shown right now (when only 'All (18)' is selected) and what will happen if he clicks a certain/multiple tags.

0

You could go for another approach, offer both options. It's often done for more complex and/or operations.

You could do it with a toggle or dropdown in front of all the tags (to the left of them) saying something like 'show restaurants that have any' or 'show restaurants that have all'. I admit the labels can be improved but hopefully you get the idea. You still have to pick a default though, it's probably best to look at similar sites/products that offer the same functionality as users will be used to a certain pattern.

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.