Widget to use for "diversity" forms

Question

I've just filled in a form where I had to describe my race with one of three radio buttons

1. "White"
2. "Black"
3. "prefer not to say"

(sarcasm) Good thing I'm not Han Chinese then. (/sarcasm) The questions for gender identity and sexual orientation were not much better. It made me think about how one would do this right. I'll try and phrase this as a design question rather than an identity politics one.

I'm looking for a control/widget (for web forms) that meets the following requirements

• You can enter free-form text if you want to. It must be clear that you can do this and that this is an acceptable option, not an "if you really must".
• Most people will want to select from one of 2-10 predefined options. This should be made as easy as possible, ideally 1 or 2 clicks.
• For the majority who are fine with one of the defaults, I want to encourage them to select one of those rather than type their own thing that I have to normalise later (e.g. "straight", "hetero", "heterosexual" are all the same category).

On windows there's controls for this kind of thing, described for example on MSDN here - for example the drop-down

I also like the design approach of the date fields on the GWR trains page - when you click or tab into these form fields, a selector widget (e.g. calendar) pops up. But in both these cases, it's not clear at a glance that some standard options will pop up when you select the field and you could think that you have to type something, at which point people may wonder if straight or hetero is the "correct" thing to type before they even reach the field.

What kind of control should I use in this situation?

Answer 1

This should be made as easy as possible, ideally 1 or 2 clicks.

Quick side note: the number of clicks isn't necessarily any indication of 'easy to use'.

As for your question, I believe there is a fairly standard pattern for this already. It's typically a drop down or radio button list with one option being 'other'. For less than 10 options, I'd probably go with radios:

( ) Option 1
( ) Option 2
( ) Option 3
( ) Other

If they choose 'other' I'd then reveal a field to enter the text:

( ) Option 1
( ) Option 2
( ) Option 3
(•) Other
    Enter your option: [                          ]

As for encouraging them to pick a pre-defined one over the text one, that's a bit trickier. I'd suggest you likely can't from a UI standpoint. The key will be more of a content challenge...making sure the defaults cover most of the bases.

If you have to normalize the data, then I'd probably argue you not allow free form text to begin with. That said, identifying one's race and/or sexual identity isn't really data that's easily normalized to begin with, so may be futile to even try.