Change input type of gender to radio buttons

[marcobiedermann]

I recommend to change the input type of the gender field from select-box to radio buttons for better UX. Only use select-box for eight or more options. When it comes to mobile accessibility it is more user friendly to use radio buttons.

[aschempp]

+1

[leofeyer]

Why is this better?

[aschempp]

http://baymard.com/blog/drop-down-usability

[lionel-m]

:+1:

[marcobiedermann]

When drop-down lists have less than 7 options they suffer from a lack of up-front information. The user has to click in order to see the available options. In these cases you are better off using radio buttons so your users immediately can scan how many options they have and what each of those options are

[leofeyer]

This looks odd in the back end. Also, how do you allow the user to reset their selection?

[marcobiedermann]

Set three options:

• not specified
• male
• female

[Aybee]

I think if you have a select which mostly gets no selection it's better to have a select with the blank option first. Else with radios I see a lot of information that I don't need.

Example: I see the label "gender" with blank option in a select, thats enough as I don't want to make a selection here. With radios I will see three radios with three labels and have to check which one is activated and have to check all labels.

Just another point of view.

[leofeyer]

We have discussed this issue on Mumble on May 21st and the majority of participants voted against changing the field type. Apparently, some need more than "male" and "female":

• Asexual
• Female to male trans man
• Female to male transgender man
• Female to male transsexual man
• F2M
• Gender neutral
• Hermaphrodite
• Intersex man
• Intersex person
• Intersex woman
• Male to female trans woman
• Male to female transgender woman
• Male to female transsexual woman
• Man
• M2F
• Polygender
• T* man
• T* woman
• Two* person
• Two-spirit person
• Woman

:)

Is this not something that you can change in the template?

[leofeyer]

Yes, it can be changed in the form_select.html5 template. Just count the options and if there are less than 5, output radio buttons instead of a select menu.

[aschempp]

I disagree. If I add new options to the tl_member dca, I can change the inputType. But the default has only 2 options, so radio is appropriate.

[leofeyer]

You can adjust the template to change the markup subject on the number of options :)

[marcobiedermann]

@leofeyer Hmm, yeah you can always change the templates but this should be the default in most cases.

[kikmedia]

Since we are living in a continuum of genders: May I suggest a continuous slider instead?

[Aybee]

@aschempp ... But the default has only 2 options, so radio is appropriate.

With only 2 radio options you can not reset it to unspecified. So I think 2 radio options is not appropriate.