0

I am working on a tool that allows users to analyze a report populated with a bunch of social media (primarily Twitter) posts relating to a topic they are interested in. Within this, I am building something that allows users to search the report (for things like text, author, hashtags, etc) and apply this search as a filter. So for example, a user that works at Nike may want to search the "Nike Shoes" report they created that is all about Nike for mentions of the word "Lebron" to see what people think about their latest campaign with LeBron James. They may also just want to exclude the word "Nike" to get rid of that data and see what else is mentioned outside of their brand (ie: whoa lots of people are positively talking about Adidas + Lebron for some reason this month).

I have come up with a few options for an MVP of this feature. My constraints right now are that the search/filter experience must feel very quick and lightweight, a user must be able to include and exclude text, authors, URLs, and IDs, and that we can't save or allow toggling on/off of any of these search/filters (what the heck are they?) yet.

Here are the 4 options for the controls that I have come up with thus far. In this scenario a user wants to Exclude any posts that mention or contain the author @nike from their report view. I am going throw them up on a testing site, but I would love feedback here as well.


Option 1: One search box. A user can select if they would like to include or exclude once they are hovering on an option.

Option 1:


Option 2: This was actually my first iteration. One search box with a [equals/not not equal] (could be is/is not, +/- .. not sure?) dropdown input next to it. User can click and chose if it is an inclusion or exclusion from the dropdown and then search for what they want.

enter image description here


Option 3: One search box. The searches are all Included/Inclusion (our primary use case) on default. If a user wants it to be an Exclusion they can click the "Exclude instead" link on hover.

enter image description here


Option 4: Two search boxes. The user clicks into the inclusion search box if they want to include something and into the exclusion search box if they want to exclude. I had actually settled on this option but got pushback that it used to much screen real estate and could probably be accomplished with only search box.

enter image description here

I'd love some feedback on:

  1. What option you think works best, or if there is an entirely different solution you think I am missing?
  2. Is there a better search dropdown interaction I could be going with her instead of the flyout appearing below the box? Any inspiring tools or websites with a better pattern?
  3. What is this called? It is basically creating temporary filters by searching a report comprised of posts that that user generated by.. searching a large database of posts. I have been calling it Post Search Filters but :shrug: !

Thanks so much!

0

For question number 1. I feel that of all options the least complex one is number 1. Having designs like number 2 might be tricky: users not understanding the icons, different cultures having another meaning for those, etc.

For number 2. Google has a default behaviour of including some of the words in the query and then a call out on each result to force strict queries. They highlight the missing word and give the user to option to force a strict query on it. See the example.

Check out the "missing" and "must include" at the bottom

For number 3. I would say this is either a refiner or an advanced filter.

0

Option 4 i think is the best one. Even though it may not be as elegant looking as the others, it requires the least amount of thinking upfront by the user, he doesn't ask the question "how do i get one in the inclusion area and a different on in the exclusion area". In option 1 they find that out after they interact, given they'll learn about it pretty quickly. But option 4 nicely chunks the information into 2 places and is immediately clear. The other options I think can be prone to click error where the user thought he hit include but actually hit the other or vice versa and would be forced to delete it and try again or keep thinking he did the right thing, thus wasting time.

A fifth option may be to let the user search a term and select a filter from a universal dropdown and it gets added to a list. Then using a dropdown on that term they can toggle whether or not to include/exclude where include is the default. This way they can toggle it back and forth between including/excluding and not have to delete it.

0

I'm working on implementing include / exclude filters in a different context.

I tested UI similar to some of your other options, in particular UI separating the terms in 2 lists, or asking the user to select whether to include or exclude beforehand, but I also got feedback saying they were confusing. It seems that the natural order of operations for most users is word, then include/exclude decision.

I researched a number of options, and the best I found is this one: https://help.highrisehq.com/contacts/better-tags/

In short, you search and select a word. It appears as an include filter (default option and typical behavior for filter). There is a control next to it for a secondary action to exclude the word, if necessary.

This is the best because the user starts by typing into the input field, which is the action users are most used to, and the filter is applied. They can make the choice of excluding the term afterwards, but it is optional. The filter action is broken down in 2 simple actions.

The closest option among the ones you suggest is option 3, but in your example, you still ask the user to make 2 choices at the same time: which word, and whether to include or exclude. Plus the way to include is not spelled out. As there is no boundary on "Exclude instead", they might get confused as to what clicking on the bar will do.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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