User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
Which approach is better for users and why?
Test placeholder in your browser on jsfiddle.
Interestingly the w3 Spec for placeholder allows for either behavior:
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/or the control is not focused (e.g. by displaying it inside a blank unfocused control and hiding it otherwise).
But, functionally speaking, there's little reason to clear it before the user starts typing. Users tabbing through your form might never see it because they'll tab into the field before seeing the placeholder text. Mouse users might not have finished reading the placeholder text before they click.
If your field is complex enough to require a placeholder, it probably requires some thought; what better time to think "what should I input?" than when you're focused on the field? Why take away that hint from users focused in the field but confused as to what to type?
I would side with having the placeholder text show as long as possible without getting in the way.
The way it is done in Chrome is better, in my opinion.
I've found ways to get around this on all browsers, however.
What I've done in the past is remove the placeholder text on focus, but also re-displayed that text by making the label--which is almost always a duplicate of the placeholder and, if not, at least as or more descriptive--show up as a tab.
For example, here is part of my form with no fields in focus:
And here is part of my form with a field in focus:
This way, a user is never confused as to what exactly they've typed into a field. They can check back by re-focusing on the field.
Removing it when you start typing is better
Depending on how the focus was moved to the input field, the user may not necessarily see the placeholder text before it quickly disappears.
Yes you might read it before you manually click in the field but perhaps not if you happened to tab into the field from the previous input.
There's also the possibility that the first input field gets focus by default when a page is displayed, in which case the placeholder would still be good to see.
The change to preserve placeholder text on focus in the recent Firefox 15 release confused me the first time I saw it. I actually thought the field was disabled. In Firefox, the default styling (text color) of placeholder vs. disabled is very similar, and unlike Chrome, there isn't a default focus highlight, so the main indication that the field is editable is the cursor which can be easy to miss. When you can't highlight or delete the text that's in your way, your first instinct if you're unfamiliar with the UI convention is not necessarily to start typing anyway.
Although there are some good practical arguments for preserving the text on focus, there's also a lot of precedent (at least in Windows) for the opposite behavior. One commenter pointed out that the search box in the Windows start menu works this way, and Firefox itself has several UI fields that clear on focus. The Windows start menu is actually an example of a hybrid approach. Its search box is initially focused and displays the text by default, but when the user manually focuses it, the text is cleared. I prefer this sort of compromise from a usability standpoint.
In an HTML environment, however, clean mapping to CSS (if only for override hacks) is also important, and there isn't a selector for auto-focus vs. user-focus. And at this point, all the browser vendors seem to be in rare agreement, so it's a bit late to be complaining. Perhaps a simpler compromise in Firefox would have been to add a default focus style for placeholder text that faded the placeholder text more on focus so the user had stronger feedback that the field could accept their typing even though there was still placeholder text in the way.
Setting aside implementation concerns in a particular browser, my preference in general remains to hide on focus. Although a large part of it is that it's simply what I'm accustomed to, I think there's also a fundamental aversion to trying to write in a space that's not already blank. Experience with handwriting, typing (with a typewriter!) and computing has taught me that if there's already text there, I need to do something about it first. I instinctively prefer a blank canvas before I start. I can adapt to the preserve on focus pattern, but I think it's going to be difficult to feel entirely comfortable with it unless there's more of a sense of the placeholder text getting out of the way when I focus the field for editing.
Having seen someone trying to highlight some placeholder text for several minutes so that she could delete it and begin typing, I would say the delete on focus would be the most user friendly for all ranges of users.
I think the colour of the placeholder text makes a difference here as it was the same colour as the input text, maybe a light grey or something similar wouldn't have confused this particular user.
Now when the user comes back to fill that field which is in focus and with out placeholder. There is very high chances that the user has forgotten what he saw in the placeholder and might enter something on their assumptions.
Hence, Removing it when you start typing is not good
We checked this recently in a user test and it showed clearly that the field has to be empty once a user clicked it. If the text stays in there they thought they were not able to change this field and did not even try typing.
Another thing: I remember an UX consultant from Nielsen Norman reporting that if users see an empty field they tend to write something in it. So not having placeholders might increase conversion. :-)
Which approach is better for users and why?
The better approach is the default approach. The user has chosen a browser and is used to how that browser does what it does. Don't mess with the defaults.
Reading GP89 answer having seen users try to highlight or even delete placeholder text does seem to strongly suggest that removing the placeholder text on focus would be better.
Also placeholder text SHOULD be used as a minor help anyway.
The problem seems to be though people are using it as a replacement for labels which clearly placeholder is not. Any form which may be re/prepopulated with actual content which then of course replaces the placeholder is unusable without labels. Even a simple login form (user + password) may be prepopulated if e.g a validation message is shown after submit (maybe unknown password, and yes I know, not the recommened way to do this but best example I could think of just now). The example forms above seem to use exactly this false usage... :(
The best approach is to avoid using placeholder text at all. There's plenty of evidence that many, many users won't understand that it is a placeholder (see the answer above for an example) and will become confused. It's a bad pattern and is completely unnecessary.
Chrome way is better, generally. It also depends on the context, however. Ther are times when a placeholder text might be so important that it is advisable to have the user manually delete the text themselves (edge-case).
Proper use of labels should help the user and prevent dependence on default values within fields.
Most of the answers here deal with forms with multiple inputs. There are certainly some scenarios (using an input for a search field) where there will only be one input on the page.
In this eventuality I find it would be better to remove the placeholder on focus. The user knows what was just in there, and leaving it in place can confuse them.
