We've created Zuko, our next-generation form analytics platform. Explore Zuko Explore Zuko > Hide Message

Labels inside form fields – the devils work, or misunderstood monster?

Accessibility

Labels within form fields have become increasingly popular. Why? Well, probably for a number of reasons. For one, field inside form fields look tidier, making them more aesthetically pleasing. For another, they take up less screen space which is very important as browsing rates on mobile devices continues to increase.

However, many UX experts have decried this movement as one leading to headaches and frustrated users. In response there are designers who say labels inside fields can be an economical and efficient way to present a form.

Who is right?

I believe that the designers are, but only in a limited context and only when done right. Here’s why.

Empty boxes, a short history

Google

As the web has become engrained in our daily routine, so too have certain practices and features – the refresh and back buttons, tabs at the top of the screen, bookmark toolbars, and many more. One of the first conventions to take root in the psyche and stay there is the presence and purpose of a single blank box. It means search, and is now so unanimous with that function that often no magnifying glass exists near it to tell us what to do – we just know.

A constant state of flux (capacitor)

But when it comes to the web, things change. Fast. We used to associate the empty box with where a user is supposed to type, But as our experience with online forms matures, so too does our understanding of what is expected from us.

There have been countless stories of children trying to touch television screens, expecting them to behave like tablets. Pinch to zoom, swipe to unlock, inertia scrolling, auto rotation screens have all become second nature with mobile devices. Our expectations of what will happen when we interact with digital devices changes as manufacturers and designers decide how they want us to behave.

Touch screen

Is this you?

If their decisions are based on usability, these changes are welcomed. If, in order to unlock my phone, I was required to clap loudly whilst whistling a tune, this would be a design feature that would be unlikely to catch on – it’s counter intuitive and sometimes unachievable (how would I unlock my phone if I was holding something in one hand – juggle? And what if I was eating – would those in my near vicinity be showered in sandwich?).

How does this relate to forms? Well, they are different to mobile gesture based behaviour. They are, as Caroline points out, a dialogue, or conversation in a potential relationship:

Interacting with the form creates a conversation that happens within the context of the relationship. And that conversation goes something like this:

“Okay, I’ve got to fill in this form.”

“In which boxes do I need to type something?”

“What have I got to put into those boxes?”

When people are trying to accomplish a goal, their focus is not on the form an organization requires them to use. It’s on achieving their goal.

Conversations have a natural flow and the argument goes that forms have the same – question, answer, question, answer. The answer always goes in the form field. To put the question in the same box breaks down this flow, it is the equivalent of talking over each other on the phone, as Caroline also points out.

A case of disappearing labels

A perfect example of how our expectations change over time, based on experience, is to look at the evolution of web forms. Say for instance, you went to Twitter, and none of the usual branding appeared, and the screen was completely blank, aside from the following:

Sign up blank

After you finished scratching your head, what would you do if you still wanted to log in? What would you type in the boxes? Username and Password? I dare say that most people would, if they were not so perplexed by the lack of branding that they thought the site had been hacked.

Another, slightly different example. If you heard about a new social networking site that was changing the world, and went to their sign up page, and found this:

Sign up blank 2

What would expect to put in the boxes? I think it would be nigh on impossible to get it exactly right, but if you had to guess what these boxes were asking for, could you construct a most likely shortlist? Take a minute to think of that list now.

Cheating

Would any of the following be on yours?

  • Name
  • Email
  • Confirm email
  • Username
  • Password
  • Confirm password

Now think of all the ones that did not pop into your mind. Would card details feature? Or date of birth? Or mother’s maiden name? Or ‘write the number fifteen in this box’? Or ‘how are you today?’ Or ‘tall is to short as wide is to…’?

If the shortlist matched closely with yours, it illustrates the fact that given a certain type of form on a certain type of website, we already have an idea of what will be asked of us before we start to complete it. Have you ever seen a checkout process where they ask for your card details first, followed by your new username, and then your phone number before asking for your email and lastly your name?

This behaviour modifying experience with forms is less common than some others; think of traffic lights. There is nothing innate about the colour green or red about going or stopping, but you have experienced traffic lights and signs so often that you always link green with going and red with stopping. If you happened to visit a country where these colours were reversed, I dare say that you would come close to death several times before the new link between green and stopping was made instantly.

We encounter forms less often than traffic lights and signs, but there is a bank of experience that informs our future expectations of what to put in which box. Now, no form should have no labels (!) but the above hopefully served to show that even if none existed, we would at least have a rough idea of a possible shortlist to enter into those boxes. I will state again though, do not rely on your users being telepathic. No labels is no good for your form, your website or your users.

So, what’s the point of all this?

Good question. My point is that even those that do not fill in many forms will have completed some. As our lives become more internet and digital heavy, our experiences of online forms will multiply in number. Younger generations especially will likely fill out far more online forms than physical ones. Just as we know that we can manipulate a tablet with a finger even if we haven’t seen that particular model before, so too do we come to expect a certain set of questions for a certain type of form, so much so that we can almost guess what we are being asked for without having any labels.

So, if we accept this, the dialogue between us and the business with the form changes. The flow of the conversation becomes less vital to our successful completion, because we already know what is coming.

Nielsen’s Rule (one of them anyway)

Everyone spends most of their time on the web on sites other than yours.

Sounds obvious when you read it, but this principle should inform your website design decisions. Do something too outlandish with your site, and users will not know how to interact with it. Surely this means that labels within fields is a bad idea, since ‘most’ other websites will not use the same technique and users will be confused by your unorthodox layout? If other websites promote the rule that “empty space = space for me to type” then every visit they make to other websites will teach them to be confused by your layout, so the thinking goes.

An interesting idea and a useful rule of thumb, but one that if you applied rigidly, would prevent the addition of any new features or layouts online. Infinite scrolling, embedded videos and social media share buttons spring to mind as features that may have caused some confusion upon their introduction, but quickly become a part of our standard user experience online. Changes in design trends can be problematic initially, but will win out in the end (some of the time).

If labels inside form fields are indeed a growing trend, then the proportion of other websites that use the same feature will increase, and users will learn how to use your site by using other peoples.

Labels inside form fields can be therefore be fine, but still only if you minimise other usability issues. Caroline Jarrett has said much the same, but we’ll come to those issues in a minute…

A major caveat

This only applies to a certain type of simple form. I would go as far to say that this rationale is limited to sign up forms. The longer and more complex the form, the less likely we are to ‘know’ what is expected of us. You can therefore take far less for granted and cannot assume a user knows what is coming. The questions themselves can also be nuanced enough that I need to check my answer and make changes at the end of the form before completion. If I can’t see what the question was asking, I cannot do this.

Okay, just for simple forms. But wait, there’s more!

The above only applies for the working label inside a form field. The next bit will cover some examples of why the above presumption of user knowledge is not enough.

When it is done badly, it is really bad.

For many of these forms, when you click on a field, the label itself disappears.

I will not name and shame the above form, apart from to say it is on a website that should definitely know better. To be fair, I think it is an old page that has probably slipped under the radar. It’s a page to download a whitepaper, and is a perfect example of what can go wrong with labels inside form fields.

Know what the third field is asking for? I was filling this out and tabbing through the form. As soon as my cursor enters the field, the label disappears. This is a common fault with labels inside form fields. I have no reference to tell me what I should be entering. In order to remind myself of what I am being asked, I have to click elsewhere so the label reappears. Even if I know it must be something on the shortlist mentioned above, I am not sure exactly which one. Email address is the most likely, but could be wrong.

Another risk, which also happens with the above form, is that if I click back in a box that I have previously entered information in, the text is wiped – I have to enter it again, even if I only wanted to change a letter. This is infuriating. Just terrible. This kind of error is so far beyond being a design issue, as it can give rise to rage and tab closing.

But is it just obscure whitepaper downloads that have in-field labels? Nope:

Linkedin mobile

LinkedIn’s mobile sign up form

The mobile site for Linkedin uses the same formatting technique, and suffers from the same problems. One difference which makes this slightly more tolerable, is that you cannot tab in a mobile, so you have to use your finger to ‘click’ in the next box. You therefore take in the label before engaging with the field, but there is still plenty of room to forget what the label is asking you, and you would then have to leave to field and re-enter it in order to complete it. This should be avoided for obvious reasons.

Label arrangement for mobile sites

So, why not use the same label arrangement as your main site?

Good question. If your website is responsive and your labels are top aligned, then this is a very sensible suggestion. But it is not always as simple as this.

The main Linkedin site uses right aligned labels to the left of the form field:

Linkedin main

LinkedIn’s desktop site sign up page

Can’t you just use the same labels for the mobile site? This might not be such a good idea. Take The Times mobile website:

Times online mobile

Mobile site of The Times newspaper

Focussing on a form field zooms the screen, cutting off the label. Obviously, this is not good.

Two further features to avoid.

  1. Your label should never remain once the user starts typing, and therefore become part of the answer.
  2. Users often want to select the label and try to delete this if it does not disappear when they click inside the box. You can limit the number of times this is attempted, but making the label even fainter when a user clicks in it.

Do it right, or don’t do it at all

If you choose to put labels inside form fields then do all you can to make it usable by following the best possible guide to adding labels inside a form field. These instructions are good for four reasons:

  1. The label is in the form field.
  2. The label is in a grey colour that gets fainter when you click in it but does not disappear.
  3. The label does not form part of my entry.
  4. My entry is also not wiped is I click elsewhere and back into the field.

This is as good as it currently gets with labels inside form fields. If you need a checklist of things to avoid when opting for the field labels inside form fields, you could do worse than this:

Some key things not to do

  1. The label should never become part of the answer.
  2. The label should not disappear as soon as the user focuses on the form field.
  3. Your answer should not be wiped if you refocus on the field at a later stage.
  4. Do not use it for complicated forms. Ever.

There therefore seems to be many things that can go wrong with having labels inside fields. Will you spend the rest of your days fixing bugs and making sure that your form works correctly? I do not think so. The more people that adopt an idea and play around with it, the more information future beginners have at the start of their journey. All coders and programmers will know this well – other people spend hours working out how to do something so you don’t have to.

So, do put labels in forms if they are simple and short, but make sure you get it right. And getting it right does not have to be hard, so do it.

One last caveat

I will happily admit at this late stage that the above remarks are largely based on opinion rather than extensive studies. I would however add that past studies are not always the best indicator of future behaviour. The web, its design and our reaction to it are constantly evolving. If manufacturers and designers are continuing to add form labels inside the fields themselves, then we will adapt our online behaviour to cope with this, and use this experience to form expectations of form filling out adventures in the future.

We may disagree with the decision to do this, but if the trend continues, then we will have to accept that this will influence user behaviour and adapt to it. We can minimise the potential pain using some of the pointers I have mentioned above, and make the world a slightly less bad place.

Form tracking

Testing designs and tracking user behaviour will give you the clearest indication of what works best for you and your users. With form tracking you can measure users completion times, drop off rates and error rates in your online forms. Hesitation and errors are a good indicator that your field label is confusing your users. See for yourself with a free trial of Formisimo.