What should be the default option of a required dropdown list?
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,
Something visually irritating,
<option value="">***CHOOSE ANIMAL***</option>?
Something which blends in but provides instruction,
<option value="">Select an Animal</option>?
Something else entirely?
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.
And of course, there's hundreds of scripts out there to do more sophisticated actions like remove the default option once something is selected.
+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.
As I've said in Michaels comments, I agree partly with his answer for trivial values, but not for anything that would make difference to the user. If the most common answer was already selected this'll save the user a great deal of time
Maybe I should emphasize more in my answer that there may be cases where forcing the user to choose brings in more accurate data. Users "breezing" through forms is a real phenomenon. However, how do you know that forcing such users to make a choice results in better accuracy than making the choice for them? Don't "breezing" users pick any old option just to move on? If users are skipping fields that are important to them, then I suspect your form has problems that won't be solved by forcing a selection.
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.
@Frings: I must be a little thick, but I don't follow the logic. How does having a valid default interfere with the user choosing a value, including any old value? The user has the additional choice of leaving that value be. They have more freedom.
You have to balance any time saved with a logical default with the increased chance of error. I'd argue in most cases when a field is required (because an answer truly is needed), the risk of error usually outweighs value of time saved. And keep in mind - this example is a _select where other choices are not visible without user input_.
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.
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).
There are many different kinds of "web forms"; your answer is valid for many of them, but things like search & data filters are generally forms (and defaults are almost always a good thing there). Even data collection/data entry forms can sometimes benefit from defaults (as in the country someone gave earlier).
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.
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?
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.
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 - 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.
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.
I would argue that blank values provide the *best* visual clue: an eye-catching block of emptiness (blending in possibly even less than something deliberately "visually irritating") *and* communicating "**no option selected**" very clearly. Even if you are right that it "may even imply to some users that the field is not required", all that needs to be done is make sure that blank values are not considered valid by the form.
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.
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.
I agree with this for trivial answers but not for important answers. Your second point resonates here - saving 79.1% of your users the time to do something but giving the most common as default is good practice
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"
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.
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.
Re: Boyung's data. The 30%+ figure is a helpful start, but not quite what we need. What about this: when there is no valid default, of the 100% of users that selected a value, about what percent only did so after they got a validation error? I understnad you're working from memory. A ballpark estimate could be useful.
@Charles Boyung: *"When a drop down is required and defaults to one of the valid options, more often than not, users ignore the dropdown entirely"* That is how you know your design is working. Don't bother the user with things they don't have to care about.
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:
- 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
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.
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.
I came across this information from UX Movement.com
Like other form elements, a select menu should always have a label next to it. However, you should also have a label inside the select menu that tells users what they’re selecting. The label should clearly and distinctly describe the group of options.
A generic label such as “Please Select” isn’t clear enough for accessibility users who use screen readers to fill out forms. Adding a label outside and inside the select menu allows all users to take action quicker without any confusion.
Overall, there may not be a 100% correct solution, only what allows the user to complete their task with the least amount of chance the user will have an error.
Welcome to the site, @Bob. +1 for citing a source. I've removed the question from the end of your post; if you have a question, please ask it as a separate question thread rather than including it in an answer. (This is a Q&A site, not a forum; discussions within a page don't work because answers change position as they're voted up the page.)
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.
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", …