Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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).

share|improve this question
1  
About entering multipart numbers: ux.stackexchange.com/questions/7100/… –  Inca Aug 20 '11 at 8:50
1  
What about a single drop-down box, each row containing a height value: 5'0", 5'1", 5'2", etc.? I feel like I've seen that more frequently than #3. –  benzado Aug 23 '11 at 21:08
    
Implementation note: html does have support for a "range" input type, which does neat things like adding up/down buttons, allowing text input, and supporting restrictions on min/max values. On older browsers, it is treated as a text box. –  Brian Jul 9 '13 at 17:07

5 Answers 5

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

enter image description here

Update: Given that height is actually a continuous line I think the following is an improvement and takes on board the comments below that it should be from 0-11 and that you would say 6' not 6' 0":

enter image description here

I've created a jsFiddle for this using the jQuery UI Slider.

share|improve this answer
1  
+1 neat idea. While it takes up more space than a drop down, it's quite clear to use. –  Janel Aug 21 '11 at 19:44
3  
Perhaps with 0-11 inches instead of 1-12? –  Mr. Jefferson Jul 8 '13 at 15:53
    
@Mr.Jefferson mighty good point, I'll go and fix that :) –  icc97 Jul 8 '13 at 16:12
2  
@Mr.Jefferson I wonder if the zero is needed? How many people refer to themselves as 6ft 0"? So including it potentially conflicts with the user's mental model. On the other hand not to having may be confusing. User testing would be interesting. Thoughts? –  uxzapper Jul 9 '13 at 0:06
1  
Love the idea, but may I suggest a touch of colour to seperate the 4-inch area from the 5-inch area? Think of us poor European continentals, who always tend to divde by 10 instead of 12. –  Ideogram 2 days ago

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).

share|improve this answer
2  
+1. Also see Forgiving Format at UI Patterns. –  Vitaly Mijiritsky Aug 20 '11 at 8:36
    
Nice examples in that pattern page, too. –  Jimmy Breck-McKye Aug 20 '11 at 11:58

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.

share|improve this answer

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.

share|improve this answer
    
+1 for focusing on the mental load on the user. I feel the "in what format do I enter my data?" obstacle is too great. The fact that code can parse the input doesn't stop the user from thinking about it. Free entry requires a lot of user thought that shouldn't occur when answering the target question of "how tall am I?". –  uxzapper Jul 9 '13 at 1:13

i faced the same situation and i ended-up using php-generated dropdown... here's my solution:

<select name="height" id="height">
   <?php
        for($foot=3;$foot<=7;$foot++){
            for($inches=0;$inches<=11;$inches++){
                if($inches==0){
                   echo "<option value='$foot feet'> $foot feet </option>"; 
                 }else{
                    echo "<option value='$foot feet $inches inches'> $foot feet $inches inches </option>";
                 }
            }
        }
   ?>
</select>
share|improve this answer
    
Hi Mhk. Unfortunately this is a UX site not a coding / dev site, so the audience of this site are also primarily not developers. Posting answers that are almost entirely code isn't really suited to such a site because we shouldn't expect such answers to be understood by this sites users. UX is concerned with what to do; for the how to implement it people would go elsewhere. Can you describe what this code actually generates, how it displays and how users interact with it? That's more how the answers on this site are structured. –  JonW Jul 8 '13 at 9:46
    
@JonW GOT it... (first time user :-( ) –  mhk Jul 8 '13 at 9:54
    
for less code and hassle and more controlled approch use the basic HTML dropdown. the options/content of dropdown are to be generated by javascript or any service side language, like above code is php. it generates drop down from 3 feet to 8 feet with increment of 1 inch in between. The interfaces with radio-buttons or buttons separately for feet and inches and along covering friction of values between them is quite tedious task... yes my vote is for controlled dropdown... –  mhk Jul 8 '13 at 10:07

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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