5 ms·

Can anybody tell me how legit the placeholders recommendation is? I understand it's not accessible, but on a limited viewport, having the text tell the user wha

Can anybody tell me how legit the placeholders recommendation is? I understand it's not accessible, but on a limited viewport, having the text tell the user what you want seems like a no-brainer. And I see it a lot. Isn't there some other way to provide accessibility?

grahamel 10y ago
it's not just accessibility it's also keeping the form usable. As the placeholder text goes when you type in the input you loose the reference to that input, so the only way to check if you're typing in the right box is to clear the input. See https://www.nngroup.com/articles/form-design-placeholders/ https://www.nngroup.com/articles/form-design-placeholders/
cdubzzz 10y ago
I suspect that the correct thing to do for usability in those cases is use a label for the field with visibility: hidden.
firasd 10y ago
It's useful from a minimal design perspective but I've started to avoid using placeholders after seeing this article[1], instead trying to put the field name, example text or caption, etc outside the input. [1] https://www.nngroup.com/articles/form-design-placeholders/ https://www.nngroup.com/articles/form-design-placeholders/
dizzystar 10y ago
The recommendation is totally legit, even ignoring accessibility concerns (which are true). I can't tell you how many times I've tabbed onto the next field and had to tab off just to see the value I was supposed to be putting in. It gets worse when this is in JS and for whatever reason, the field name doesn't reappear, or better yet, when the suggestion doesn't disappear and I have to manually erase it. It gets even more confusing when there is a suggested format, like date, you have to manually enter. Was it mm/dd/yy or mm/dd/yyyy? All of that should be above the form input. Using nothing but place holders is a serious pet peeve of mine on all levels. Please don't, just don't do it. I don't understand what benefit is has. I suppose it works fine if you have users that only use mouse clicks, but it is mayhem for people who use key commands.
- DanielBMarkham 10y ago
  Wouldn't the type attribute on the input indicate to the phone/browser/etc what's to be expected? Perhaps with a title attribute added? I'm okay with it, and I'll do it from now on. Just seems kinda weird to start displaying things based on accessibility. I thought that all played out behind the scenes (in things like the alt attr for images)
- garaetjjte 10y ago
  > I can't tell you how many times I've tabbed onto the next field and had to tab off just to see the value I was supposed to be putting in. Placeholders don't disappear if you just focus input, only when you type first character.
  - rpedela 10y ago
    Placeholders disappear in IE.
    - talmand 10y ago
      I think we all know the root of that problem.
      - strictnein 10y ago
        In this case IE actually follows the specification: https://www.w3.org/TR/html5/forms.html#the-placeholder-attribute https://www.w3.org/TR/html5/forms.html#the-placeholder-attri... > "User agents should present this hint to the user, after having stripped line breaks from it, when the element's value is the empty string and the control is not focused"
        talmand 10y ago
        Then the specification is wrong, needs to be updated.
        10y ago
noxToken 10y ago
How limited is your viewport? I still have an old HTC Incredible 2 at home that I use for testing. Though not the smallest, it's only 320x533 (portrait). I'm used to a much larger viewport, and viewing forms with those dimensions are fine. Just ensure that your form fields aren't microscopic. Using the placeholder for explanation also removes the explanations when focusing on the field. A label is permanent.
blowski 10y ago
For usability and accessibility, yes, it's best to put visible labels alongside the input. See http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php http://www.uxmatters.com/mt/archives/2006/07/label-placement.... That said, designers often dislike labels. Float labels are about the best compromise I've seen - https://css-tricks.com/float-labels-css/ https://css-tricks.com/float-labels-css/. You can see them in action on Digital Ocean.
- realityking 10y ago
  Accessibility is not just about screen readers. Consider, just as an example, color blindness. Choosing the right set of colors to make your site accessible to color blind people is hugely important but it will definitely change the look of your site. Probably the most common issue is to use green and red colors for some kind of status without also using text and/or symbols.
  - blowski 10y ago
    Yes, I agree completely. Other groups include those with learning difficulties, restricted motor skills and partial-sight. It's a big issue to fit into a small HN comment.
marcosdumay 10y ago
If your viewport can't afford two lines for the label + input, you may need to work on some really different UI.
- firasd 10y ago
  I think it can definitely be a challenge sometimes: go to youtube.com and look at their search input (says "Search" in a placeholder). There's no way they can put the label above the search box, it would almost double the size of their header. So they'd have to put the Search label to the left or something.
  - fdgdasfadsf 10y ago
    Search boxes are a special case. There is one input and the form submit button is usually adjacent to the input and clearly marked with a search glyph or the word search. One a search form has multiple fields it tends to use the labels e.g. google's advanced search forms.
jacobsenscott 10y ago
If it is not brain dead obvious (to others, not the designer) what needs to be entered into each field without any prompting then you need labels. Do this: Remove all the placeholders. Now ask someone else to fill in the form. If they don't know what to do you need labels, not placeholders.

grahamel 10y ago

it's not just accessibility it's also keeping the form usable. As the placeholder text goes when you type in the input you loose the reference to that input, so the only way to check if you're typing in the right box is to clear the input. See https://www.nngroup.com/articles/form-design-placeholders/ https://www.nngroup.com/articles/form-design-placeholders/

cdubzzz 10y ago

I suspect that the correct thing to do for usability in those cases is use a label for the field with visibility: hidden.

firasd 10y ago

It's useful from a minimal design perspective but I've started to avoid using placeholders after seeing this article[1], instead trying to put the field name, example text or caption, etc outside the input. [1] https://www.nngroup.com/articles/form-design-placeholders/ https://www.nngroup.com/articles/form-design-placeholders/

dizzystar 10y ago

The recommendation is totally legit, even ignoring accessibility concerns (which are true). I can't tell you how many times I've tabbed onto the next field and had to tab off just to see the value I was supposed to be putting in. It gets worse when this is in JS and for whatever reason, the field name doesn't reappear, or better yet, when the suggestion doesn't disappear and I have to manually erase it. It gets even more confusing when there is a suggested format, like date, you have to manually enter. Was it mm/dd/yy or mm/dd/yyyy? All of that should be above the form input. Using nothing but place holders is a serious pet peeve of mine on all levels. Please don't, just don't do it. I don't understand what benefit is has. I suppose it works fine if you have users that only use mouse clicks, but it is mayhem for people who use key commands.

DanielBMarkham 10y ago
Wouldn't the type attribute on the input indicate to the phone/browser/etc what's to be expected? Perhaps with a title attribute added? I'm okay with it, and I'll do it from now on. Just seems kinda weird to start displaying things based on accessibility. I thought that all played out behind the scenes (in things like the alt attr for images)
garaetjjte 10y ago
> I can't tell you how many times I've tabbed onto the next field and had to tab off just to see the value I was supposed to be putting in. Placeholders don't disappear if you just focus input, only when you type first character.
- rpedela 10y ago
  Placeholders disappear in IE.
  - talmand 10y ago
    I think we all know the root of that problem.
    - strictnein 10y ago
      In this case IE actually follows the specification: https://www.w3.org/TR/html5/forms.html#the-placeholder-attribute https://www.w3.org/TR/html5/forms.html#the-placeholder-attri... > "User agents should present this hint to the user, after having stripped line breaks from it, when the element's value is the empty string and the control is not focused"
      - talmand 10y ago
        Then the specification is wrong, needs to be updated.
        10y ago

noxToken 10y ago

How limited is your viewport? I still have an old HTC Incredible 2 at home that I use for testing. Though not the smallest, it's only 320x533 (portrait). I'm used to a much larger viewport, and viewing forms with those dimensions are fine. Just ensure that your form fields aren't microscopic. Using the placeholder for explanation also removes the explanations when focusing on the field. A label is permanent.

blowski 10y ago

For usability and accessibility, yes, it's best to put visible labels alongside the input. See http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php http://www.uxmatters.com/mt/archives/2006/07/label-placement.... That said, designers often dislike labels. Float labels are about the best compromise I've seen - https://css-tricks.com/float-labels-css/ https://css-tricks.com/float-labels-css/. You can see them in action on Digital Ocean.

realityking 10y ago
Accessibility is not just about screen readers. Consider, just as an example, color blindness. Choosing the right set of colors to make your site accessible to color blind people is hugely important but it will definitely change the look of your site. Probably the most common issue is to use green and red colors for some kind of status without also using text and/or symbols.
- blowski 10y ago
  Yes, I agree completely. Other groups include those with learning difficulties, restricted motor skills and partial-sight. It's a big issue to fit into a small HN comment.

marcosdumay 10y ago

If your viewport can't afford two lines for the label + input, you may need to work on some really different UI.

firasd 10y ago
I think it can definitely be a challenge sometimes: go to youtube.com and look at their search input (says "Search" in a placeholder). There's no way they can put the label above the search box, it would almost double the size of their header. So they'd have to put the Search label to the left or something.
- fdgdasfadsf 10y ago
  Search boxes are a special case. There is one input and the form submit button is usually adjacent to the input and clearly marked with a search glyph or the word search. One a search form has multiple fields it tends to use the labels e.g. google's advanced search forms.

jacobsenscott 10y ago

If it is not brain dead obvious (to others, not the designer) what needs to be entered into each field without any prompting then you need labels. Do this: Remove all the placeholders. Now ask someone else to fill in the form. If they don't know what to do you need labels, not placeholders.