7

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.

enter image description here

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?

Dropdown with blank state

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?
  • Neither. Your drop down should have a valid default selected. Don't Force the user into an error state! – Evil Closet Monkey Dec 8 '17 at 0:38
  • 5
  • 2
    @EvilClosetMonkey Google Translate interpreted the name of this field as "The Payee's Account". That doesn't sound like a field that could have a valid default... – maxathousand Dec 8 '17 at 21:58
  • 1
    BTW, placeholders aside, I don't see any indication of the fields being required in that screenshot, so if I didn't care to enter Konto odbiorcy EUR, there's nothing telling me I have to until I see an error. – maxathousand Dec 8 '17 at 21:58
  • 1
    @EvilClosetMonkey I disagree that a dropdown should always have a default value selected. Default values are not always appropriate, for example: a. When there is no 'most appropriate' selection, and b. When the negative consequences of the user accepting the default when it is not the correct choice may outweigh the benefit of saving them effort making a selection. Sometimes it is more important that the user makes a conscious selection than gets through the input as fast as possible. – kati Jun 13 '18 at 13:47
4

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: Placeholder next to label and form field

  • 2
    Actually, this doesn't address the issue. The article talks about text fields, the question is about drop down boxes. Different beasts. – Evil Closet Monkey Dec 8 '17 at 0:37
  • Thanks! It's a valid point. I have updated to clarify my answer. – Andreas Johansson Dec 8 '17 at 7:01
  • This is a different thing. This is a great research for text inputs but won't apply to my question. – Maciej Sawicki Dec 9 '17 at 9:33
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

enter image description here

  • Never heard of a guideline that placeholder should be italics. I also never encountered such thing. Can you point mi to examples or the source of this guideline – Maciej Sawicki Dec 11 '17 at 7:52
1

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.

  • 1
    My question was if blank is better than a label, so you didn't answer this part of the question. I would still call the "Please select..." Label a placeholder. Dropdowns should have default value only if I'm sure that 90 percent of users would choose this value, for example "Country: Poland". – Maciej Sawicki Dec 11 '17 at 7:48
  • 1
    @VladimirGeorgiev - I don't agree with you that dropdown should always have a default value. Which option would you suggest as a default for a "Gender" selection? – Mike Mar 16 '18 at 10:41
  • "Please select..." or an empty value is also considered to be a default. My point was that if there is no selected value in a DD, the web browser would normally select the first item by default, that's why you should plan your code so that you have some default value selected, even in the case when it is the empty string or a notice label like "Please select..." – Vladimir Georgiev Mar 19 '18 at 9:49
  • This leads to some problems with multiselects on mobile devices. There I would have to deselect the default ("Please select", empty string or whatever) manually after selecting other options. – mosquito87 May 24 '18 at 8:27
1

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

enter image description here

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

enter image description here

0

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

  • After seeing your answer I added an animated GIF showing that placeholder shouldn't be one of possible options to select from. – Maciej Sawicki Mar 16 '18 at 11:18
  • @MaciejSawicki - that's exactly what I meant. Powodzenia! – Mike Mar 16 '18 at 11:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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