58

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?

Improve this question

7 Answers 7

Reset to default
58

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.

Improve this answer
11
  • 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, 2011 at 5:41
  • 5
    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, 2011 at 12:28
  • 5
    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, 2011 at 23:47
  • 2
    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, 2012 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, 2013 at 1:22
14

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.

Improve this answer
1
  • 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, 2012 at 18:04
8

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.

Improve this answer
7
  • 7
    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, 2011 at 14:48
  • 4
    @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, 2011 at 14:50
  • 2
    because it says "(required)" just before it? (as in the example by the OP).
    – peterchen
    Mar 15, 2011 at 14:57
  • 4
    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, 2011 at 18:32
  • 1
    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.
    – A.M.
    Aug 7, 2013 at 15:06
5

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.

Improve this answer
9
  • 7
    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, 2011 at 1:59
  • 3
    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, 2011 at 11:33
  • 1
    @Boyung: I happened to be looking at a IE, so there’re all the dropdowns in the File – Save As, both dropdowns in File – Page Setup, the View – Web Page Privacy Policy – Show dropdown, and the Favorites – Add to Favorites – Create In dropdown. Not finding any true dropdown lists (not to be confused with combo boxes) that lack a valid default. But data can trump standards so from your observations, when your dropdown defaults to a valid value, what percent of user leave it as an inaccurate value? When you force users to select a valid value, what percent select an inaccurate value?
    – Michael Zuschlag
    Mar 16, 2011 at 11:51
  • 3
    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, 2011 at 13:03
  • 6
    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, 2012 at 18:21
1

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
Improve this answer
4
  • 4
    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, 2011 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, 2011 at 5:49
  • 3
    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, 2011 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, 2011 at 7:27
1

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.

Improve this answer
1
  • 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.)
    – Graham Herrli
    Feb 11, 2016 at 23:43
0

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.

Improve this answer
2
  • 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, 2011 at 19:22
  • You're right, I'll edit the answer with an alternative.
    – jpsstavares
    Mar 16, 2011 at 9:59

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.