HTML 5 Placeholder Text

Previously, this blog posted an overview of HTML 5.  Let's have a closer look at one of the more useful HTML5 features: placeholder text.   Placeholder text is  a short hint intended to help the user understand what their data entry should be.  It is not default text.

Placeholder example:

First name:

Previously to achieve this involved some javascript; now it's extremly simple.  Simple add the placeholder attribute to the input element.

Placeholder text has some real benefits.  It means you are conveying more information to the user but not taking up anymore valuable real estate space on the page. Now, it is fair to say that there are some very popular GUIs that don't use placeholder text. For example, the login screen for gmail does not.

gmail login

This begs the question when from a usability perspective when does it make sense to use it and when is it best avoided?  Let's think about the gmail case a bit more and that helps answer the question.

By default, the gmail Username textbox gets focus when you arrive at www.gmail.com. This makes sense. The Username textbox is the smart staring point for this page.  It's the logical place for the user to start their interaction.  Now, when a textbox has focus any placeholder text it has always gets wiped. Otherwise, the user would be seeing a mixture of what they are typing and what the placeholder text was.  That would just be horrible! So, since the username textbox has default focus for gmail.com it makes sense that when you arrive, the username textbox is blank. How about the case when the user types nothing in the username textbox and shifts the focus to something else? Would the arrival of placeholder text add meaning or confuse the user?  I'd argue it would confuse them.  Aside from the sudden flicker being an irration, the user could think they did something to cause the text to be put there.   It will confuse rather than elucidate!   As for the password field, well they generally don't have placeholder text - for obvious reasons. So gmail is being smart here. There is no placeholder text but for logical reasons.

So placeholder text is great but there's the question of when it should be and shouldn't be used should not be avoided.

Now, let's dig a bit further into the usability.  The W3C  spec states that the: "placeholder attribute should not be used as an alternative to a label".   I'd also suggest that the placeholder text should not repeat the label.  What's the point in saying the same thing twice?  There's no point in duplication, but there is nearly always a case for elucidation.  A good example is the firefox searchbar.   This is the text bar found in the top right corner of the Firefox window that can be used to search popular search engines without the user having to access them directly.   A number of different search engines can be selected.  In all cases, there is icon for the engine which acts as a label for the search engine.  There is also placeholder text in the search textbox ajacent to the icon label.  This elucidates what the label icon is identifying.  For example, for Wikipedia we see, the Wikipedia icon and then the placeholder text: Wikipedia (en)

Wikipedia selected 

What's really clever is here is the use the very efficient use of real estate.  The icon is very small and in case it is not clear it means Wikipedia, the placeholder text elucidates the matter.  We see the same if Google is selected.

Google selected

So yes placeholder text is a great feature.  It's easy to use but using it at the right time and smartly requires thought.   It all comes down to the simple question: is the addition of placeholder text going to elucidates matters for the user or not? 

So any browser caveats?  Well not all browsers support the placeholder attribute. For example IE 9 does not.   But thankfully, if the placeholder attribute is not understood, it is ignored. There are no nasty exceptions or error messages.  Just have a look at this webpage in IE 9.  As always, if you want to support fallback use the Modenizer library.  There are several examples available using Javascript /JQuery if you want to have placeholder text in browsers that don't support this simple way of doing it using HTML 5.

References:
1. HTML5 spec: http://dev.w3.org/html5/spec/Overview.html
2. HTML5 placeholder spec: http://dev.w3.org/html5/spec/Overview.html#the-placeholder-attribute
3. Site to test your HTML5 browser support: http://html5test.com/
4. Site to test your browser support for input type attribute support: http://miketaylr.com/code/input-type-attr.html