Dropdown: placeholder vs. blank

Question

Which is better for "non selected" state?

A) Placeholder

On usability tests, with this options people are omitting this field. They seem to think that it's not required or it's already chosen.

B) Blank

I didn't have usability tests on this yet. The white empty space seems to cause the urgent need to fill it in. What are the actual disadvantages of this?

Other considerations

• There are also other option for placeholder, for example "Select...", "---", "--- Select ---"
• Maybe the text color of placeholder matters? It can't be too dark so that you can see that the field is empty?

Answer 1

I believe NNGroup has one article mentioning some different scenarios for placeholder text in form fields. What's good is that the content from NNGroup is also based on user research and usability testing. One caveat though is that the research seem to mainly mention text fields and not dropdowns, so I am a bit unsure on how well the research will apply to your scenario. This is the closest kind of research I've managed to find about this. To be 100% sure I do recommend to perform some very light-weight usability testing and see if your design works or not.

Here are 7 reasons, taken from the article above, why placeholders as labels should not be used when replacing field labels:

1. Disappearing placeholder text strains users’ short-term memory.
2. Without labels, users cannot check their work before submitting a form.
3. When error messages occur, people don’t know how to fix the problem.
4. Placeholder text that disappears when the cursor is placed in a form field is irritating for users navigating with the keyboard.
5. Fields with stuff in them are less noticeable.
6. Users may mistake a placeholder for data that was automatically filled in.
7. Occasionally users have to delete placeholder text manually.

Here is what the same article has to say about your specific example, where placeholder text is used in addition to labels.

Placeholder Text in Addition to Labels

Using placeholder text in combination with form labels is a step in the right direction. Labels outside the form fields make the essential information visible at all times, while placeholder text inside form fields is reserved for supplementary information. However, even when using labels, placing important hints or instructions within a form field can still cause the 7 issues mentioned above, albeit with less severity. If some of the fields require an extra description that is essential to completing the form correctly, it’s best to place that text outside the field so that it is always visible.

One solution to this problem could instead be to have text in close proximity to the field:

Answer 2

Font color and style can distinguish a placeholder or help text within an empty box. You can make font color lighter and use Italics to make it distinguishable from actual value. This is a standard guideline and user won't get confused with this.

See Windows desktop guidelines for User Interface Text:

https://msdn.microsoft.com/en-us/library/windows/desktop/dn742478.aspx

Answer 3

Dropdowns should always have a default value as opposed of a placeholder. It is up to you to decide what that default is - an empty string, or some label asking the user to select another value.

Answer 4

Conclusion after tests

After trying different options mentioned in the question and trying them during usability tests, I think the best tradeoff is to use very light placeholder with "..." at the and with super short call to action text inside like "Please select..."

Why?

• Very light text still make you feel that the field is empty, but is more visually pleasing than empty dropdown field. It's not really super important that the contrast is accessible, because the text inside is not crucial to read, better make it too light than too dark.
• Text needs to be short so that the field looks empty
• The "..." ellipsis at the end adds to the feeling that the dropdown is obligatory
• Text should start with a word that calls for an action, like "Choose..."
• Don't add hyphens at as the prefix for placeholder because it communicates nothing

Placeholder not listed as an option

Don't add placeholder as one of the possible select options

Answer 5

Seeing you put a "--Select--" item in the combobox suggests that there isn't any default value for the field, however the field itself is compulsory.

I came up with the following idea. What if you stay with putting the "--Select--" item shown in less contrasting colour and "disabled" attribute (hence not possible to be selected), but upon selection of another item, this "--Select--" item would disappear? The only possibility to keep this item would be to open the combobox using the "expand" button and close it the same way without making any selection.

Don't forget that is helps the user enormously to gently indicate that certain filed is compulsory and not yet filled in (either real-time form validation as the user scrolls through the form or validation before submitting).