2

I'm creating a filter for a search and I am wondering how to best approach this interface.

I have a bunch of events in a database and my website displays certain events based on the user's criteria. That's simple enough, but some events have notes on them, like they serve alcohol, or you have to be over 18 to attend, or it's for women only, or something like that. What I'd like to do is add to my "search" form some way of representing and toggling between these options.

This will be more than just on and off, since I also want them to have the ability to ignore these as well. In this case, if I turn 18+ off, does that mean it will actively hide all 18+ events, or that it just won't show only 18+ events? It gets confusing for the user.

To give the user all options and make this as clear as I can, I'm thinking a three-way toggle is best: OFF - This setting ignores the 18+ note and displays events normally. SHOW - This setting shows only 18+ events. HIDE - This setting ignores all 18+ events.

IF I were to do this, I'd have to also consider layout. Will this be a three-way switch? Will it be a grid where there are three checkboxes? Will I have to turn "on" an 18+ search criteria and then select "on" or "off"?

If I did a three-way switch, how would I design it? How would I name it so that it's clear one setting just ignores the 18+ altogether, while the other two exclusively show or hide these events?

This is where I would like some assistance. Have you seen something like this before on a website (or other interface) where this was done particularly well? Can you offer any advice?

Thanks!


(A bit about my background - I'm a huge UI guy. I have a Master's in it, I do it professionally, and I've even taught some college courses in it. This is my first post here. Hello all!)

2 Answers 2

3

Toggles can only be two way also they are tricky. I think what you looking for is a group button. It is way more intuitive than toggle (it clearly show what is selected, and are labeled), however group buttons require more space than toggle. I will do it this way: enter image description here

0

Never heard or seen 3 way toggle, but maybe it is just semantic of the word.

Answer depends on the specifics of filter facets. If it is just a bunch of yes/nos and they are not mutually exclusive then definitely go for for checkboxes.

Ticked box means that criteria should be met. Unticked means - I do not care about this.

Restrictions
[] 18+
[] Women only
[] Serve alcohol
[] Alcohol free

With checkboxes you can groups filter options in a meaningful ways which correspondent to users mental model instead of implementation model of the database. Keep in mind that relationship between 2 options of the same groups should be "or" so that picking both filter for alcohol still makes sense.

If you have only mutually exclusive options use radio button and use "Any" as default option. E.g. "

Fuel type:  
(*) Any
( ) Diesel
( ) Carrot juice

It always worth looking at the seasoned players in letting users to filter through a lot of stuff, such as amazon.com or autotrader.com.

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.