Restraint in Forms
Every extra field drops another batch of people who won't finish.
Forms are where products lose the most users. Every time you add a field, ask: is this information truly needed right now? Luke Wroblewski wrote an entire book on form design, and its message is blunt—forms decide the fate of the most critical conversions: signup, checkout, data entry. webform-book
What you'll run into:
- Signup conversion is low, but you can't say which field kills it
- Users quit halfway; when they come back, everything they typed is gone and they start over
- On submit, five errors pop up at once, and none of them says which box is wrong
A good form meets only three requirements: it asks only for necessary information, it makes the next step obvious, and mistakes are easy to fix.
Cut fields first
- Ask field by field: what if they don't fill this in? If the answer is "sales wants to know" or "it might be useful someday," cut it or move it later.
- Don't ask for what you can derive. Guess the city from the IP, look up the industry from the company name, read the source from the link parameters.
- Defer what can be deferred. Let people use the product first, and ask for that information at the exact step where it's needed. Conversion differs dramatically.
- Keep required fields to a minimum. Consider deleting optional fields entirely—a field everyone skips just adds visual noise.
Where the label goes
Label position and alignment directly affect how fast people fill in; all four options have their place:
| Layout | Strength | Cost and fit |
|---|---|---|
| Left label | Clear meaning, saves vertical space | Awkward in narrow mobile layouts. Mostly web |
| Top label | Comfortable alignment, saves horizontal space | Poor use of vertical space. Mostly mobile |
| Inline label | Saves the most space | The label disappears once typing starts; users forget what the box is for. Only for fields-few scenarios like login |
| Left vs right aligned | Left reads faster, right fills faster | The eye path from a right-aligned label to the input is shorter. Right-align in forms you want completed quickly, left-align for reading |
The eye movement for left-aligned labels is roughly 500 milliseconds—far longer than right-aligned. That's why displays read better left-aligned, while forms you want finished fast should be right-aligned.
Handling errors
Forgiveness works across three moments; miss one and users get stuck:
- Before they type: state the format requirement in the label or placeholder, so they don't have to guess.
- While they type: validate instantly what's immediately checkable, like length or required-ness.
- After they type: run a final check on submit, pointing at each wrong field individually.
And mind the timing of inline validation: flagging red while someone is still typing is annoying. Usually, validate after they leave the field.
Five easy wins
- Provide defaults. Preselect the most common option; most people just pass through.
- Autofill and suggestions. Drop-down suggestions for addresses, autocomplete for company names.
- Break long forms into steps. More than ten fields means steps, with a progress bar—don't show it all on one screen.
- Group related fields. Personal info, account info, contact info—each its own group with a small heading.
- Call up the right mobile keyboard. Number pad for phone numbers, an @ key for email. Nearly free, yet many products skip it.
After it ships, judge with three metrics: completion rate, error rate, and time spent. Read them together—a high completion rate with a long fill time means people finished, but grudgingly.