Error prevention

Removing chances to make a mistake before it happens, instead of accepting the bad action and explaining the damage afterward.

stop users making mistakesmake the wrong option impossiblegrey out invalid choicescatch it before they submitdon't let me delete the wrong thingprevent errors instead of showing messageserror proventionmake it so I can't screw this upwhy did it let me submit that

See it

Live demo coming soon

What it is

Error prevention is Nielsen's fifth usability heuristic: remove error-prone conditions or check for them before the user commits. A date picker blocks impossible dates, a quantity control respects available stock, sensible defaults remove needless typing, and an undoable delete turns a permanent mistake into a recoverable one. Factories got there first: poka-yoke, Shigeo Shingo's term from Toyota, is the jig that only lets the part in the right way round, so the worker cannot fit it backwards even while distracted.

Start with constraints for rules the system truly knows, then use specific confirmation for rare, high-cost actions. Native input types, min and max values, finite selects, previews, and clear distinctions between destructive and routine actions prevent more trouble than a polished error banner after submit.

Gotcha: an invented constraint is its own error. Names, addresses, and other human data rarely fit a clever regular expression, and disabled controls with no reason leave people stranded. Constrain only what is actually impossible, explain unavailable choices in visible text, and keep recovery for the cases prevention cannot cover.

Ask AI for it

Rework this checkout form around error prevention. Use native HTML input types and the Constraint Validation API: set required, min, max, minlength, maxlength, and autocomplete only where the business rule is certain; constrain quantity to current stock; and use a select for finite shipping methods. Do not reject names or addresses with a custom regular expression. Before the final payment request, show the exact items, delivery address, and total, label the button 'Pay $TOTAL', and keep a visible explanation beside every unavailable option.

You might have meant

guardrails constrained inputinline validationdestructive action confirmationforgiving formaterror recovery