by anthony on 03/03/11 at 11:03 pm
There are a couple different ways designers typically arrange labels on forms. They’ll either place them above the textbox or to the left of the textbox. But to place 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.
Putting labels inside textboxes does give your form a lot of benefits. 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. The overall look it gives to your forms is clean and simple. Clutter is not an issue, so when users look at your form, it’s inviting to fill 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.
Most error messages on forms either tell users that they’ve left a textbox blank or they’ve entered invalid information. With forms labels inside textboxes, these generic error messages aren’t enough. When a users fills in a textbox and they get an error message saying that the information they’ve entered is invalid, it doesn’t help them much because they can’t see the textbox label. As a result, it makes it harder for users to correct the textbox because they don’t know what the information in the textbox applies to. That’s why you should have an error message that specifies the entered information for each textbox. Simply saying a textbox is invalid won’t help users recognize the textbox information, and it won’t help them correct it. You’ll have to customize each error message to each textbox. When you do, users will be able to correct each textbox without needing to see the label.
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
- In-Field Labels jQuery Plugin
- jQuery Form Labels Plugin
- Making Forms Convert Through Awesome Inline Labels