How to Pull off Putting Labels Inside Textboxes

Labels are a very impor tant part of any web appli ca tion,and it should not be ignored at all, it can mis guide the user, label should always be vis i ble. But Anthony’s sug ges tion can not be ignored as we can cre ate a clean design form with his suggestion.
As A side note I will strongly suggest to maintain the tooltips as a reference for the users. Ivette

There are a cou ple dif fer ent ways design ers typ i cally 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 start ing to become a pop u lar trend on forms. The more pop u lar they get, the more design ers 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 ben e fits. For one, it reduces the length and width of your forms. Because the label is inside the textbox, you have more space out side the textbox for a more com pact arrange ment. It also reduces the num ber of visual fix a tions from the label to the textbox. Since the textbox and label are on top of each other, all it takes is one visual fix a tion to find the label and which textbox it belongs to. This can make your forms eas ier to process and faster to fill it out. The over all look it gives to your forms is clean and sim ple. Clut ter is not an issue, so when users look at your form, it’s invit ing to fill out.

Recog ni tion over Recall
There are as many ben e fits to putting labels inside textboxes as there are chal lenges. The biggest chal lenge is sup port ing recog ni tion over recall. When users start fill ing out a textbox, the label in the textbox goes away. This makes it dif fi cult for users to rec og nize the infor ma tion they entered when they look back on the form. With out any sign of what kind of infor ma tion is on the form, it forces users to recall the labels for the infor ma tion they’ve entered, increas ing the cog ni tive load of their memory.
Group ing and labeling.
To make it so that users can eas ily rec og nize what kind of infor ma tion they’ve entered, you should group your textboxes based on the kind of infor ma tion users will fill out and clearly label each sec­tion. For exam ple, a user’s ship ping infor ma tion is dif fer ent from their pay ment infor ma tion. There­fore, it’s impor tant to not mix these textboxes together. Instead, group them sep a rately and label the sec tion, so when users look back they can eas ily rec og nize each textbox as ship ping infor ma tion or pay ment information.
Sub-section labels are also needed if you have a lot of textboxes. For exam ple, the user’s ship ping infor ma tion will often con tain their con tact infor ma tion and address infor ma tion. Group ing and label ing the con tact textboxes as one sub-section and the address textboxes as another will help users dis tin guish their con tact infor ma tion from their address infor ma tion after they fill out the form.

Error mes sages
Most error mes sages on forms either tell users that they’ve left a textbox blank or they’ve entered invalid infor ma tion. With forms labels inside textboxes, these generic error mes sages aren’t enough. When a users fills in a textbox and they get an error mes sage say ing that the infor ma tion 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 cor rect the textbox because they don’t know what the infor ma tion in the textbox applies to. That’s why you should have an error mes sage that spec i fies the entered infor ma tion for each textbox. Sim ply say ing a textbox is invalid won’t help users rec og nize the textbox infor ma tion, and it won’t help them cor rect it. You’ll have to cus tomize each error mes sage to each textbox. When you do, users will be able to cor rect each textbox with out need ing to see the label.

Select ing a textbox and typing.
When users first lay eyes on your textbox labels, they should look gray so that it dif fers from the black text that will show when they type. The labels should go away when users start typ ing, but it shouldn’t go away when the user selects the textbox with their mouse. Instead, the textbox should high light and the label should faintly show to let users know that the label is about to go away when they type. It shouldn’t com pletely go away before the user types because some users will select a textbox and for get what infor ma tion to type in the textbox. Keep ing the label vis i ble until they start typ ing won’t force users to rely on their mem ory to recall the textbox label.

Delet ing infor ma tion and des e lect ing the textbox.
When users delete the textbox infor ma tion and des e lect it, the textbox should go back to its orig i­nal state. This means that the textbox label should show again. Some textboxes will make the label dis ap pear even after the user brings it back to its orig i nal state. The label should reap pear when users delete infor ma tion and des e lect a textbox, so that they can read the label again if they need to.
Putting form labels inside your textboxes comes with many ben e fits as well as chal lenges. When you pull it off, your form will look cleaner, sim pler and leaner than most forms on the web. You’ll impress users with how fast and easy your form is to fill out. But get ting there will take work. This arti cle can’t do the work for you, but it can set you in right direc tion so that when it’s all said and done, you won’t have a thing to worry about.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s