Patterns and Guidelines

Thali now has a text field, a button and an error banner. Yet the partner dashboard's "add a dish" form shows every error at once when you press Save, while the rider sign-up form flags each field in red the moment you start typing. Both teams used the same components. What they did not share was a way of putting them together, or a written rule about it.

The rule

Components are the words; patterns are the sentences; guidelines are the grammar.

A pattern is a proven, reusable solution to a problem users meet again and again. It usually combines several components with behaviour and wording. Examples:

• Form validation: when to check fields, where error messages appear, what happens to the focus.
• Empty state: what a screen shows when there is nothing to show yet.
• Confirming a destructive action: how to stop people losing something by accident.

Here is Tiffinbox's "cancel an order" pattern. A secondary "Cancel order" button opens a dialog that states the consequence ("You won't be charged. The restaurant will stop cooking."). The dialog offers a red "Cancel order" button and a plain "Keep my order" button. After cancelling, a short message confirms it. No single component does all of that; the pattern does.

A guideline is a written rule or piece of advice for using components and patterns well. Good guidelines say when to use something, when not to, and why, and show a "do" and a "don't" example:

• Use one primary button per screen.
• Don't show validation errors while someone is still typing; check a field when they leave it.
• Always give an icon-only button a text label for screen readers.

Patterns are often not code at all. They are recipes, documented with examples, that teams build from components.

The shortcut

Ask "one piece, a recipe, or a rule?" If you can point at one element on the screen, it is a component. If it is how several elements work together to finish a task, it is a pattern. If it is a sentence starting "use…" or "don't…", it is a guideline.

Drills

Answer fast — trust the rule.

Remember

• Components are the words, patterns are the sentences, guidelines are the grammar.
• Shortcut: one piece is a component, a recipe is a pattern, a "use…" or "don't…" sentence is a guideline.
• Trap: shipping components and assuming teams will combine them the same way.