Forms inputs and their labels – oh the tensions. A common problem for laying out a labels and their inputs is that the labels dangle out in what appears to be whitespace. Form labels can make a design aesthetically awkward. There are several paths to solving this, but here I will follow the path of placing the label inside the text input element.
The beginning
Starting at the beginning without doing anything to place the label inside the input element. You will notice below the empty space to the right of the labels. Since so much of that area is empty, it could appear to be whitespace above the input element with a label shoehorned into it.
(Move your mouse over the example to highlight the space.)
Input value as the label
The solution for this (and when space was not permitting) was to make the default value of the input the label text and then hide the label altogether. By applying some Javascript to it, the field blanks out when the user uses the field.
But there is a problem with this for longer forms. The user is filling out the form and moving from field to field by tabbing. They tab into a the next field which causes the Javascript to blank out the text label. If they did not see what the label was before tabbing in, they very may well have no idea what the input element is for. Then they have to click outside to cause the text label to reappear.
Hovering labels that dim
The next solution, that I first saw on the Apple online store's checkout form, moves the label over the input field to appear that it is the text of the input element similar to the previous method. The label dims when the user is using the field but has not entered anything and then when they do the label hides altogether.
This solves the issue above where the user is able to tab into input field and still see the label until they start typing. But it has a new issue. If the user is going back over the field to check it, the inputted value may not make sense without the context of the label. Inputs such as the user's name and address make sense because they recognize the values as their name and address. But not all fields are recognizable without context.
Sliding up labels
Before showing demoing compact-labels, a recap of the issues:
- Awkward placement of the label with extra whitespace
- The label disappears before the user gets to read it
- The label is gone once a value is inputted
Now take a look at the demo.
I think this is a great way to outline this problem. I've never before seen a compilation of methods for handling the labels. Do you plan on converting the forms on your site to do the same thing?
I also like making the demo bounce up and down.
I didn't catch on to what you were writing until I compared the standard label with the sliding up label. The sliding up label looks very user friendly.
I might update the forms here - someday.