Need your UI/UX help please!

Fellow Bubblers, I’d love to get your take on this UI/UX debate we’re having.

We have some multi-select filters on a page that filter a list of things. Many users ask us if we can implement an option that filters for blank/missing/none values. We searched high and low for a way to add a “none” option in the multi-select but that didn’t work. We also considered a checkbox, toggle, and icon but eventually landed on a “button” that when clicked enabled the “none” filter.

“Off” state

“On” state
Screen Shot 2023-07-20 at 3.57.04 PM

The debate now is some are saying this looks too much like our buttons in other places in the app and doesn’t indicate on/off very well. Is the blue button saying the filter is on, or is it saying it’s off? The other thing we are implementing here is when someone selects a value in the multi-select, the “none” filter automatically gets disabled.

How would you address this to 1) Achieve the desired result of filtering for “none” and 2) Making it clear for the user so they know what to do?

Thanks!

Hey there, friend! I’m a bit confused about what “none” being on or off means. Can you give me an example?

@barzegari.kamran Here’s an example: A “Thing” on the database can have a “Contact” associated with it. Our users are asking for the ability to filter their list of Things so it shows those that DO NOT have a contact meaning show me all Things that are missing a Contact. There are several of these filters we’re looking to implement, and we don’t have a way of doing it using the multi-select element we currently have, so we’re looking at implementing a button or something that would set this filter. Let me know if that makes more sense

Have a checkbox with some text that says “Include Empty”

2 Likes

That UX is horrible

Add a “Include Null” checkbox instead.

@EliteDataEngineer I’ve got zero UI/UX experience so constructive feedback is appreciated.

@tylerboodman Thanks for the suggestion. Didn’t think about the “empty” idea.

1 Like

You should be marking his post as solution instead.

1 Like

This topic was automatically closed after 70 days. New replies are no longer allowed.