Design problem

Complex forms

The form is long, the errors arrive late, and a measurable share of people give up partway through.

How you know you have it

Drop-off concentrates on one or two fields rather than spreading evenly.
Support receives the same correction request every week, which means the form is collecting the wrong thing.
People submit repeatedly to find out what is wrong.
The saved draft does not exist, so a mistimed refresh costs everything.

Fields accumulate because somebody once wanted the data. Each one is cheap to add and expensive in aggregate.

Errors that appear on keystroke, disappear on blur, or summarise at the top without moving focus all add work instead of removing it.

Password rules, formats and limits revealed only on failure. The reader is asked to guess and then corrected.

Form failures cluster into three causes: the wrong fields, the wrong validation timing, and the wrong words. Each has its own set of entries.

The mechanism underneath the symptom. Read these when the fix needs justifying to somebody else.

Tesler's Law
Every system has irreducible complexity. The only question is whether the user absorbs it or the product does.
LawCraft convention
Postel's Law
Be liberal in what you accept and conservative in what you send, which for interfaces means accepting messy input and returning clean output.
LawCraft convention
Cognitive Load
Working memory is a narrow channel, and interfaces spend it on three kinds of work, only one of which is useful.
PsychologyEstablished research
Error Prevention
Better than a good error message is a design in which the error cannot occur.
HeuristicExpert heuristic
Parkinson's Law
Work expands to fill the time available, which is why open-ended tasks in an interface tend to sprawl.
LawCraft convention
Zeigarnik Effect
Unfinished tasks stay mentally active, which is why visible progress pulls people back to complete them.
LawMixed evidence

The visual and structural levers that produce or relieve this problem.

Proximity
Things placed close together are read as belonging together, before anything is read.
UI foundationEstablished research
Alignment
Shared edges create invisible lines that organise a layout and make it feel deliberate.
UI foundationCraft convention
Common Region
A shared boundary or background binds elements together more strongly than proximity does.
UI foundationEstablished research
Whitespace
Empty space is a design element that groups, emphasises and sets pace, not leftover area.
UI foundationCraft convention

Recognised solutions, with the conditions under which each earns its place.

Input Validation
Checking input at the right moment, which is rarely while the user is still typing.
PatternExpert heuristic
Multi-Step Flows
Breaking a long task into steps, which reduces per-screen load but adds navigation cost and abandonment points.
PatternCraft convention
Progressive Disclosure
Show the common case first and reveal the rest on request, so complexity is available without being present.
PrincipleExpert heuristic
Autocomplete and Typeahead
Suggestions as the user types, which turns recall into recognition when it is fast enough.
PatternCraft convention

States, behaviour and the accessibility contract you will need to specify.

Text Input
Free-form entry, where the label, the hint and the error placement do most of the work.
ComponentCraft convention
Select
Choosing one option from a known set, which is the wrong control below about five options.
ComponentCraft convention
Checkbox
Independent on or off choices, where the label is part of the target.
ComponentCraft convention
Date Picker
One of the hardest components to get right, and one where typing is often faster than picking.
ComponentCraft convention
Button
Triggers an action. If it navigates somewhere, it should be a link instead.
ComponentCraft convention

Where the words carry more of the fix than the layout does.

Error Messages
Say what happened, why if you know, and what to do next, in that order and in plain language.
UX writingExpert heuristic
Microcopy
The small pieces of text that do most of the work: labels, hints, empty states, errors and confirmations.
UX writingCraft convention

The requirements this problem raises, mapped to the decisions that produce them.

Labels and Instructions
Every input needs a persistent label, and format requirements must be stated before the user types.
AccessibilityCraft convention
Error Identification and Suggestion
Errors must be identified in text, described specifically, and accompanied by a suggested fix where one is known.
AccessibilityCraft convention
Focus Management
Deliberately moving focus when the interface changes, so keyboard and screen reader users are not stranded.
AccessibilityCraft convention
Target Size
Interactive targets need to be large enough and spaced enough to hit reliably.
AccessibilityCraft convention

Methods suited to confirming the cause before you commit to a fix.

Usability Testing
Watching people attempt real tasks, which is the most direct evidence available about whether a design works.
Research methodEstablished research
Funnel Analysis
Measuring progression through a sequence, where the largest drop is rarely the biggest opportunity.
Research methodCraft convention

Interactive review passes, with progress saved in your browser.

Form UX Checklist
A review pass for any form, covering structure, labelling, validation, errors and accessibility.
ChecklistExpert heuristic
Accessibility Checklist
A practical WCAG 2.2 AA review pass, ordered so the checks that find the most problems come first.
ChecklistCraft convention

Worked cases, including the options that were rejected.

One Long Form or Several Short Steps
Splitting a long form into steps did not raise completion until the team also saved progress and let people come back.
Case studyCraft convention
Whether to Require an Account at Checkout
A retailer required registration before purchase to build its customer database, and lost the sales it was trying to capture data about.
Case studyCraft convention

The same material, organised around the surface you are building rather than the symptom you are fixing.