Float Label Pattern – Building Better Interfaces

Float Label Pattern

The Float Label Pattern was originally conceived by Matt D. Smith, where he needed to solve the issue of input field labels and space issues on mobile forms.  … the Float Label Interaction, which combines the idea of using both placeholder text and a label to identify form fields.

The challenge with form field labels on mobile devices is that they take up a lot of space.  If you left align a label, the input field would have limited horizontal length, and a top aligned label would increase the vertical length of the page. Using placeholders (or inline labels) does not completely solve the problem either, once they the placeholder disappears the user will lose the defining context around the input field.

In Mobile Form Usability: Never Use Inline Labels, Jamie Appleseed has a detailed study of the usability problems with inline labels.

The Float Label Interaction proposed by Matt, is a compromise between field label visibility and maximizing the space available.

Floating the label element over an empty input field defines the input expected, upon user input the label is shrunk and placed above the input.  This pattern allows the user never to lose context around the input field, while allowing the form to maximize the space of the viewable screen area.

Curated by (Lifekludger)
Read full article at Source: Float Label Pattern – Building Better Interfaces