Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

To assist an user entering some data in an <input> field, we're planning to provide tooltips and placeholder. Wanted to understand the guidelines and standards on 'when' to use placeholder vs. tooltips. And in general, how does placeholder or tooltip provide better assistance than label and some sort of help. Any examples and explanation will be helpful.

share|improve this question

3 Answers 3

up vote 4 down vote accepted

When you use placeholder, the piece of information, help or example it is trying to relay to the user, is hidden from the moment a user types something. To reveal the info, user has to clear the field (e.g. cutting the text to clipboard, to be pasted back after reading). I'm even tempted to say that most users won't be able to figure out a way to get the placeholder text back, but I have no evidence of that.

In that sense, preferring a tooltip over placeholder is advised as the tooltip text can be viewed at any moment, without having to alter the text already typed in. However, a tooltip requires an explicit action (mouse hover, input focus) to reveal its contents while a label is always visible.

So, one has to consider the aspects of label vs. tooltip; usefulness, length, etc. In my (not so humble) opinion, use placeholder sparingly, and use meaningful labels instead. If some field needs a longer explanation or example, provide a tooltip for them.

share|improve this answer

Placeholder text is useful to show a single example of the kind of input you want. The best example I can think of is dates, because there are many ways to express date. Your placeholder text can easily show yyyy/mm/dd and give a hint about the type of input desired. However, the placeholder text will vanish at some point, so it's OK for a hint, but not instructions.

Tooltips are not as restricted by size and shape as placeholder text, and they can be used for more elaborate instruction or information. For instance, where you might have had an example of how to format a datestamp as your hint, you tooltip can say, "Please enter a date in yyyy/mm/dd format. You can also enter N/A or leave the field blank." You need to provide a hint to the user so they know where to place the mouse to display the tooltip or at least use a standard location.

Where tooltips and placeholders tell you what you are expected to put into an input, the label tells you what the input is. Is it a birthdate? A start date? Deadline, etc? The label should be short and clearly state what the data represents.

A quick note about labels vs placeholders - if you can't think of a more descriptive or useful placeholder than the label, don't use one. It's not helpful to label a field "First Name" and then give it a placeholder of "first name". A label of "Birthday" and a placeholder of "yyyy/mm/dd" makes sense because the placeholder tells you something new.

share|improve this answer
    
Is it okay to say, tooltips info will always be a superset of info conveyed through placeholder? –  Arjun Aug 7 '13 at 17:14
1  
I can agree with that. You might have a tooltip and no placeholder, which satisfies that rule. Nobody will force you to add a missing tooltip when you already have a placeholder, but I think if you're doing a thorough job, that rule would apply. –  Surreal Dreams Aug 7 '13 at 20:16

Are there Standards? No, but there are best practices* for each based on their intrinsic properties. I'll list a few that come to mind. Two good, 1 bad.

Placeholders:

Are good when space is an issue since they combine meta information about the input inside the input element itself.

Add extra usefulness when the placeholder text hints at input structure such as (xxx)xxx-xxxx

Can confuse users into thinking the text is already filled in.

Tooltips

Also are good when space is an issue since they take meta information about the input outside the form structure. Thereby reducing clutter and preserving space for the relevant elements.

Are a good choice for supplying additional information about the input that is descriptive. E.g., "Phone num:[ ] tooltip:"We'll only call you if your order doesn't go through"

Don't work well in mobile environments and may distract users from their intended action.

* I let the best solution to a user task trump "best" practices. In fact, that's how they are arrived at.

Hope this helps.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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