48

I am familiar with research on label placement to the left or above. I tend to go with right justified with the label to the left of the field for my form designs.

However, inline placeholder text is trending and it does further reduce page clutter. Is there any research out there supporting its use? Has anyone conducted usability studies on their forms that they can share?

enter image description here

Research Links:

http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php

http://www.lukew.com/resources/articles/web_forms.html

| improve this question | |
  • 4
    Apple recently redesigned their checkout flow to use in-line labels for the form fields... however, as Luke Wroblewski points out in the linked article, this only works well because they're doing it for highly structured data (e.g. address), and they've designed the forms to match the data structure. – Daniel Newman Jul 21 '11 at 17:27
  • 1
    Here is a neat idea proposed by Mary Lou and tympanus: move the placeholder to the label spot upon click. Many variations of this idea are available in the demo. Form before click | Form upon click | Form filled – Courtney Pattison Mar 20 '15 at 13:16
  • Reducing clutter is a nice way to focus on what is important on the page, but we should never sacrifice usability for minimal design. With placeholder only the user loses a large amount of context explaining what field they are filling out as they are filling it out. I would recommend testing how often users begin to fill out a field with placeholder text and then erase it to see the field's label again. – Benjamin S Mar 20 '15 at 13:35
38

The major problem with inline placeholder text is after filling out a number of fields, it is difficult or sometimes impossible to determine what the original purpose of that field was.

Say for example you are filling out a form and decide to change your input, so you clear it out and then somehow you get sidetracked by a phone call of something else. Is there any way that you will ever know what that field was intended for without refreshing the page?

With a right or top(or left) aligned label it is always clear what the goal of a field is.

Here is a link to an article that discusses the cons of placeholder text. It doesn't talk about whether or not to use it on its own, but it does talk about the complications than can be created by using it. Talking points range from the users not fully clearing out the placeholder text to mistaking the placeholder text as a completed field:

As users work through most forms:

They see a blank box. They type. The box now looks filled in. Each time this happens, users learn that

  • boxes they need to fill in are blank
  • boxes with text in them are already filled in
| improve this answer | |
  • 4
    Ideally when you clear out the field it should show the placeholder again but I bet a lot of forms do not. I can't think of any that do actually... – Roger Attrill Jul 21 '11 at 17:59
  • 4
    Good stuff. HTML5 is resurfacing this pattern with the placeholder attribute. Luckily it erases and refills the field. I am not prepared to adopt quite yet. – Itumac Jul 21 '11 at 18:57
  • 1
    Placeholder is great for saving space on single field forms such as search bars. The label should still be used in code for screenreders but can be hidden from view in CSS. Facebook do this in their search bar "Search for people, places and things" – slawrence10 Dec 16 '12 at 21:14
  • FWIW, gmail's latest compose message UI uses placeholder text that appears while the field is focused and empty, there is no page refresh required to have it displayed if the user forgets which field is for subject or recipient's email address. Not sure what Google's R&D had to say, but they usually do things by the numbers. – Shash Dec 18 '12 at 8:26
13

There have been some nice developments to widgets since this question was asked.

The old world

  • Designers had to choose between placeholder only, label only, or label + placeholder.
  • Each has disadvantages:
    • Placeholder only is problematic because field meaning is obscured when it is filled in (see other answers).
    • Label only is problematic because (1) the form occupies a lot of vertical or horizontal space, which is problematic for mobile devices visually massive; (2) the label/input/label/input striping contrast can be disruptive to visual flow, especially when the user first arrives at the form and has to process what the fields are.
    • Placeholder + label presents a wall of text to users, which is a lot of cognitive load.

Today

By examining the input micro-interaction, designers have realized that there is no reason a placeholder can't also be a label.

Here is a demo of a hybrid input used in Google's Material Design:

In case that link to the demo breaks in the future, the input looks like this: enter image description here

In many (but not all!) situations, these hybrid widgets can provide the simplifying layout benefits of a placeholder, while retaining the best benefits of a label.

| improve this answer | |
  • 2
    It's really important to point out that the Material Design example is not using placeholder text. It is using labels. – DA01 May 18 '15 at 17:35
  • 2
    I disagree. I would respectfully argue that it IS definitely placeholder text—and of course transforms to label on focus of the field. – tonejac Aug 12 '16 at 3:56
1

Form fields can have both labels and placeholder text. These are two different things.

All form fields should have labels. Not all fields need placeholder text.

You can also position a label over the field so it looks like placeholder text, but is still an actual label. You can also hide the label and only show placeholder text, but that would be awkward to a screen reader (as it would read both).

So, all that said, you should:

The most common issues I run into that I like to try and fix:

  • placeholder attribute used instead of the label tag. If the placeholder text is acting as a label for the field, then that should be an actual label tag.
  • Placeholders that pointlessly repeat the label. A common one I run into is, say, a field labelled "Name" and the placeholder text stating "Enter your name".
| improve this answer | |
  • labels have advantages beyond the visual, they help focus on the field and they create valid markup, which is important for screen readers etc. – Toni Leigh Mar 20 '15 at 23:05
0

The answer depends on the frequency with which the user touches the controls:

If the person is going to use the form often, then you can train them what each field is. Muscle memory takes over and they stop reading the labels; internal or external. This is the rationale for gMail using placeholders. People use gMail every day and overcome the learning curve of placeholders.

If a user only sees the form once, then it's imperative that the form utilize the user's a priori knowledge of how forms on the web behave. There are very few use cases where the aesthetic improvement outweighs the usability detriment.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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