Forms

How to Align Labels Inside Textboxes Correctly

There are different ways to align labels on forms. Designers either place them above or to the left of a textbox. But placing them inside the textbox was never much of a thought until now.

Labels inside textboxes are starting to become a popular trend on forms. The more popular they get, the more designers will want to use them. But before you decide to put your labels inside your textboxes, there are a few things you should know.

Benefits of Labels Inside Textboxes

Putting labels inside textboxes can benefit your form. For one, it reduces the length and width of your forms. Because the label is inside the textbox, you have more space outside the textbox for a more compact arrangement.

It also reduces the number of visual fixations from the label to the textbox. Since the textbox and label are on top of each other, all it takes is one visual fixation to find the label and which textbox it belongs to. This can make your forms easier to process and faster to fill it out.

Recognition Over Recall

There are as many benefits to putting labels inside textboxes as there are challenges. The biggest challenge is supporting recognition over recall. When users start filling out a textbox, the label in the textbox goes away. This makes it difficult for users to recognize the information they entered when they look back on the form. Without any sign of what kind of information is on the form, it forces users to recall the labels for the information they’ve entered, increasing the cognitive load of their memory.

Grouping and labeling

To make it so that users can easily recognize what kind of information they’ve entered, you should group your textboxes based on the kind of information users will fill out and clearly label each section.

For example, a user’s shipping information is different from their payment information. Therefore, it’s important to not mix these textboxes together. Instead, group them separately and label the section, so when users look back they can easily recognize each textbox as shipping information or payment information.

Sub-section labels are also needed if you have a lot of textboxes. For example, the user’s shipping information will often contain their contact information and address information. Grouping and labeling the contact textboxes as one sub-section and the address textboxes as another will help users distinguish their contact information from their address information after they fill out the form.

Error messages

Most error messages on forms either tell users that they’ve left a textbox blank or they’ve entered invalid information. With form labels inside textboxes, these generic error messages aren’t enough. An error message saying that the information users entered is invalid doesn’t help them much because they can’t see the textbox label. As a result, it makes it harder for them to correct the textbox because they don’t know what the information in the textbox applies to.

That’s why your error messages should reference again the type of information that goes into each textbox. Saying a textbox is “invalid” won’t help users recognize and correct what’s in the textbox. You’ll have to customize each error message to each textbox. Then users will be able to correct their mistakes without needing to see the label again.

Visual Feedback

Another challenge to putting labels inside textboxes is the visual feedback the user gets. Users should get visual feedback when they select and type in a textbox. They should also get visual feedback when they delete information and deselect a textbox. When your textboxes do this correctly, users will be able to fill out your form without a problem.

Selecting a textbox and typing

When users first lay eyes on your textbox labels, they should look gray so that it differs from the black text that will show when they type. The labels should go away when users start typing, but it shouldn’t go away when the user selects the textbox with their mouse.

Instead, the textbox should highlight and the label should faintly show to let users know that the label is about to go away when they type. It shouldn’t completely go away before the user types because some users will select a textbox and forget what information to type in the textbox. Keeping the label visible until they start typing won’t force users to rely on their memory to recall the textbox label.

Deleting information and deselecting the textbox

When users delete the textbox information and deselect it, the textbox should go back to its original state. This means that the textbox label should show again. Some textboxes will make the label disappear even after the user brings it back to its original state. The label should reappear when users delete information and deselect a textbox, so that they can read the label again if they need to.

Putting form labels inside your textboxes comes with many benefits as well as challenges. When you pull it off, your form will look cleaner, simpler and leaner than most forms on the web. You’ll impress users with how fast and easy your form is to fill out. But getting there will take work. This article can’t do the work for you, but it can set you in right direction so that when it’s all said and done, you won’t have a thing to worry about.

Make it Happen


Book

Affiliate

elegant wordpress themes

This Post Has 17 Comments

  1. pwb Reply

    This has got to be one of the worst design trends ever. The fact is that the labels disappear precisely when they are most needed!
    OK, I’ll step back a little. When done as you explain and demonstrated by squareup.com it works OK. Still doesn’t seem that user friendly.

  2. Gonzalo Reply

    Congratulations for your article. Very useful, as always.

    I’m just working in a project where I’m having a similar situation: The user can get his data from Facebook across the registration plugin. After doing this, some fields of the registration form like name or surname are filled out, but other fields will probably be pending to be filled.

    In this case, we have thought that all the error messages will be displayed directly in the form. It saves the user a step that, probably, after getting their data through Facebook, do not realize he still has to fill in some field.

    http://screencast.com/t/Ls1CHphoKn

  3. Graham Armfield Reply

    Thanks for the article Anthony – it’s a neat idea.

    You don’t mention how the technique is achieved in the code but I’m assuming you’re not removing the label altogether, and are using CSS to position it above the input?

    How would you propose dealing with cases where the label is longer than the input field – eg ‘How many years no claims discount?’ To have a form with some labels above and some not may start to look a bit untidy.

    I may make a couple of example forms and have a look at this from an accessibility perspective too.

    Cheers

    • anthony Reply

      Check out the links in the “Make it Happen” section at the bottom of the article.

      I would propose that the long label be shortened so that it can fit in the textbox. There’s almost always a way to say something you want to say shorter than the original. That’s where your writing skills come in.

  4. Chris Reply

    Very useful article. I think this style is great for very simple forms, and you have explained how this could work for moderately complex forms. Still not sure if this would be appropriate for very complex forms, or forms where the user would be very concerned over providing accurate input.

  5. Dém Reply

    Graying the label inside the textboxes looks unergonomic to me, because the text has less contrast. It is a problem for all the people who have some eye problem: old people for a start.
    Putting the label inside the textboxes is even worse for blind people: I doubt their recognition software handles that.
    So, it’s a nice designer trick, but a poor advice if you want a web accessible by everyone.

    • Peter Reply

      I have to agree with Dem. We’ve avoided putting labels in fields specifically due to concerns over Section 508 compliance.

    • anthony Reply

      If you gray your labels too light then I can understand it being hard to read. But using a dark gray on a white background isn’t hard to read for most users.

      I would suggest testing the label contrast on your users to see if they actually have readability issues before casting premature doubt on such a useful technique.

  6. Steven Hoober Reply

    Graying out the labels in the fields is only good when space constrained. Will (seen it, with lasers!) missed.

    You can, if needed, hide field labels and get accessibility for screen readers and un-styled content, btw.

    Inline errors always a good idea. Also key: do not allow submission unless all errors cleared. Tell them next to the button why they cannot.

    Key failure above: DO NOT obscure other fields. Put the error to the side. Especially think about multiple errors at once. Need to be able to display every field with an error without any of the boxes obscuring any other boxes.

    Its not behaving quite the same as when I designed it, but one easily accessible public example is online account creation at Sprint. No, you don’t need a phone # or anything to get to the interesting first page. Check out the markup for labels (if good, credit there mostly to France Rupert) and the way the onblur error system works.

  7. Maicon Sobczak Reply

    After read this article I’m more confident when using forms with labels inside textboxes. The examples are perfect.

  8. Holger Reply

    Forms can be frustrating for everyone, so creating user-friendly forms can be a real challenge. Label alignment is a primary element of form usability. Users want to be able to look at the form quickly and be able to understand it – Don’t make them think !
    If you consider designing a form without labeling each input field you should really really give it a serious consideration – who are your target audiences are they very internet savvy people /power users ? Aren’t they general public / inexperienced users?
    I think such forms can just work for internet savvy people /power users!

    If you or the other readers interested in an other article about that topic …

    http://ux4dotcom.blogspot.com/2009/06/form-of-forms-we-need-them-but-also.html

  9. Gary Barber Reply

    There are still a good number of issues with this technique.

    The recall issue doesn’t go away, the user has to know to delete the info to get the label back. This could be potentially very frustrating.

    They can also get confused with error messaging and feel stupid if they put the information in the wrong field.

    Multiple errors would also be an issue or crowding the visual space. You know the primary reason to use this technique is to save on space, but in a way what we save we have to put back to clarify the fields, especially with error messaging.

    I’ll assume the existing labels would still be present and that you are suggesting copying them and clipping them down with CSS so there is still an accessibility component for the people using AT in a non ARIA supported software to access, while they are hidden from the general audience.

    Mind you the greying of the labelling isn’t going to help people with cognitive or contrast issues either.

    I would not recommend anyone considering this technique for inclusive design. Simple isn’t always best.

  10. CSS Web Standards Reply

    Labels are the important part of any website or web application, which should not be ignored at all, it can misguide the user, label should always be visible. But Anthony’s suggestion cannot be ignored as we can create a clean design form with his suggestion

    I would suggest to take it one step ahead to solve the above issue.
    As the focus goes on text-box label should goes away and a bubble or small tool-tip should appear above or below the text-box with label.

    On focus that tool-tip or bubble kind of design should always appear, on blur it should go away.

  11. Angela Reply

    Great Article thanks!

  12. FABIR Reply

    Thanks Every designer or coder should know this Your blog is been turning one of my favorites.

  13. rakesh Reply

    Awesome design.
    Seems perfect choice for fresh forms.
    How does one tackle edit scenario, where in the form is pre-filled with data and user is expected to edit?

  14. Julian Reply

    I’ve just been making a form with this method and have come across a few problems while trying to implement a credit card input.

    1. If you put a label in the field, there is no place to put example input.

    2. Some sub groups still need a single label. Consider expiry date fields for a credit card form. I don’t want to write Expiry Month (MM) and Expiry Year (YY) inside the fields.

    3. If I use typeahead instead of a select box, the label will need to be in the array of options, which seems wrong.

Leave a Reply

Your email address will not be published. Required fields are marked *