2

Imagine a web application that shows table data with sidebar filters, but it doesn't have a search box. Usually in search boxes users can exclude results (ex. Don't show X). How could a UI perform this same task of not showing results, but do it without having a search box — all clickable.

Here's how Google does it with a search box:

enter image description here

Here's 2 random ideas I had, have you ever seen a search pattern like this before?

1) Option A

Checkboxes can be clicked 3 times and can have 3 different states (Neural, Matching, and Don't Match)

I personally think this is weird, but also pretty cool.

enter image description here

2) Option B

Users can either click the green arrow to match OR the red checkbox to not match OR they can unselect both.

I personally think this is a better approach, but it takes up horizontal space in the UI.

enter image description here

Let me know your thoughts!

Improve this question
2
  • I think the last suggestion might work. You mention that "it takes up horizontal space in the UI". What kind of device are you targeting? It seems like that's an insignificant amount of horizontal space. Also, if it's for mobile, could you just wrap the tag name if it extends too far (while keeping the wrapped part aligned with the other tag names, and not stuck under the check/X)?
    – maxathousand
    Commented Mar 21, 2018 at 20:15
  • Great note! Yea you're correct, the horizontal space is pretty negligible.
    – joeclayallday
    Commented Mar 21, 2018 at 21:33

2 Answers 2

Reset to default
1

I've seen the three-state checkbox (Option A) many times, and usually find it intuitive. It's a bit tricky to communicate, but it can handle a decent number of tags compactly and it is very quick to use once you are used to it. While I don't think it's particularly common to find filtering of this nature with no option for textual search, but on sites that provide three-state checkboxes on a list of fixed tags I will often browse without using the text box and it works well for me.

I have also seen the "Included Tags" and "Excluded Tags" concepts entirely separated, duplicating the selection display as a whole. This has very high clarity, so it has some benefit if you expect users to immediately want to start excluding tags rather than leaving it as an optional feature then it could be a good idea, but it takes a lot of extra space if you have a lot of tags.

Improve this answer
0

I would suggest two different stacks of tags: Included and Excluded. And you should be able to drag tags from one to another.

Option A for me is not intuitive enough, and Option B is just boring.

Improve this answer

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.