2

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:

enter image description here

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)
4
  • 3
    Just because someone said you should do birthday this way doesn't make it true. I much prefer typing "11/29/1988" or something than having to click-select three times. Oct 24, 2012 at 18:31
  • What exactly is your question? That you don't like having many comboboxes and you want to justify them all? Oct 24, 2012 at 18:49
  • @JimmyBreck-McKye: the registration rate is lower than expected and normal, and I suspect the fact that comboboxes are kind of... "mistery meat" widgets (you don't know what are your options until you open them) and are generally considered "hard" (in the classic Wroblewski book) probably because of their visibility issues, I'm looking for alternatives, or someone reassuring that comboboxes are fine and the problems are somewhere else
    – Aadaam
    Oct 24, 2012 at 19:13
  • and on a sidenote, ye, I'm aware that it's a lot of required fields but originally we started with about 25 required and this was the level where we could minimize it to... the owner is unwilling to loose any more fields
    – Aadaam
    Oct 24, 2012 at 19:21

3 Answers 3

3

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]"

2
  • Oh, it's the second form out of 3... you can search the site, but in order to keep the site "serious" they require all these fields to be able to contact... the optionals are on another form. In fact, this morning I've got a mail because I've written "I'm just testing your registration form for you" in the about me section and got my account temporarily disabled...
    – Aadaam
    Oct 24, 2012 at 18:22
  • 1
    They can still be required and divided into sections (not pagination, all in the same page but separated graphically). It might sound simple but I've tested it and it makes a huge difference, people respond way better to staggered forms. And great point with the radios too.
    – Yisela
    Oct 30, 2012 at 3:21
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/

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.