What is label placement in UX design?
Label placement refers to the positioning of text labels relative to their associated input fields in a form. The three main options are top-aligned, where the label appears above the input; left-aligned, where the label appears to the left of the input on the same line; and inline or floating, where the label appears inside the input field and moves when the user starts typing. The choice of label placement affects how quickly users can fill out the form, how many errors they make, and how well the form works across different screen sizes.
Why do top-aligned labels perform best?
Top-aligned labels consistently outperform alternatives in usability research by the Nielsen Norman Group and others. The label and its input are vertically adjacent, requiring only a single short eye movement to associate them. Users can scan down the left edge of the form reading labels without needing to look right to find the corresponding input. Top-aligned labels also accommodate long label text without truncation, since the label has the full width of the form available. They adapt naturally to different screen sizes and scale without layout changes. The only disadvantage of top-aligned labels is that forms take more vertical space than left-aligned or inline alternatives.
What are the problems with inline and floating labels?
Inline or floating labels, where the label starts inside the input field and floats above it when the user types, create several usability problems. The label is inside the input, making the field look pre-filled before the user types, which can cause users to skip it. When the user begins typing, the floating label moves, creating visual disruption and requiring users to track a moving element. Users who want to review what a field requires after typing must look at the floated label above the field rather than inside it, breaking the spatial proximity that makes labels useful. Placeholder text inside fields that disappears on typing has similar problems and should never replace persistent visible labels.