What's the best and most intuitive way to have a user enter a height value in feet and inches into a web form?

Question

What's the best and most intuitive way to have a user enter a height value in feet and inches into a web form? The major choices seem to be:

1. Have one text field where they can enter values. This becomes a moderately complex parsing problem if more than one or two formats are allowed, but it's doable.
2. Have two text fields, one for feet and one for inches.
3. Have two dropdowns, one for feet and one for inches. This disallows fractional inch values, though, unless there are lots of options in the inches dropdown.

I suppose this question also concerns entering any data item that is often seen as multi-part (phone numbers).

Answer 1

How about two radio buttons (created with jQuery Aristo UI):

Answer 2

Option one is good if validation is possible. The only problem is that faced with a blank text field, users aren't sure how to format their data - they assume the machine only handles a finite range of formats, and they have to guess which. Not a good user experience.

The usual workaround is to suggest a potential value. Some are doing this with default text in the textbox, sometimes greyed out for best effect.

Another good idea is to parse the data the moment the field loses focus, replacing the user's text with your application's "interpretation" of what they mean. For instance, after entering the text "3.6", your app substitutes the text "3 feet 6 inches". That way, the user can be confident that there's no formatting issues. They can also spot any actual formatting issues earlier (the later the user is told of an error, the harder it is for them to remember the context and their decision, and so the greater the cognitive workload).

Answer 3

Option 2 is the easiest, they are just entering a maximum of two values in each window. Option 1 would be confusing and difficult to parse and option 3 would take longer to hover / scroll to the proper option.

Answer 4

I have approached this by taking the difficult initial parsing option (with lots of unit tests) in order for users to type in whatever format they want - but I had a very big range to cater for including negatives.

If the range is not too great the drop downs to the nearest inch might serve better as it stops the user from having to think about format to enter the freeform text eg with spaces hyphens fractions etc.