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.

Given that there is no logically default animal from the list of animals below, what should be the "Default Value" below, according to best practice?

<label for="animal">Animal (required):</label>
<select name="animal">
  <option value="">Default Value</option>
  <option value="0">Cat</option>
  <option value="1">Dog</option>
  <option value="2">Horse</option>
  <option value="3">Pig</option>
  <option value="4">Sheep</option>
</select>

A blank value, <option value=""></option>?

Something visually irritating, <option value="">***CHOOSE ANIMAL***</option>?

Something which blends in but provides instruction, <option value="">Select an Animal</option>?

Something else entirely?

share|improve this question
add comment

6 Answers 6

The default should be a legitimate value. This is the practice in nearly all desktop GUIs, and it has worked fine for decades. Windows 7 UX Interaction Guidelines specifically say to “Select the safest (to prevent loss of data or system access) and most secure option by default. If safety and security aren’t factors, select the most likely or convenient option.... Don’t use prompts [inside the dropdown list] just to direct users to select something from the list" (p88-89).

I see no reason that a web app should be any different. Defaulting to a non-value is a kludge that goes against the design and intended implementation of dropdown lists, a pretty good indication that it represents misuse.

The default should be:

  • Firstly, a non-dangerous value, which is least likely to cause irrecoverable lost or damage to the user or his/her property. If this dropdown designates the animal to deliver a message to the user, the default should not be Hungry Tiger.

  • Secondly, the most commonly chosen value. Even if just 20.1% of your users choose “Dog,” that is still 20.1% of your users that won’t have to make a couple clicks, with no cost to the remaining 79.9% of your users.

  • Thirdly, the best example of the set. The dropdown default serves to illustrate the kinds of values the user can choose. In your case, it appears to be the category of “farm animals,” so I’d be inclined to go with “Horse.” “Dog,” in contrast, may suggest “pet” more than “farm animal.”

I don’t see any point in making the default an instruction. The fact there is drop down list makes it pretty obvious users need to select a value. An example value as the default is more informative.

I suspect that many web designers think you get more accurate data if you force the user to explicitly choose an option. While there may be situations where this is the case, I haven’t seen any evidence that of it. I suspect that defaulting to a legitimate value usually makes it more likely you get accurate data. By freeing some of your users from selecting the value you avoid the possible slips the users might make, or, more likely on a web form, the selection of any old value just to satisfy the required input.

share|improve this answer
4  
Sorry, but I've done several user tests that contradict your suspicions completely. When a drop down is required and defaults to one of the valid options, more often than not, users ignore the dropdown entirely. And please show me a desktop UI where this is the common practice. I don't seem to see that happening anywhere when I fill out forms on a desktop app. –  Charles Boyung Mar 16 '11 at 1:59
1  
An example of this would be if your website or program was mostly UK targeted then putting UK in the country drop down would be acceptable - not for any important fields however "I want to give my children away to a stranger" –  Dan Hanly Mar 16 '11 at 11:33
2  
I'd have to dig up the exact numbers, but well over 30% of the users never expanded the drop down if it had a value selected (and it wasn't something like country, where defaulting to the US is probably going to be correct most of the time). When there was no default and it was required, the user selected a value every single time. –  Charles Boyung Mar 16 '11 at 13:03
1  
And your examples in IE are flawed. Options like file type in the Save As dialog are completely different than when someone is filling out a form to collect data. –  Charles Boyung Mar 16 '11 at 13:04
3  
Michael's answer and example make sense in the "performing an action" process. Charles' comment and example make sense in the "collecting data" process. Two entirely different beasts. –  DA01 May 25 '12 at 18:21
show 4 more comments

I use a visual hint that the field requires input. Something like a red border with a red exclamation mark with a tooltip when you hover the mouse.

-Edit- As Peter points out in a comment this really isn't a good idea because this will tell the user he has done something wrong before he has done anything. I guess another visual clue like asterisk or something to indicate the field is required, even with a blank default option, is more suitable.

share|improve this answer
3  
This is a good way to indicate that something is wrong after filling it it. But when you show it immediately you're effectively telling the user he's made a mistake even before he had a chance to do something. Not very nice. However, some gentle indication on all required items might be OK. Personally, I don't mind an empty drop-down as an indication of a non-selection. When "empty" is a valid option, I would try to come up with a good text for that and make it an entry in the drop-down. E.g., “(None)”, “All”, “Any“, "Whatever", … –  Peter Frings Mar 15 '11 at 19:22
    
You're right, I'll edit the answer with an alternative. –  jpsstavares Mar 16 '11 at 9:59
add comment

I actually think a dropdown-selection is bad usage anyway. This question points at one of the problems, that it is not that clear what to do with it. Partly a problem of how browsers display such a list, but mostly your problem according to your users.

Better to replace it with:

  • a free-text box powered by javascript search through allowed values, like when adding tags;
  • for less options: radio (or radio-a-like) buttons
  • button-boxes you can enable/disable, for choices that are not that black/white; "your favorite animal" could be multiple.
  • just free-text completely, if you find out that it is not that mandatory after all
share|improve this answer
2  
Except that your first option doesn't work without javascript, your second option doesn't work when there are numerous choices, your third option makes absolutely no sense when only a single answer is allowed (which is clearly a restriction if you are using a dropdown to begin with) and your fourth option also cannot apply - you wouldn't use a dropdown if you didn't have limited choices. Yeah, except for all of those problems, your options work. –  Charles Boyung Mar 16 '11 at 1:55
1  
I don't disagree with Lode's idea. It's worth considering whether dropdown is the correct presentation. If your dropdown has, say, 6 or less options radio buttons may make more sense depending on the rest of the elements of your form. –  Voodoo Mar 16 '11 at 5:49
2  
A drop-down has its merits. But replacing it by radio boxes doesn't solve the original question: if there is no default option, you'd have to leave them all unchecked, which is also kind of odd for a set of radio buttons. –  Peter Frings Mar 16 '11 at 12:34
    
I agree @Charles. My answer is not intended as an answer that much, more as inspiration to search for another solution all together. –  Lode Mar 17 '11 at 7:27
add comment

I respectfully disagree with Michael's answer. I can't speak to desktop GUIs, but in web forms you want to avoid having a default unless you believe a large portion of your user's (maybe 90%+) will select that value. Particularly if it's a required field.

Why? Because you're likely to introduce errors because people breeze through forms quickly online - don't assume they will take the time to parse through all the choices and may blithely skip by something that already has a value. If it's a required value, I'm guessing that it's important that we differentiate between what they intended to enter and what the default was.

In your particular case, I'd suggest using the middle option - <option value="">Select...</option> or something similar. No need to say "Select an Animal" when your label is right there.

Then you MUST validate via javascript, etc. so that the form isn't submitted if the value is blank. This avoids getting any kludgy results and gives feedback to the user about what they missed.

And of course, there's hundreds of scripts out there to do more sophisticated actions like remove the default option once something is selected.

share|improve this answer
1  
+1 as I too disagree with Michael. It's very common that if the default value is valid it will be something the user didn't intend to select, due to not paying attention. –  jameswanless Mar 16 '11 at 5:41
3  
If users pick any old option just to move on, then that's their choice. Putting up a default when there is none is not. –  Peter Frings Mar 16 '11 at 12:28
2  
Let's say in this particular example we're building an online veterinary appointment system. We want to know what animal they're bringing in. We make it required because only certain vets see certain type of animals. But let's say 60% of the appts are for dogs. You could argue it makes sense to set that as the default. But if, as we know from experience, people aren't careful when interacting with web forms we may end up thinking Joe is going to show up with a dog and he has a horse. –  Voodoo Mar 16 '11 at 23:47
1  
Fully agree with @Voodoo. In cases like IE and Word, please use a default value for file type when I save, cause in general, I couldn't care less as long as I can load my file later. But in web forms when entering data, I would much rather get an error if I missed a field, than silently having a default value set for me (which most likely is wrong). –  Svish Feb 28 '12 at 15:50
3  
Just a note, you also MUST validate with a server-side script in addition to JavaScript, as JavaScript can be manipulated or bypassed. I'm sure this was included in your 'etc.', but I just thought it should be made explicit. –  Virtuosi Media Jan 19 '13 at 1:22
show 5 more comments

This is a question I've never found the 'right' answer to. Leaving it blank seems as valid as making it a command 'select one'. In the end, it may not be a major issue.

I do think it does make sense to not default it to a valid selection, though.

If I had to come up with arguments for both options:

  • blank = easy to scan the form to see what you haven't filled out.
  • command = clearly indicates that you need to do something.

Based on that, perhaps a hybrid solution where you have the command as the default, but visually gray it out via JavaScript/CSS. That allows it to be visibly different than a selected item, but not left blank.

share|improve this answer
    
Using a command and then a simple css class to make it grayed out satisfies my need perfectly, so thank you! I do agree with @Lode that select controls are often used unnecessarily. One drawback is that you have to device switch with a select. Often times it is preferable to provide the user with limited options using a different control, but does that not still leave you with the same issue? –  ph33nyx May 25 '12 at 18:04
add comment

A blank value really isn't a good idea - it doesn't really provide a visual clue, and may even imply to some users that the field is not required. Saying something like "Select an Animal" along with the same type of visual cue that you use for other required fields (the most common being the red asterisk) should help convey the point.

share|improve this answer
5  
The visual clue is "the field is empty and needs to be filled" - It's not the best option, but not that bad IMO. –  peterchen Mar 15 '11 at 14:48
2  
@peterchen - that's not a visual clue. Sometimes an empty dropdown is completely valid. How do you know the difference between "empty is okay" and "empty requires a selection"? That's why having an empty value for a dropdown is not a good idea. –  Charles Boyung Mar 15 '11 at 14:50
1  
because it says "(required)" just before it? (as in the example by the OP). –  peterchen Mar 15 '11 at 14:57
3  
An empty item in a dropdown may look like a bug. Even if it's the top-most item it still looks like something is missing. –  neoneye Mar 15 '11 at 18:32
    
@neoneye - good point –  Charles Boyung Mar 15 '11 at 18:34
show 2 more comments

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.