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.
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.
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.