Constraints

What are constraints in design?

Constraints are limits the design builds in to rule out the wrong actions, so the easy path is the correct one. Instead of telling people what to do and hoping, you remove the ability to do the wrong thing - a connector that only fits one way, a field that won't accept letters, a "submit" that stays disabled until the form is valid - so whole classes of error simply can't happen.

Also known as: constraints, design constraints, forcing constraints

Prefer to watch? Watch the recap 0:50

The demo

A tiny "book a delivery" form. First with plain text boxes you can put anything into - then with the wrong answers designed out. Try to break each one.

What this demo shows (text version)

A short delivery form asks for a date and a quantity. In "free text" mode both are open text boxes, so you can type an impossible date (the 40th, or last week), put letters where a number belongs, and still press submit - the wrong states are all reachable and have to be caught afterwards with error messages. In "constrained" mode the date is a picker that disables past and blocked days, the quantity is a stepper bounded to a sensible range, and submit stays disabled until both are valid, so the bad inputs simply can't be entered.

The point is that constraints prevent errors by limiting what's possible, which is far stronger than validating after the fact. Designing the wrong actions out - physically, logically or by convention - means whole classes of mistake never occur, and the easy path becomes the correct one.

The most reliable way to prevent an error is to make it impossible, not to warn against it. Constraints do that by limiting what can be done: physical (a shape that only fits one way), logical (the remaining option must be the right one), cultural and semantic (conventions everyone reads the same way). Lean on constraints before instructions - a control people can't misuse beats a label begging them not to.

Norman groups constraints into four kinds. Physical constraints limit possible actions through shape and size (a USB-A plug, a key that only fits one way). Logical constraints use reasoning - if three of four parts are placed, the last one's position is determined. Cultural constraints rely on learned conventions (red means stop), and semantic constraints rely on the meaning of the situation (a motorbike rider must face forward). Together they shrink the space of plausible actions toward the right one.

On screen, constraints are how you prevent errors instead of merely catching them: input types and masks that reject impossible values, date pickers that disable unavailable days, steppers and sliders bounded to valid ranges, disabled actions until preconditions are met, and dropdowns that only offer legal choices. Each one removes a way to go wrong, which is far stronger than validating after the fact.

Constraints trade flexibility for safety, so the art is constraining the genuinely wrong without blocking the legitimately unusual - a date picker that won't let you book the past is helpful; one that won't let you enter your real (awkward) address is not. Used well, constraints work with error prevention and forgiving formats so the interface guides the hand without the user ever feeling boxed in.