Forms are where the most real business value is won or lost — a signup, a checkout, a lead capture — and where small design mistakes cost the most in actual abandoned conversions.
| Rule | Why it works |
|---|---|
| Labels above fields, not inside them as placeholder-only text | A label that disappears on typing (placeholder-as-label) means the user forgets what field they're in |
| Ask for only what's actually needed | Every extra field is a chance to abandon — a shorter form consistently converts better |
| One column, not multi-column layouts | A single vertical flow is read and completed faster than the eye jumping between columns |
| Group related fields visually | Address fields together, payment fields together — reduces perceived complexity |
| Match input type to the data | A numeric keypad for a phone number field, not a full keyboard — small friction, real impact at scale |
| Approach | What happens | Verdict |
|---|---|---|
| On submit only | All errors appear at once after clicking submit | Frustrating — forces a second pass through the whole form |
| On every keystroke | Errors appear while still typing, even mid-word | Also frustrating — flags "invalid email" before the user has finished typing it |
| On field blur (leaving the field) | Errors appear once the user moves to the next field | The best default — timely without being premature |
"Invalid input" tells a user nothing useful. "Password must be at least 8 characters" tells them exactly what to fix. The difference in wording is small; the difference in whether the user succeeds on the next attempt is large.
A small, often-missed detail
Mark optional fields as "(optional)" rather than marking every required field with an asterisk — in a form where most fields are required, that's less visual noise for the same information.