Combobox-clutter... how to solve?

Question

I'm involved in the fixing of an Online Dating Service.

They have a registration form (all fields required), and 11 fields out of 16 are comboboxes.

The fields are (in order, with comboboxes in emphasis):

• first name
• nickname
• gender (2 options: male or female)
• (looking for)type of relationship (3 options: get to know, adventure, serious)
• birthday (3 combos, Y/M/D)
• place of residence
• body shape (8 options, from thin to fit to obese)
• height (from 120 to 230, opening at 170)
• sport activities (4 options: professional, regular, sometimes, none)
• highest education (6 options from primary school to university, this is specific to country)
• smoking (4 options: yes, sometimes, only at parties, no)
• Mother tongue (100+ options, the only one with a default answer)
• Other languages spoken (a dropdown with checkboxes, looking like a combobox)
• Marital status (4 options: single, divorced, widowed, married, local custom)
• E-mail
• Password
• Password again

And the whole thing looks like this:

One by one, most of the select boxes are justifiable by the UX jargon:

• It's said birthday should be asked this way (according to Joe Leech on Smashing Magazine)
• It's said that when you have around 4-6 options, it should be a combobox (that was somewhere here, but also in the web form design book)

Answer 1

My suggestion would be to break that form up into multiple sections. Get the registration information first (Email, Password and maybe Name). Then let the user fill out and save profile information as they want.

Let's say you've broken it into a dozen "sub-forms" ... on some of those it might be easier to have radio-buttons rather than a combo box. Especially as more and more people use mobile devices combo boxes aren't always the easiest to navigate on a small touch screen. Especially if they are just a blank box and don't have a default or some guiding text in them to start with.

Finally, if you do break the form into smaller, bite sized chunks, make sure and give people some idea of their progress. Ideally they shouldn't have to put in EVERYTHING to get some basic browse results ... that is to say have the biggest deal info weighted at the "front" of the form. So maybe about halfway through a message like:

"You've entered enough information that we can show you some results, but if you fill out a little more about yourself we can tailor your search results to fit better. [Browse now] or [Complete Profile]"

Answer 2

Gender can be represented as 2 radio buttons - Male + Female.

The fact that you're using combo boxes leads me to believe that the user can pick only one value from the options. On a side note, it's a little interesting that "type of relationship" falls under this category. Why can't a user want more than one on that list? What if they want to be adventurous and are looking for a serious relationship? Anyway, I digress.

So if the number of options is 4 or less, you could use radio buttons because the user can pick only one option. Looks like that should replace most of the combo boxes in your case.

Also, dropdownlist/combobox involve 2 clicks (Click on the arrow to see the options and click again to select an option). With radio buttons on the other hand, all the options are laid out already and requires only one click for selection.

Mother tongue can be autocomplete search box with default text already filled in and could be slightly greyed out, hinting what the user can type in there. For e.g, "type your language here" or "English", etc.

As far as DOB is concerned, it's not uncommon for 3 different dropdownlists though. That's probably okay.

For the height, consider using a slider control that sets a range. Here's an example - http://jquerymobile.com/demos/1.2.0/docs/forms/slider/

Answer 3

I agree with @Girish about the radio-button preference.
Especially for gender, where the option labels are short words.
Another way to leverage the radio button advantage (explained by Girish) is to set the most common options as radios and a dropdown for the less common, like:
oUSA oCanada other[v]

But you could enhance the UI a lot by replacing the dropdowns by a control like jQueryUI Autocomplete.
When it's well configured it is a great help.
It would have to be tweaked (its js code) to make it open on focus, without requiring the user to do nothing else (To open it the user has to click the down arrow, many users would fail to notice this).
The autocomplete control can be operated the same as a dropdown, so it would not be an issue for the scared user.
More audacious users can simply give focus to the control, type a few characters, and tab to the next field once the desired option got selected (the selection can also be done using the up and down arrows).

Also, I'd set this form in the 2-column form layout, that is, labels to the left of their corresponding inputs, so the form doesn't get too tall = daunting, and also label text can be bigger.