Cognitive & UX Laws

These laws are the shared vocabulary of interface design, not academic trivia. Each one names a specific way human perception and memory work, and each predicts a specific failure when you design against it. They are most useful in two moments: diagnosing why something "feels off" (see design-process.md — Debugging "This Feels Off"), and justifying a decision with a reason instead of a preference.

Treat them as lenses, not rules. They frequently pull in opposite directions: Hick says offer fewer choices, completeness says offer the ones users need. The value is naming the forces so you can weigh them on purpose rather than by accident. The final section covers reconciling them.

Apply the B.I.A.S. Loop

Use the B.I.A.S. loop to diagnose where an interaction breaks down:

Stored information changes how the next loop begins. Repeated useful loops build familiarity; repeated negative loops make people filter more aggressively and abandon sooner.

Block: Pass Attention Filters

When important information is ignored, check whether it appears high-effort, unrelated to the current goal, redundant, advertising-like, or poorly timed. These qualities cause people to filter a message before interpreting it.

Information is more likely to pass when it connects to a recent thought, an existing belief, the person's current context, or a genuinely useful surprise. Audit the first few seconds of the screen: what gets noticed, what looks demanding, what repetition has made invisible, and whether the timing matches the user's behavior.

Unexpectedness must reveal value. A screen where every element breaks the pattern creates noise, not attention.

Interpret: Establish the Right Frame

When users notice information but misunderstand it, improve the frame rather than increasing emphasis:

• Familiarity: reuse patterns and language the user already understands.
• Cognitive load: remove visual and verbal noise around critical information.
• Benefits: explain the outcome in terms of the user's motivation, not a feature list.
• Anchoring: give a relevant comparison when something cannot be evaluated alone.
• Loss aversion: describe real consequences without inventing loss or fear.
• Discoverability: keep the important action and current state visible.
• Labor illusion: when waiting is necessary, show real progress or work performed for the user.

Framing is powerful enough to manipulate. Comparisons must be relevant, consequences real, and visible progress tied to actual work.

Hick's Law

Decision time grows with the number and complexity of choices. Every option you add to a screen taxes every user who has to scan past it, even the ones who don't pick it.

• Keep visible actions to roughly 3 to 5; push the rest into menus, "More" affordances, or progressive disclosure.
• Cap filters and options at a scannable number (around 4 visible at once); group or collapse the rest.
• One clear primary action beats five equal ones (see ui/hierarchy.md — the three-level action hierarchy).

The fix for an overwhelming screen is usually subtraction, not reorganization. When in doubt, reveal complexity progressively (see forms.md — Progressive Disclosure).

Miller's Law (7±2)

Working memory holds only about 7±2 items at once. Lists, menus, and groups longer than that force the user to reload context, which feels like work.

• Chunk information into 3 to 4 groups of 2 to 3 items rather than one flat list of 7+ (see ui/layout-spacing.md — Spacing Expresses Relationships, and Gestalt Principles below).
• Paginate, virtualize, or group anything past the limit instead of dumping it all in one scroll.
• Keep tab strips to around 5; past that, the user can't hold the set in their head (see navigation.md — Secondary Navigation).

Miller is about unaided memory. Grouping and external structure (headings, chips, sections) are how you let the user exceed the limit without paying for it.

Fitts's Law

The time to hit a target depends on its size and its distance: bigger and closer is faster, smaller and farther is slower and error-prone.

• Size interactive targets generously: at least 44×44px on touch, 24×24px minimum on pointer (see interactions.md — Minimum Sizes, Hit Area Expansion).
• Put frequent actions where the cursor or thumb already is; screen edges and corners are "infinitely large" targets because the pointer stops there.
• Keep destructive actions far from frequent ones. A Delete sitting next to a Save invites the misclick Fitts predicts (see ui/hierarchy.md — destructive action hierarchy, interactions.md — Confirm Destructive Actions).

Jakob's Law

Users spend most of their time on other products, so they expect yours to work like the ones they already know. Familiar conventions are free usability; novelty is a tax the user pays in confusion.

• Reuse established patterns for common jobs (a cart, a search box, a settings page) rather than inventing. Recognition beats learning.
• Put things where users expect them: logo top-left links home, primary nav along the top or side, account controls top-right.

The tension: ui/polish.md — Think Outside the Box argues for challenging convention, and that's right too. Reconcile by defaulting to the convention and breaking it only deliberately, for a real user benefit, never by accident (see interaction-patterns.md — the right pattern is usually a known one). Convention is the baseline; deviation must earn its cost.

Von Restorff Effect (Isolation Effect)

The element that differs from its peers is the one that gets noticed and remembered. If everything is emphasized, nothing is.

• Make the single primary action visually distinct: one high-contrast button, not a row of equally loud ones (see ui/hierarchy.md — Emphasize by De-emphasizing).
• Use distinction sparingly and intentionally. The more elements compete for "look at me," the weaker each claim becomes.
• This is why de-emphasizing the competition often works better than amplifying the thing you want seen.

Serial Position Effect

People remember the first and last items in a sequence better than the middle. Position carries weight independent of content.

• Place the most important navigation items and actions at the start or end of a list, not buried in the middle.
• In a long menu, the top and bottom are prime real estate; the sag is in the center.
• Applies to onboarding steps, nav items, and any ordered set the user has to recall later.

Peak-End Rule

People judge an experience by its most intense moment (the peak) and how it ended, not by the average of every moment. A flow with one great moment and a clean finish is remembered as great.

• Invest in the peak: the first real moment of value is worth disproportionate polish (see onboarding.md — Time to First Value).
• Invest in the end: the final confirmation, the success state, the "done" moment shapes the whole memory (see notifications.md — inline/success feedback).
• A rough middle is forgivable; a rough ending colors everything before it. Don't let the last step be the sloppy one.

Doherty Threshold

When the system responds in under about 400ms, the interaction feels conversational and the user stays in flow. Past that, attention drifts and the wait becomes visible.

• Keep perceived response under ~400ms. When the real work is slower, mask it: optimistic updates, skeletons, and immediate acknowledgement buy the time (see interactions.md — Optimistic Updates, Choosing a Loading Pattern).
• Acknowledge instantly even when the result isn't ready. A pressed state or a spinner within the threshold preserves the sense of responsiveness (see interactions.md — Honest Loading States).
• Speed is a feature. Perceived performance often matters more than actual throughput.

Goal-Gradient Effect

Motivation increases as people get closer to a goal; they accelerate toward the finish. Visible progress is fuel.

• Show progress concretely in multi-step flows: a stepper, a progress bar, "2 of 4" (see interaction-patterns.md — Wizard & Stepper, onboarding.md — Setup Checklists).
• A pre-filled head start (the classic "stamp 2 of 10 already punched") pulls users forward more than a blank slate.
• Don't hide how far along the user is in a long task; the sense of nearing completion is what carries them through the end.

Zeigarnik Effect

Unfinished tasks occupy the mind more than completed ones. The open loop nags, which you can use to draw attention or to relieve it.

• Surface incompleteness where action is wanted: "3 pending," "2 unread," an incomplete-profile nudge (see notifications.md — Badges & Counts).
• A setup checklist works partly because the unchecked items pull at the user (see onboarding.md — Setup Checklists).
• The flip side: too many open loops create anxiety. Let users close loops cleanly, and don't manufacture incompleteness just to nag.

Tesler's Law (Conservation of Complexity)

Every process has an irreducible amount of complexity that cannot be designed away, only moved. The question is who absorbs it: the user, or the system.

• Distinguish intrinsic complexity (the problem is genuinely hard) from accidental complexity (the design made it harder). Cut the accidental ruthlessly; absorb the intrinsic into the product so the user doesn't carry it (see design-process.md — Don't Design Too Much).
• Smart defaults, inference, and automation are how the system takes on complexity the user would otherwise bear.
• You can't make the irreducible part vanish, but you can decide it lives in your code instead of the user's head.

Postel's Law (Robustness Principle)

Be liberal in what you accept, conservative in what you produce. Forgive messy input; emit clean output.

• Accept input in whatever shape the user naturally provides, then normalize it: trim whitespace, accept phone numbers with or without spaces, fix obvious casing (see forms.md — Trim Input Values, Don't Block Typing).
• Never block keystrokes to enforce a format; accept and validate, showing feedback rather than rejecting input silently (see forms.md).
• Produce canonical, consistent output regardless of how varied the input was. The user should never have to format things for the machine.

Aesthetic-Usability Effect

People perceive beautiful interfaces as more usable, and forgive minor usability problems in them. Polish is not cosmetic; it builds trust and buys goodwill.

• Visual craft signals care, and users extend that perceived care to the product's reliability (see ui/polish.md).
• This is not license to prioritize looks over function. It means polish and usability compound: a well-crafted interface is judged more usable, and that perception is real value.
• The risk: beauty can mask real usability flaws in testing, because users blame themselves. Don't let a pretty surface hide a broken flow.

Gestalt Principles

The eye automatically groups elements by perceptual rules, before conscious thought. Layout speaks through these whether you intend it or not.

• Proximity: things placed close together read as related. This is the strongest grouping signal, which is why internal spacing must be tighter than external (see ui/layout-spacing.md — Spacing Expresses Relationships). It also decides what a control appears to act on: a control beside an object it does not change is read as that object's control, and the label rarely corrects the impression (see ui/layout-spacing.md — Put a Control Beside What It Changes).
• Similarity: elements that look alike (same color, shape, size) read as the same kind of thing. Consistent styling tells the user "these belong together."
• Continuity: the eye follows lines and alignment; aligned elements feel connected and ordered.
• Closure: the mind completes implied shapes, so you don't need a full border to suggest a group.
• Figure-ground: the user separates foreground from background; clear contrast tells them what's content and what's surface (see ui/depth-and-surfaces.md).

When grouping feels wrong, it's usually a Gestalt conflict: proximity says one thing while similarity says another.

Cognitive Load

Working memory is finite, and every element, choice, and piece of jargon spends some of it. Beyond a point, the interface stops being usable not because it's wrong but because it's too much at once.

• Reveal progressively: show what's needed now, surface the rest as the user reaches for it (see forms.md — Progressive Disclosure, onboarding.md — Progressive Onboarding).
• Reduce extraneous load: cut jargon, redundant options, and decorative noise that competes with the task.
• Lean on recognition over recall (Jakob, Miller): let users pick from what's shown rather than remember what to type.

Processing Fluency

The easier something is to process, the more familiar, pleasant, and credible it feels. Fluent interfaces and copy get trusted; effortful ones get abandoned, even when the content is correct.

• Less is more. Removing is harder than adding, so it gets skipped, especially when an agent can generate more in seconds. Default to subtraction: before adding an element, a sentence, or a screen, ask whether it makes the outcome better or just bigger.
• Respect the reader's budget. AI makes it trivial to produce walls of text and options no human will read. Write the fewest words that carry the meaning; cut, then cut again.
• Simplicity comes from understanding, not absence. Knowing what to leave out (and what not to build at all) requires understanding the problem deeply, which is the judgement that makes an experience feel considered.

Reference Dependence

People never judge a number on its own; they judge it against a reference point: what it cost, what the alternative offers, what they had before. A figure shown without its reference is not information, it is homework, and users faced with homework either skip the math or assume it does not favor them.

The failure is sharpest at decision moments. A subscription cancellation screen that announces "you've saved $126" without showing what the membership cost hands the user an arithmetic problem right as they are deciding to leave. Unable or unwilling to solve it, most conclude the math is against them and cancel anyway. The number meant to retain them did nothing, because it had no reference to be judged against.

• Do the math for the user. Show the net outcome, not the raw figure: "you're ahead $52 this year" persuades; "you saved $126" next to an unstated cost does not. Pair every consequential number with its reference (the cost, the previous period, the alternative), and keep both sides in the same timeframe and unit; "$126 saved over two years" against a monthly price is still homework.
• Frame the comparison at the decision point. On cancel, renew, and upgrade screens, put cost and benefit side by side so the choice is a reading task, not an arithmetic one. People take the path of least resistance, and unresolved math is resistance (see behavior-change.md).
• When the math doesn't favor the user, say so gracefully. Offer an honest exit (a refund of the last period where the user is eligible) or an honest path to break-even ("one more order and the membership pays for itself"). Hiding the reference point to trap someone is a dark pattern, and the trust it burns outlasts the subscription it saves (see anti-patterns.md).
• Set reference points deliberately everywhere numbers appear. A crossed-out original price, a "most popular" plan, and progress framed as "1 step left" versus "3 of 4 done" all choose the reference the user judges against. Choose it consciously; an accidental reference frames the number anyway, just not in your favor (see microcopy.md).

Using the Laws Together

The laws are diagnostic and generative, not a checklist to satisfy one by one.

• To diagnose: when something feels off, name the law it violates. A wobbly, hard-to-scan list is often a Gestalt or Miller problem; a sluggish feel is Doherty; an ignored primary action is Von Restorff.
• To justify: "fewer filters here" lands better as "Hick's Law: each filter taxes every user" than as a preference.
• They conflict, and that's the point. Hick wants fewer options; the task may need several. Zeigarnik says surface open loops; too many create anxiety. Aesthetic-Usability rewards polish; Tesler warns it can hide broken flows. There is no formula. The laws name the competing forces so you can weigh them deliberately and explain the trade you made.

Checklist

Choice & memory

• Visible actions kept to ~3-5 (Hick); one clear primary (Von Restorff)
• Lists/menus/tabs chunked or paginated past ~7 (Miller)
• Critical items at start/end of sequences, not the middle (Serial Position)
• Important information passes attention filters without advertising-like noise
• Framing uses familiar language, honest comparisons, and real consequences

Targets & speed

• Targets ≥ 44px touch / 24px pointer; destructive actions kept far from frequent ones (Fitts)
• Perceived response under ~400ms, masked with optimistic/skeleton when slower (Doherty)

Motivation & grouping

• Progress shown in multi-step flows (Goal-Gradient); open loops surfaced where action is wanted (Zeigarnik)
• Peak and end of the experience deliberately polished (Peak-End)
• Grouping reads correctly via proximity/similarity/alignment (Gestalt)
• Each control sits with the object it changes, and reads that way with the labels covered (Gestalt)

Convention & complexity

• Familiar conventions used by default, broken only intentionally (Jakob)
• Input accepted liberally and normalized; output canonical (Postel)
• Intrinsic complexity absorbed by the system, accidental complexity cut (Tesler)
• Complexity revealed progressively, jargon and noise reduced (Cognitive Load)
• Nothing added that does not improve the outcome; copy and options cut to the fewest a human will read (Processing Fluency)
• Polish treated as trust-building, not a mask for broken flows (Aesthetic-Usability)

Numbers & framing

• Every consequential number paired with its reference point; the interface does the math, not the user (Reference Dependence)
• Cancel/renew/upgrade screens show cost and benefit side by side; unfavorable math handled honestly, never hidden (Reference Dependence)