Form Design & Validation UX

The plain-language idea

A form is the part of a product where a user does the most work and gets the least patience for friction. Most form UX problems aren't about accessibility compliance (covered elsewhere in this track) — they're judgment calls about timing and layout that WCAG doesn't specify.

Validation timing is the biggest one. Three options, not equally good:

• Validating while the user is still typing (marking a field invalid before they've finished) is a real, common anti-pattern — an email field turning red after the third character because it doesn't yet contain an @ punishes the user for a state that's still in progress, not actually wrong.
• Validating on blur (when the user leaves the field) is usually the right default — the user has declared "I'm done with this one," so feedback at that moment is timely instead of premature.
• Validating only on submit is too late for anything the user could have fixed earlier — a 12-field form that reveals all its problems only after submission forces a user to scroll back through everything at once instead of catching issues as they went.

The practical rule: validate on blur for most fields, and re-validate immediately on every keystroke after the first error has been shown for that field — so a corrected field clears its error the moment it's actually fixed, not after another full blur cycle.

See it in a real thing: the floating label's hidden cost

A floating label starts centered inside the input as placeholder-like text, then animates up into a small caption above the field once the user types. It looks clean empty — but once a field has a value, the shrunk label is competing for the same visual space the entered text used to have room in, and on a dense multi-field form that shrinking motion happening across several fields at once reads as noisy rather than elegant. A persistent label above the field, present before and after typing, costs a little vertical space but never has this problem.

Layout research on real forms is consistent on one point: single-column layout completes faster and with fewer errors than multi-column, because a user's eye follows one straight vertical path instead of deciding, at every field, whether the next one is below or to the right. Multi-column layout is occasionally justified for genuinely paired fields (city / state / zip) where the visual grouping itself communicates the relationship — but it's the exception, not a space-saving default.

What people usually miss

Watch out

• Validating too early is worse than validating too late for any single keystroke. A red border appearing while a user is mid-word interrupts a task they haven't finished — the fix isn't "never show errors early," it's "wait for a natural pause point" (blur), then react live once an error already exists.
• A floating label's clean empty state is not the state most users spend time looking at. Design review often happens on the empty form; real usage happens on the filled one — evaluate the label at both states, not just the prettier one.
• Single-column isn't a stylistic minimalism choice — it measurably reduces completion time and error rate in real usability research, which is why it's the default and multi-column needs a specific justification, not the reverse.
• A required-field asterisk with no legend, or a field disabled with no explanation of why, both fail the same underlying test as a bad error message: the user can see something is wrong but not what to do about it.

Why this matters in interviews

"How would you improve this signup form" is one of the most common practical UX interview prompts, and validation timing is the single most reliable signal in the answer — a candidate who says "validate on blur, not on every keystroke" is demonstrating real hands-on form experience in a way that's hard to fake from theory alone.