Boolean switch with a third state

Question

Note: I am not creating a sign-up form, I am not collecting personal data. This control will be used to build a filter.

I have a query creator form that helps the user to create a SQL query. All the possible variations of the query are listed and the user has to pick their required variations and run the query.

Problem

For an individual, the user can choose the Gender. From the outside it seems like a Boolean operation (Male or Female) but it has one more variations.

1. Individual is MALE
2. Individual is FEMALE
3. Individual's gender should not be considered (Can be MALE or FEMALE)

I have replaced radio buttons with a Switch like this:

How do I represent the 3rd state?

Answer 1

If I understood correctly the premises of the question, what the user should decide is:

1. If the user wants to consider (filter by) one of the following options
2. If the answer to 1 is Yes, then choose one of the options

The possible outcomes are:

• Option A
• Option B
• Not applicable

Original proposal: [demo]

Considering you are using toggle buttons, for the third outcome you could give the possibility to unselect both options (adding an extra note to clarify this possibility or an "(optional)" next to the label). Either one or non buttons can be selected. Clicking on an already selected button deselects it.

Second proposal: Let the user decide 1 and then 2. The checkbox enables/disables the buttons. In this case the toggle buttons can act as radio buttons where one needs to be selected.

(Thanks @theonlygusti for the feedback on the checkbox wording)

Answer 2

You are creating a search-filter? Just add an option that means you don't care about this filter option.

male | female | doesn't matter

Other names:

• Any
• Either
• Everyone
• N/A (Not Applicable)

I like "any" the most.

The author expressed a concern that

If I explicitly give "Any" or "Doesn't matter" as an option, the user will forced to pick (thus introducing an unnecessary click)

so that's why "Any" should be selected by default.

---

This would still be a set of radio buttons by the way, functionally. They just have a custom appearance.

Answer 3

What you're searching for is "both", "any" or "all" (in case you add more gender categories).

All - Female - Male

So that makes it clear that results from both (or all) genders will be included. And this way the user has to choose one of the three toggle, possibly "All" would be selected by default.

Answer 4

How about adding a Third Radio button for the Third state?

Answer 5

In many situations, context is really really important, and it may be sensible to look at a consistent way to do all filters, and not just the male/ female one. As the question states:

The form of which this is a part is used to filter a large list of people by certain conditions.

What are the other "conditions" and how do these match up? Do they include hobbies? country/ region/ city of residence? department? Number of years of service? With or without multiple/ nested options to filter?

As an alternative, it could be worthwhile to look at how "typical" filters in Ecommerce environments work:

• if nothing is selected, no filter on this condition is applied
• if one (or more) are selected, then only those records with that condition are shown
• if all options are selected, all items with those options are shown (note: if an item does not have any option, the item is not shown, so in the male/female example, if user selects both male and female options, then only people where the gender is filled in are shown)

Answer 6

As others have suggested, offer Male or Female as well as Other, Not Specified (or any number of options depending on the data collected).

But your question is really about how to eliminate the entire field which should either be a checkbox indicating it is part of the query/results (example image below) OR you should add/remove/reorder fields from a list.

The second option works best if there are many fields to choose from. The first option is easier on the user.

Checkbox example:

Answer 7

For a selection which includes 'no choice', plus other, exclusive choices, a good old fashioned select box is great! In this specific case, it would allow you to have a default of "Don't filter", plus as many other options as you need, like this (showing closed state, plus the options when open):

It also has the nice side-effect of being sensibly sorted alphabetically, so you can side-step any political considerations of which option to put first!

Answer 8

Based on all the extra info in the comments so far, I would suggest adding a reset button. It provides the wanted "unset" state and it doesn't leave users to guess how to unset it.

Answer 9

I would argue that a dropdown is the best UI object for this situation.

^{download bmml source – Wireframes created with Balsamiq Mockups}

It's likely more familiar to the users, easier to tell what's selected at a glance, and trivial to change back to the "any" state. Additionally, it's extensible, if you want to add "transgender", for example. Only potential drawback is that the other options aren't shown to the user without interaction.

(Assuming the source data isn't free-form. If it is, then an editable combobox might be best, though not the most intuitive.)

Answer 10

If you want there to be some filter options that can be added or removed in the query, consider an approach where all active filters are represented as boxes on a separate line at the end, and can individually be removed to disable the filter (typically with a little X at the end). This is similar to how multiple recipients are specified in most email and text message applications. Bear in mind that this may not make sense if all other filter options are mandatory (I'd have to know more about how your query builder works to tell if adding 'boxified filters' to the mental model of the user is worth it).

Answer 11

I agree with a couple of the other answers: it looks like you need a third, "doesn't matter", option. You could consider the following wordings:

• doesn't matter
• any
• not important

Surely, these are NOT ok:

• other (it's not about picking items that are neither M nor F)
• both (not good if you intend these "doesn't matter" case to appear everywhere: you can't say "A, B, C, D, both")
• none of the above (same as "other")
• all of them (may be good, but I'd rather go with "any" or "any of them")

As a secondary concern, the specific case of gender has a whole set of implications, that others have so valiantly defended (even though they largely missed the point of your question). Gender seems to be a very sensitive topic: maybe next time use another example :)

Answer 12

Better solution: you can use jQuery's tristate switch. https://vanderlee.github.io/tristate/

<input type="checkbox" class="tristate" value="1">
<input type="checkbox" class="tristate" value="1" checked="checked">
<input type="checkbox" class="tristate" value="1" indeterminate="1">

Boolean switches are designed to have only two states.

If you need a "third" state you need to use something else. Radio buttons, slides, dropdown lists. If you are filtering, then I would use a switch for each category, (not three states). Because, you have 4 possible search combinations

Male   filter [ ON | OFF  ]
Female filter [ ON | OFF  ]

Answer 13

All the possible variations of the query are listed and the user has to pick their required variations

I would say this answers your question. You should not be treating the gender field as a boolean value, but as an enum value, which happens to, in your case, only support 2 different values.

In that sense, simply show a selection as you would for any other enumeration:

• Either a single select or a dropdown with (All, A, B, C) options;
• Or, a multiple selection or a series of checkboxes with each option and the usual (select all / select none) actions next to it.

Answer 14

The space saving alternative: Two buttons, "Male" and "Female", and at most one can be highlighted.

It's a filter. Filters remove data from a dataset. Select "Male" and only records marked as "Male" are used. Select "Female" and only records marked as "Female" are used. Select none and all records are used. Nothing selected is the default state. If the user chose for example "Male" and changes his mind to want none selected, another click on "Male" turns it off.

Some people seem to have a fixation on people who don't fall or don't want to fall into these categories, or don't want to tell their gender. Those people will obviously be in the list if you choose nothing. And this is right so - I wouldn't want any Dick, Tom and Harry to be able to find a complete list of all transgender employees (which are probably very few), because that is not unlikely to lead to harassment or discrimination if they are easy to pick out in a large population.

Answer 15

I would use checkboxes, so you check the ones you want to consider for search, because basically you have "Search for Males"/"Search for Females"/"Search for Both"

A secondary advantage is that if your system expands to include other genders, you simply add new checkboxes

Answer 16

Another way to consider it is having two toggle button, that is, filter using what the user selected. If they don't select either, don't include it in the query. If the select one of them or both of them add in the where clause ... and gender='male' ..., or add in the where clause ... and (gender='male' or gender='female').

If gender is always present, this will produce the same results of no gender is selected in the ui or both are selected.

If gender is nullable, then you may want to add null as a selectable item: [NULL] [MALE] [FEMALE]

For me it really depends on the context of the ui whether I go with the checkbox activating the field, or I just list the options a particular field has.

Answer 17

Boolean has only two states; on/off or one/zero. On the other hand if it's in a database it can be null, not set. So use zero, one or null for male, female, other. Three states in one Boolean field.

Answer 18

This is a situation where there are two choices, but you might consider it a specific case of a situation where there are N choices. I would then ask, how would you create a filter with N choices, and then apply N=2.

The benefit of this approach is that if you ever want or need to include other genders, you don't have to change your filter allowance. Also, it provides greater consistency with other filters that have N choices.

How about just a list of checkboxes?

Filter by gender:

[x] Male
[x] Female

They can be both on, or one of them can be on. The application should make sure that you cannot uncheck the last option, as it would result in a situation where all items are filtered out.

If ever you need to expand it later:

Filter by gender:

[ ] Male
[x] Female
[x] Other
[x] Not specified

The only downside is that it may require more space. Typically, I would advise you to place your filters in a column rather than in a row.

Answer 19

You're better off having two yes/no fields rather than radio buttons. It can still look exactly as you have it, but it permits all 4 states including both on and both off. To emphasize the on/off ness of it you can add a little on/off switch that toggles to each sex.

Answer 20

what about this compact approach for a yes/no/neither filter input

taking a cue from sort buttons in column headers which switch from off/up/down/off per click

one button that changes values per click, showing the current filter selection:

--------------------
| filter by gender |    (gender filter is off)
--------------------

(click)

--------------------
|      female      |    (female filter is on)
--------------------

(click)

--------------------
|       male       |    (male filter is on)
--------------------

(click)

--------------------
| filter by gender |    (gender filter is off)
--------------------

the "female" and "male" buttons could be inverted colors to indicate that the given filter was "on"

Answer 21

The whole idea on which genders should be mentioned in a form is broadly discussed in Order of "female" and "male" in survey form

Reply to OP edit

If you're filtering the data, I'd not be using switch for gender (either male or female, never both) but rather put two checkboxes, one for each gender, where the user can check and uncheck any of the possibilities, but checking should automatically uncheck any already checked options. It's quite easy for implementation as well.

Even if it is UX level of design, I'd strongly suggest you not talk about types so explicitly. It may hint some less experienced developers to use boolean for gender.

Slightly out-of-topic remark:

Don't use boolean but enums (imperative programming) or defined types (functional programming), even if there are only two options possible:

Pros:

• in the implementation you constantly see which parameter and how is being handled
• no chance for mistake (e.g. was true for male and false for female, or was it the other way round?)
• adding new possibility does not force massive code change (extending from 2 to 3 options, and so on)

Cons:

• slight implementation overhead in the beginning (once the enum/type is defined and class/functions are implemented the workload is the same)
• slightly more space usage (e.g. int vs bool), but does it matter with nowadays storage prices?