Here is a step-by-step set of examples, with screenshots, of why using placeholders (we don’t care if they are HTML5 or JS or fancy CSS) instead of labels outside inputs is retardation and hateses the users, hateses them.
My current company is doing this right now, with e-commerce. Joy. I’m not allowed to change it. More joy. I should just shoot myself now.
Hell, users will doubt and wonder just based on the size of the input: if it’s that big, I might have misread the label when I put in only 3 letters… maybe I should re-read it or think about it some more… and how do I fill out “Prefix:”? What’s a prefix? Something on my name??
Luckily this craptastic trend in placeholders-make-damn-sexy-labels can help increase form abandonment, which is a good thing: anyone who cares more about graphics in their forms than that they work right for our Lowest Common Denominator (who we build forms for) probably didn’t want us retards filling them out anyways.
Yes, you see a lot or morons misusing place-holders instead of an actual LABEL they have two completely different purposes. Totally brilliant (not) once you’ve started typing input into the box (using place-holder but no LABEL) you don’t have a clue what the INPUT box was supposed to be for in the first place. Hmm, leaving you to delete what you’ve just entered to try and recall if blank input box two was anything to do with your password or not.
Ah, but you DO. Simply read the placeholder before focusing on it. And then remember it.
If you can’t remember 10 or so inputs, there must be something wrong with you. You probably shouldn’t be using the internets; they’re clearly too hard for you. And my grandma. And the average Christmas shopper. And everyone else.
Developers are smart, though, and they don’t see why people can’t just remember what the input was for. I mean, the label— placeholder was there just a second ago. Are users goldfish?
I have the same problem with forgetting what the input was for, or doubting that I’m entering the right info (as the only clue was in the placeholder). The only partial solution I’ve found is to insert pins into my voodoo doll and wish that bad luck befall the designer. (It makes me feel better, but still doesn’t help me remember what the placeholder said, unfortunately. )
A mystery prize will be given out to the person who can figure-out what the three placeholders said; the text in pink is the users input response… >;-)
Ahem. I am a designer and would never use a placeholder as a label. It doesn’t even make sense to me ( tho I have had clients who have thought this way). perhaps if the UA used"example:" as a default leader the role of placeholder might be better understood.
No, not really when JavaScript is turned on, once I have entered input you’ll get the same as in my NetHack Shopping demo post #5 no visual indication of what the input box was for…
I think the whole point is that, there being no label while you are typing, doubt can arise about what the input was for, if you’re typing the right things, etc. The only way to find out is to abort, which isn’t great.
Though [label] didn’t return in my browser after data was entered; the label should be visible (basically at all times) so long as the input box is in a functional/editable state (or the page is being displayed).
Basically, users will skim over forms they have filled in, before the dreaded hitting of the submit button. We do it with paper forms too, but we can actually measure real living human beings doing it on web forms because of the eyetracking usability research, which for some reason either isn’t popular with printed materials, or maybe is just too hard to measure there?
A search or two-input login is probably okay. E-commerce form with 10 or more questions? No way. Always show some kind of label so users can double, triple and quaduple check that what they have filled in matches what is asked.
This is double important when you are sending back error messages in your form validation: do not remove what they have typed in, but highlight it or point out that it is incorrect, tell them why and how it is incorrect, how they can fix it, and here a label is of utmost importance. For some questions I would imagine if someone got it wrong once, add some sort of additional hint on validation, like an example (the kind of thing placeholders were meant for, but of course we can go further: pictures can be quite awesome. I’ve seen them now for credit cards (both the numbers in the front AND the so-called security number in the back) and licence plates (which my own company used to great effect).
Once, when I worked in the medical industry, we had a (paper) form that asked for a number on a pass. The name of the pass was pretty standard from hospital to hospital, but still too many people had no idea which pass this was (some folks had separate passes from their insurance companies, from their doctors, and their specialists). A pic of our pass helped a lot.
If a field doesn’t say what it is for then just turn off JavaScript on that page and enter whatever you like in the field.
Chances are if they are stupid enough to not label the field properly then they are probably relying exclusively on JavaScript for validation as well and you will get away with whatever input you like.
felgall: turning of Javascript does not bring in an non-existent label, nor does it turn off HTML5 placeholders.
I believe most forms should have Javascript validation, not to validate the data, but to help users get their info correct before the server validates.
Chances are if they are stupid enough to not label the field properly…
Nah, you can have a dumb front-ender and a decent back-ender working on the same project
Chrome, Safari and Firefox do keep the placeholder value even when the input has focus.
I’m actually abusing inputs and placeholders in far worse ways than this.
Firstly, I like making inputs look like they’re not inputs at all.
Second, I like to prefill the first field with the value of the placeholder and then select the text, it prompts action and I like the look of it.
Users didn’t get it at first, but they’ll learn
Trying new things, even when they’re problematic is a good thing.
I agree that labels and placeholders are the way to go. Some projects might allow flexibility and audience, function and form should dictate your way forward. But I do think that a large majority of forms should use BOTH labels and placeholders unless there is a very compelling reason for change. Certainly design alone is a very foolish reason.
Users didn’t get it at first, but they’ll learn
Trying new things, even when they’re problematic is a good thing.
I’m not sure confusing your audience and expecting them to learn for the sake of a design choice is a good idea. In fact, I think it’s a design flaw. You’ll find abandonment far more often than conformity. Whatever you’ve built, there’s alternatives to it. Visitors give you seconds (if you’re lucky), and wracking their brains to figure out what you’re trying to communicate isn’t what they’re interested in doing with that time! When I encounter difficult forms, I give up and go somewhere else. It’s the number one reason why I abandon shopping carts!
Yeah I hate this trend as well, it’s really horrible user-experience. I think it’s perfectly acceptable on username/password boxes especially if you label the submit button “log in” as there are only two fields and people are so used to them.
Or instances such as “Search” with a single field, provided the button is in obvious proximity to the field explains the form then it’s perfectly acceptable. Anything other than these is ridiculous. I don’t know why anyone thinks this is a good idea.
)
