62

Note: everyone has seemed to have misunderstood this question. Literally, everyone. I am not creating some sign-up form, I am not collecting personal data. The form of which this is a part is used to filter a large list of people by certain conditions.

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:

Screenshot of widget

How do I represent the 3rd state?

  • 58
    @SteveD - This isn't a form that allows the user to pick a Gender, it allows the user to create a filtered query. The purpose being to create demographic analysis charts and so on. – Shreyas Tripathy May 15 '17 at 11:58
  • 4
    if the gender doesn't matter, that means the result will include both, correct? – Luciano May 15 '17 at 13:00
  • 6
    I just have to point out thedailywtf.com/articles/What_Is_Truth_0x3f_ – JDługosz May 15 '17 at 16:02
  • 67
    It's not exactly boolean if it has a third state, right? – Mast May 15 '17 at 16:11
  • 16
    It may be too late at this point, but removing the specifics from the question would have been a better option. Consider replacing "Gender" with something neutral, like "Has doodads? Yes/No/Indifferent". The fundamental question has nothing to do with gender, but you managed to attract plenty of opinionated people who consider gender a very sensitive topic and started posting answers that aren't answers to the question. – Luaan May 16 '17 at 8:26

21 Answers 21

81

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)

  • 3
    Actually the third option is more like the disabled state rather than other. I guess I'll go with the unselected option. Keep the backend as a checkbox rather than a radio button. Thanks a lot @Alvaro – Shreyas Tripathy May 15 '17 at 10:09
  • 11
    How do you reverse an accidental click here? What is the mechanism for reverting to the default state? – Andrew Martin May 15 '17 at 10:46
  • 10
    I don't like this option because it is ambiguous. If you have never encountered this type of input device before, it's tricky to use. You said yourself in the question: "adding an extra note to clarify this possibility" — UI components shouldn't need clarification. – theonlygusti May 15 '17 at 12:23
  • 4
    @KristiyanLukanov I agree that choosing between A|B|Both has one less click. In the second proposal I am trying to address the OP statement "Individual's gender should not be considered" and nothing else. I understand your logic but as I said above maybe for this context "Do not consider" and "Consider All" are not the same. I could be wrong and reading that sentence too literally, though. – Alvaro May 15 '17 at 15:58
  • 3
    Call the checkbox "Filter by gender" rather than "consider gender." To native English, it sounds wrong. – theonlygusti May 15 '17 at 18:24
115

Here:

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 OP expressed (in the comments on this answer) the worry that this solution would force the user to make extra clicks. However, as IMSoP put it:

If the default is "Any", then that option should be selected by default.

Just have a default-selected option.

  • 5
    I really can't understand why the op could even ask this question. I mean even in the question he says there's three states so why would you even bother with two radio buttons. got a total of three radio buttons male female or any. This is the answer – JonH May 17 '17 at 20:52
  • 2
    @JonH - The third state, in effect, is a virtual state. If I explicitly give "Any" or "Doesn't matter" as an option, the user will forced to pick (thus introducing an unnecessary click) one of them for the query to work. A filter always cleans up the information already present which should happen by default. If I don't pick any options from control mentioned by theonlygusti (which isn't incorrect), the resulting set would become NULL. I hope that clears things up. – Shreyas Tripathy May 18 '17 at 12:21
  • 16
    @ShreyasTripathy Who says the UI will allow you to not pick any option? If the default is "Any", then that option should be selected by default. The already selected option should be read only (clicking it does nothing). This is the principle behind any sane implementation of radio buttons. If there is no default, then at least one click is required by definition, and submitting without selecting an option would be an immediate "input validation failed" message. – IMSoP May 18 '17 at 17:37
  • 4
    To me it makes more sense to put Any as first option. If the page has let's say 10 filter options, then all of them could have Any as first button and they would have the same horizontal position. So you can easily see which filter options you have changed from the default option Any. – Paul May 19 '17 at 22:55
  • 1
    @DaboRoss op has said they don't want that. also, read the question. – theonlygusti May 20 '17 at 21:05
28

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.

  • 11
    I would use "any" instead of "both" or "all". – user31389 May 15 '17 at 16:10
  • 4
    I just provided an answer to the question, while you went on to add a rant at the bottom of yours. (and by the time I added my answer your solution was "male | female | doesn't matter", before you edit it). It's not a competition. – Luciano May 16 '17 at 8:13
  • 1
    @theonlygusti probably because even if yours better, it includes an unnecesary note claiming you are the only one with a brain. Those kind of thing tend to put people off. This is not a site where pointless rants or cocky remarks are valued much. – xDaizu May 16 '17 at 10:15
  • 1
    @xDaizu pointless rants? I think that the point I was putting across, that everyone was misintepreting the question, was quite an important one. I allow my note to be removed now because it has become irrelevant, but at the time it was relevant and reminded question readers that 90% of the current answers (which were all upvoted) were completely incorrect and not even partial solutions – theonlygusti May 16 '17 at 12:04
  • 3
    @theonlygusti If you think other answers haven't addressed the question, downvote and/or comment on them. Your own answer is not the place to make such comments. Your answer is for answering the question. – Anthony Grist May 16 '17 at 13:50
12

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

enter image description here

  • 14
    I can't do that because technically the third state isn't other. It is more like neither which is never a good idea to have as an option UX wise – Shreyas Tripathy May 15 '17 at 10:11
  • 14
    The mechanism here is still valid - You could label the 3rd button "prefer not to answer" or anything else that suits your purpose. – Andrew Martin May 15 '17 at 10:46
  • 6
    This is the most intuitive and unambiguous solution. – Matt Obee May 15 '17 at 11:30
  • 40
    I'm not convinced that this addresses OP's problem. As an analogy, I can filter my emails based on High/Medium/Low importance, but if I saw a query builder with buttons for "High/Medium/Low/Other" then I wouldn't intuit that the button reading "other" actually showed me all three. – ymbirtt May 15 '17 at 13:40
  • 13
    Upvoters, READ THE QUESTION. This is Not an answer to the question: the question asks for a FILTERING mechanism, not some data collection form. Filtering a list by condition "other" makes no sense. This answers and the others like it should not be so heavily upvoted. In fact, were we to filter by gender "other" we would get people who are specifically neither male nor female, which the OP has said they do not want – theonlygusti May 15 '17 at 19:28
12

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:

enter image description here

  • 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)
  • This is exactly how I've implemented filters when I've needed it, and users seem to always grasp that a condition with nothing selected will always pass everything unmodified. You do need to be clear about delineating the separate groups though (as done with the headers in this example, but group-boxes or separator lines work well, too). Depending on your needs, I'd consider including a checkbox for "Other/Unspecified" if a null value is valid (but it really depends on who is querying and why, so I can't make a definite recommendation). – Toby Speight May 22 '17 at 9:44
9

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):

Select showing non-binary options

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!

  • Are these all really exclusive choices? If we might want to select everyone who is "Not specified" or "Other", then the user needs to make two queries. I'm not saying that this answer is wrong, just that it does make us ask what the requirements really are. – Toby Speight May 22 '17 at 9:47
  • According to OP's question, yes, the options are exclusive. You're right, though - if the options could be selected in combination, then this wouldn't be the right choice. – Beejamin May 22 '17 at 11:04
8

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:

Gender Selection

  • 5
    Nested checkboxes. Hell a lot of clicking. – Uwe Keim May 16 '17 at 8:43
  • 1
    This looks more like a rendering issue then intended placement, tbh. I have never befre seen checkboxes placed that way and would suspect something went terribly wrong if I ever encountered it in the wild. Plus, its redundant. Rename other+ to *any and the chackbox serves no purpose at all. – Polygnome May 16 '17 at 8:47
  • 1
    @PeteKirkham Deducing from the second part of the screenshot, this seems not possible. – Uwe Keim May 16 '17 at 11:07
  • 1
    @GraemeWicksted Why would you need those checkboxes for that? gender could be [Male | Female | Any]. Male/Female restrict searches, Any means the filter is not applied. If its possible that some records do not have a specified gender, and you want to only show those, you use [Male | Female | None | Any] (or "unspecified" instead of none, if you want). Those additional checkboxes just complicate the form - plus they look really out of place on the fieldset border. – Polygnome May 16 '17 at 14:23
  • 2
    Where did 'other' magically appear from? The OP has stated that the only valid options are 'Male' and 'Female'. – Pharap May 21 '17 at 0:12
7

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.

enter image description here

  • 3
    ...or "unset" or "clear filter" – A C May 15 '17 at 20:33
  • Or whatever is appropriate – jazZRo May 15 '17 at 21:25
7

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

mockup

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.)

  • 1
    Nitpicking: A 'combo-box' is a 'combination text entry / select' (which I think you're calling an editable combo-box) - where the user can enter their own value or pick from the predefined ones. Without the text entry, it's just a 'select' or a 'drop-down'. – Beejamin May 17 '17 at 22:12
4

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).

4

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 :)

3

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

<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  ]
  • 1
    What if both are set to on? – theonlygusti May 15 '17 at 19:36
  • 4
    @theonlygusti Both on means "include men and women"; the issue is surely when both are set to off, which means "return no results" – David Richerby May 15 '17 at 19:43
  • 1
    No, there's only three possible search combinations. Both off is either identical to both on, or it gives you no results. Just because there's four combinations doesn't mean that all four have a distinct (or useful) meaning. If I search for men and don't find what I was looking for, the next thing to do is search for women; if I search without a filter and find too many results, the next thing to do is limit the search, not use "both on". Even if it's possible to have a null value, your search options wouldn't be very useful - is off "not equal" or "indifferent"? You'd need tristate for each. – Luaan May 16 '17 at 8:20
  • 2
    Eugh, it's largely an opinion, but I find these kind of widgets extremely confusing: firstly, I have to click a few times before I realise they are tri-state; secondly, I have to interpret which icon corresponds to which state; and thirdly, the different possible combinations of two or more such boxes is really confusing. – IMSoP May 18 '17 at 17:45
  • yeah that is a drawback of using 3 states. – Jose Berengueres May 20 '17 at 6:13
1

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.
1

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.

1

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.

0

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

  • This has the disadvantage that the user can select "search for nothing at all" by leaving all the checkboxes blank. – David Richerby May 15 '17 at 19:45
  • True, but with with both or none selected, I would treat that as "all" in either case. What I don't like about the accepted answer is that it's hard to know how to select "all" – deworde May 15 '17 at 21:03
0

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.

0

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.

0

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.

0

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"

-1

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?
  • 5
    You've stumbled upon the UX site. Hence you got the down vote for only talking about programming. – Christian Strempfer May 15 '17 at 15:46

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.