# The Laws of UX — Full Reference

Thirty principles for designing interfaces that fit how people actually think
and perceive. Each entry follows the same shape:

- **In one line** — the principle, plainly.
- **Why it works** — the perceptual or cognitive mechanism underneath it.
- **How to apply it** — concrete moves you can make in a real UI.
- **Where it bites** — the pitfalls and the cases where it backfires.
- **Seen in the wild** — a familiar example.

Read the mechanism and the pitfalls, not just the one-liner. The nuance is
what keeps you from applying a principle where it doesn't belong.

---

## Perception & visual grouping

### Law of Proximity
**In one line:** Things placed close together are read as belonging together.
**Why it works:** The visual system groups by distance before you consciously
read anything. Spacing is interpreted as relationship — gaps mean boundaries.
**How to apply it:**
- Tighten spacing inside a group and widen it between groups; let whitespace do
  the work that borders and lines would otherwise do.
- Keep a label next to the field it describes, not floating between two.
- Put related actions together and separate destructive ones.
**Where it bites:** Inconsistent spacing sends false signals — even spacing
across unrelated items makes everything look like one undifferentiated block.
**Seen in the wild:** A contact card where name, title, and company sit tight
together, clearly one unit, set apart from the next person's card.

### Law of Common Region
**In one line:** Elements inside a shared boundary are perceived as a group.
**Why it works:** A visible container (border, background, card) is an even
stronger grouping cue than proximity — it draws an explicit edge around
"these belong together."
**How to apply it:**
- Wrap related content in a card or panel to make the grouping unmistakable.
- Use a tinted background to bind a section without heavy borders.
- Break a long form into boxed sections so each step reads as its own region.
**Where it bites:** Too many nested containers create visual noise and false
hierarchy; every box competes for attention. Boxes inside boxes inside boxes.
**Seen in the wild:** Settings grouped into bordered cards — "Account,"
"Notifications," "Billing" — each visually sealed off from the rest.

### Law of Similarity
**In one line:** Elements that look alike are assumed to behave alike.
**Why it works:** The eye groups by shared visual traits — color, shape, size,
orientation, motion — and infers shared meaning or function from shared form.
**How to apply it:**
- Give all links one consistent treatment so they're recognizable as links.
- Make every primary button look the same across the product.
- Use a repeated shape or color to signal "these are the same kind of thing."
**Where it bites:** Accidental similarity misleads — styling plain text like a
link, or a non-clickable badge like a button, invites wrong clicks.
**Seen in the wild:** Underlined, colored links that stay visually distinct
from body text everywhere on a site.

### Law of Uniform Connectedness
**In one line:** Elements that are visually connected feel more related than
elements that are merely close or merely similar.
**Why it works:** An explicit connector — a line, a frame, a shared container,
an arrow — is the strongest grouping cue of all, overriding proximity and
similarity.
**How to apply it:**
- Connect steps in a flow with a line so the sequence reads as one process.
- Enclose a label and its control in a single bordered field.
- Use connecting lines in diagrams and org charts to show relationships.
**Where it bites:** Over-connecting clutters; not every relationship needs a
drawn line when spacing would say it quietly.
**Seen in the wild:** A multi-step checkout progress bar with segments joined
by a connecting track.

### Law of Prägnanz (Simplicity)
**In one line:** People read ambiguous or complex forms in the simplest way
they can.
**Why it works:** Simple shapes cost less to process and remember, so the brain
resolves complexity toward order and regularity to avoid overload.
**How to apply it:**
- Prefer clean, recognizable shapes and layouts over ornate ones.
- Reduce the number of distinct visual elements competing for interpretation.
- Design logos and icons that resolve to a simple silhouette.
**Where it bites:** "Simple to look at" isn't "simple to use" — an over-reduced
interface can hide function and force guessing.
**Seen in the wild:** Iconography that reads instantly at small sizes because
each glyph reduces to a clean, single shape.

### Von Restorff Effect (Isolation Effect)
**In one line:** When items are similar, the one that's different is the one
people remember.
**Why it works:** Novelty and contrast grab attention; a break in a pattern is
salient and gets encoded more strongly into memory.
**How to apply it:**
- Make the single most important action visually distinct — the only filled
  button among outlines, for instance.
- Highlight the recommended plan, the new feature, the unread item.
- Use contrast sparingly so the emphasized thing actually stands alone.
**Where it bites:** Emphasize everything and you emphasize nothing. Don't lean
only on color (color-blind and low-vision users miss it), and don't make
highlights look like ads (people tune those out — see Selective Attention).
**Seen in the wild:** A pricing table where one tier gets a colored border and
a "Most popular" ribbon while the others stay plain.

### Selective Attention
**In one line:** People focus on what's relevant to their goal and filter out
the rest — including things you want them to see.
**Why it works:** Attention is a limited spotlight; the brain suppresses
stimuli it judges irrelevant so it can concentrate on the task at hand.
**How to apply it:**
- Put important content in the path of the task, not off to the side.
- Avoid *banner blindness*: don't style real content to look like ads, and
  don't park it in the ad zones (top banner, right rail).
- Avoid *change blindness*: when something updates, make the change obvious —
  motion, a flash, a clear message — since silent changes go unseen.
**Where it bites:** Competing animations and callouts cancel each other out;
too many "look here" signals and the user looks nowhere.
**Seen in the wild:** Users skipping right past a promotional banner because it
sits and looks exactly where ads usually do.

### Aesthetic-Usability Effect
**In one line:** People perceive attractive interfaces as easier to use — and
forgive their flaws.
**Why it works:** Attractive design produces positive affect, and a good mood
makes people more patient, more trusting, and more inclined to believe the
thing works well.
**How to apply it:**
- Invest in visual craft early — type, spacing, color, imagery — because first
  impressions set expectations of quality and competence.
- Use that goodwill to buy patience through unavoidable friction (loading,
  onboarding, edge cases).
**Where it bites:** Polish masks real usability problems. Attractive prototypes
score well in tests even when users fail the actual task, so beauty can hide
defects. Never let "looks finished" stand in for "works." Test tasks, not looks.
**Seen in the wild:** Two apps do the same job at the same speed; the better-
styled one is consistently rated faster and simpler.

---

## Memory & attention

### Miller's Law
**In one line:** The average person holds only about 7 (±2) items in working
memory at once.
**Why it works:** Short-term memory has a hard, small capacity. Group items
into meaningful chunks and each chunk occupies just one of those slots.
**How to apply it:**
- Chunk long strings — phone numbers, card numbers, codes — into groups.
- Keep menus, option sets, and steps within a graspable range.
- Don't force people to remember across screens; show what they need in place.
**Where it bites:** "7" is a rough capacity of *chunks*, not a design rule.
Don't cap navigation at seven items or split content arbitrarily to hit a
magic number — capacity varies by person, familiarity, and context.
**Seen in the wild:** `4155551234` shown as `(415) 555-1234` so it's read and
recalled as three chunks, not ten digits.

### Working Memory
**In one line:** The mental scratchpad that briefly holds and manipulates
information is tiny and fades fast — roughly a handful of chunks, gone in
20–30 seconds if not used.
**Why it works:** Working memory is for active processing, not storage. Brains
are far better at *recognizing* something seen before than *recalling* it cold.
**How to apply it:**
- Favor recognition over recall — show options rather than asking people to
  remember commands, codes, or exact terms.
- Carry context across screens so users don't have to memorize it (order
  summaries, confirmation echoes, comparison tables).
- Mark what's already been seen or done (visited links, completed steps).
**Where it bites:** Wizards that hide earlier answers, or errors that clear the
form, force people to reconstruct state from memory — and they can't.
**Seen in the wild:** A checkout that keeps your cart contents visible beside
the payment form so you never have to hold them in your head.

### Chunking
**In one line:** Break information into meaningful groups and it becomes far
easier to scan, understand, and remember.
**Why it works:** A chunk lets one unit stand in for many items, sidestepping
working memory's item limit and matching how people skim rather than read.
**How to apply it:**
- Structure content into clearly separated blocks with headings and hierarchy.
- Split long forms into labeled sections or steps.
- Group navigation and settings by theme instead of one flat list.
**Where it bites:** Chunks must be *meaningful*. Arbitrary grouping — splitting
by count rather than by relationship — adds structure without adding sense.
**Seen in the wild:** An article broken into headed sections and short
paragraphs so readers can jump to the part they need.

### Serial Position Effect
**In one line:** People best remember the first and last items in a series; the
middle blurs.
**Why it works:** Two effects combine — *primacy* (early items get rehearsed
into longer-term memory) and *recency* (the last items are still fresh in
working memory).
**How to apply it:**
- Put the most important navigation and actions at the start and end of a row
  or list.
- Bury lower-priority items in the middle, where their exact position matters
  least.
- In onboarding, lead with the strongest point and close on a memorable one.
**Where it bites:** Don't overload the ends — cramming too much into "prime"
positions dilutes them.
**Seen in the wild:** App navigation bars that place "Home" first and the
primary action or profile last, with secondary items between.

### Cognitive Load
**In one line:** The total mental effort an interface demands; exceed the user's
budget and they struggle, miss things, and give up.
**Why it works:** Working memory has finite capacity. *Intrinsic* load is the
effort the task itself requires; *extraneous* load is effort wasted on confusing
design that adds nothing to the task.
**How to apply it:**
- Cut extraneous load: remove clutter, redundant choices, jargon, and
  decorative distractions.
- Reduce intrinsic load: break hard tasks into steps, supply defaults, and
  offload memory onto the interface.
- Show only what's needed at each moment; reveal the rest progressively.
**Where it bites:** Not all load is bad — stripping too much can remove the
context and cues people need to build understanding.
**Seen in the wild:** A signup that asks only for email and password up front,
deferring profile details until after the account exists.

### Zeigarnik Effect
**In one line:** People remember and feel pulled toward tasks they've started
but not finished.
**Why it works:** An open task creates a small cognitive tension that keeps it
active in mind until it's resolved — closure relieves the tension.
**How to apply it:**
- Show progress toward completion (profile 60% done, 2 of 5 steps).
- Use clear signifiers of "more" — a peeking next item, a partial reveal — to
  invite continuation.
- Reflect started-but-unfinished states (drafts, incomplete setups) so people
  come back to close them.
**Where it bites:** Manufactured "incomplete" states that never truly finish
feel manipulative and erode trust.
**Seen in the wild:** A profile-completion meter that nudges you to add the
last few details because the unfinished bar keeps bugging you.

### Peak-End Rule
**In one line:** People judge an experience mostly by its most intense moment
and its ending — not the average of every moment.
**Why it works:** Memory compresses experiences into a few salient snapshots.
The emotional peak and the final moment dominate the story people retell.
**How to apply it:**
- Find the moment your product is most delightful or valuable and invest there.
- Design endings deliberately — a clean success state, a warm confirmation, a
  satisfying finish beats trailing off.
- Repair low points, since negative peaks are remembered even more sharply than
  positive ones.
**Where it bites:** A great middle can't save a frustrating finish; a broken
final step colors the whole memory.
**Seen in the wild:** An order flow that ends on a cheerful, well-crafted
confirmation screen rather than a bare "success" message.

---

## Decision-making

### Hick's Law
**In one line:** The more options — and the more complex they are — the longer a
decision takes.
**Why it works:** People mentally sort through choices; time to decide grows
with the number and intricacy of the alternatives.
**How to apply it:**
- Minimize choices where speed matters (checkout, primary actions).
- Break a complex decision into a sequence of smaller ones.
- Surface a recommended default so most people don't have to weigh everything.
- Onboard progressively — reveal complexity only as people are ready for it.
**Where it bites:** Don't simplify into vagueness. Hiding needed options or
over-abstracting a choice trades decision speed for confusion.
**Seen in the wild:** A remote with a handful of clear buttons feels faster to
use than one with fifty, even for the same task.

### Choice Overload
**In one line:** Too many options overwhelm people, worsen their decisions, and
make them more likely to choose nothing.
**Why it works:** Every added option raises comparison effort and the fear of
picking wrong. Past a point, the cost of choosing outweighs a marginally better
match — so people stall or bail.
**How to apply it:**
- Curate to fewer, stronger options; add "recommended" or "most popular."
- Provide defaults so the easy path requires no comparison.
- Enable side-by-side comparison for genuinely competing options (pricing).
- Offer filtering and sorting before dumping the full list on screen.
**Where it bites:** Curate, don't amputate — removing options people genuinely
need is its own failure. Fewer isn't automatically better.
**Seen in the wild:** A tasting table with 24 jams draws a crowd but sells less
than the same table with 6 — more lookers, fewer buyers.

### Cognitive Bias
**In one line:** Systematic errors in judgment that skew how people perceive
and decide, often without their awareness.
**Why it works:** The mind uses shortcuts (heuristics) to decide quickly and
save energy; those shortcuts are usually good enough but predictably wrong in
certain situations.
**How to apply it:**
- Use *anchoring* honestly — the first number sets the reference (show list
  price beside the sale price).
- Respect *defaults* — most people keep them, so defaults are a design decision
  with real consequences (opt-in vs. opt-out).
- Counter *confirmation bias* by surfacing balanced information, not just what
  reinforces a choice.
**Where it bites:** These same levers can slide into manipulation (dark
patterns). Nudging toward the user's interest builds trust; nudging against it
destroys it.
**Seen in the wild:** A struck-through original price beside a lower one — the
anchor makes the new price feel like a deal.

### Occam's Razor
**In one line:** Among designs that work equally well, the simplest — the one
with the fewest elements and assumptions — is best.
**Why it works:** Every element adds cognitive and visual cost. The cheapest
complexity to manage is the complexity you never introduce.
**How to apply it:**
- Question every element: does the design still function without it? If yes,
  cut it.
- Reduce steps, fields, and options to the minimum the task truly requires.
- Consider a design finished only when nothing more can be removed without
  breaking it.
**Where it bites:** Simplicity has a floor (see Tesler's Law). Removing
essential complexity just shifts the burden onto the user in a worse form.
**Seen in the wild:** A search page that's a single field on an empty canvas —
everything non-essential stripped away.

### Pareto Principle (80/20)
**In one line:** Roughly 80% of the effects come from about 20% of the causes.
**Why it works:** Inputs and outputs are rarely evenly distributed; a small
share of features, users, or actions usually drives most of the value.
**How to apply it:**
- Identify the few features and flows people actually use most, and pour effort
  there.
- Don't spend equal polish on rarely used corners of the product.
- Prioritize fixing the small set of issues causing most of the pain.
**Where it bites:** The "vital 20%" still needs the supporting 80% to exist;
the ratio is a guide to *focus*, not a license to abandon everything else.
**Seen in the wild:** A product team shipping deep improvements to the two
screens 90% of users touch daily, before touching rarely visited settings.

---

## Interaction & performance

### Fitts's Law
**In one line:** The time to hit a target depends on how far away it is and how
big it is — closer and bigger is faster.
**Why it works:** Pointing is a motor task; small, distant targets demand more
precision and therefore more time and more misses.
**How to apply it:**
- Make important controls large enough to hit accurately — mind minimum touch
  sizes on mobile (~44px).
- Space targets apart so adjacent ones aren't hit by mistake.
- Exploit screen edges and corners — they're effectively infinite in size
  because the pointer stops there.
- Put frequent actions where the hand or cursor already is.
**Where it bites:** Cramming tiny tap targets together (icon rows, close
buttons beside actions) guarantees mis-taps and frustration.
**Seen in the wild:** A big, thumb-reachable floating action button versus a
tiny link buried in a dense menu.

### Doherty Threshold
**In one line:** Keep system response under ~400ms and people stay engaged and
productive; cross it and attention and satisfaction drop.
**Why it works:** Below roughly 400ms, the interaction feels immediate and the
user keeps momentum; above it, they notice the wait, lose focus, and disengage.
**How to apply it:**
- Respond to input within 400ms wherever you can.
- When real work takes longer, manage *perceived* performance: optimistic UI,
  skeleton screens, instant feedback on tap.
- Use progress indicators for longer waits so the delay feels bounded.
- Occasionally, a deliberate brief delay can signal effort and add perceived
  value (a "searching…" beat before results).
**Where it bites:** Fake progress that stalls, or spinners with no sense of
duration, feel worse than an honest, well-labeled wait.
**Seen in the wild:** A "like" that fills in instantly on tap while the network
request quietly resolves in the background.

### Flow
**In one line:** The state of energized, focused immersion where a person is
fully absorbed in an activity and loses track of friction.
**Why it works:** Flow happens when challenge and skill are balanced — hard
enough to engage, not so hard it frustrates, not so easy it bores — with clear
goals and immediate feedback.
**How to apply it:**
- Give continuous, clear feedback so people always know what happened and
  what's next.
- Remove unnecessary friction and interruptions that break concentration.
- Scale difficulty to the user — gentle for novices, deeper for experts.
- Keep goals and progress visible so momentum has direction.
**Where it bites:** Interruptions (modals, forced tours, surprise dialogs)
shatter flow; too-easy tasks lose people to boredom as surely as too-hard ones.
**Seen in the wild:** A well-paced game or a fast, keyboard-driven tool where
you work for a long stretch without noticing the interface at all.

### Goal-Gradient Effect
**In one line:** Motivation to reach a goal increases the closer you get to it —
people accelerate toward the finish.
**Why it works:** Perceived proximity to a reward raises effort; the remaining
distance feels more worth closing as it shrinks.
**How to apply it:**
- Show progress toward completion and update it visibly as people advance.
- Give a head start — a loyalty card pre-stamped with two of ten feels closer
  to done than a blank one with eight required.
- Break big goals into stages so each finish line stays in sight.
**Where it bites:** Progress that never seems to move, or resets, kills the
momentum it was meant to create.
**Seen in the wild:** A rewards program that grants "bonus" starting progress
so members push harder toward the reward.

### Parkinson's Law
**In one line:** A task expands to fill the time allowed for it.
**Why it works:** Without a tight boundary, effort and duration drift to consume
whatever time is available — so long, open-ended tasks feel even longer.
**How to apply it:**
- Cut the time and steps a task actually requires; shorter flows feel better.
- Use autofill, smart defaults, and saved information to collapse effort
  (address lookup, one-tap payment).
- Set clear expectations so a task feels bounded rather than open-ended.
**Where it bites:** Speeding a task by hiding necessary steps or skipping
confirmation can trade a few saved seconds for a costly mistake.
**Seen in the wild:** Checkout with saved payment and address that finishes in
one tap instead of a multi-minute form.

---

## Expectations & mental models

### Jakob's Law
**In one line:** People spend most of their time on *other* products, so they
expect yours to work the same way those do.
**Why it works:** Users carry expectations built elsewhere and apply them to
you. Meeting convention lets them spend attention on their task instead of
relearning basics.
**How to apply it:**
- Follow established patterns for common things — carts, search, navigation,
  forms — unless you have a strong reason not to.
- Put familiar elements where people expect them (logo top-left links home,
  cart top-right).
- When you must change something, ease the transition and, when possible, let
  people fall back to the familiar version for a while.
**Where it bites:** Novelty for its own sake taxes users. Innovate on your
actual value, not on where the login button lives.
**Seen in the wild:** E-commerce sites that all share cart, product-card, and
checkout conventions, so any of them feels instantly usable.

### Mental Model
**In one line:** People build an internal model of how a system works and expect
it to behave accordingly.
**Why it works:** We compress experience into a working model and apply it to
new but similar situations. When the design matches that model, everything
feels intuitive; when it clashes, everything feels wrong.
**How to apply it:**
- Learn the users' existing model through research — interviews, journey maps,
  observing real use — and design to it.
- Use language, structure, and metaphors that match how users already think
  about the domain.
- Reuse conventions so knowledge transfers in from other products.
**Where it bites:** Your model as the maker rarely matches the user's. Closing
that gap is a core design challenge, not an assumption you can skip.
**Seen in the wild:** A "trash/recycle bin" for deleted files — a metaphor that
maps onto how people already think about throwing things away and recovering
them.

### Paradox of the Active User
**In one line:** People jump straight into using software and never read the
manual — even when reading first would save them time.
**Why it works:** Users are motivated to accomplish their immediate goal, not to
study the tool. They'll accept a slower, trial-and-error path over stopping to
read documentation.
**How to apply it:**
- Teach in context, just in time — tooltips, inline hints, empty states that
  explain themselves — rather than upfront manuals.
- Make the product usable by exploration; the common path should be discoverable
  without instruction.
- Put help where the confusion happens, not buried in a separate docs site.
**Where it bites:** Relying on documentation to fix a confusing UI won't work —
most people never open it. Fix the interface instead.
**Seen in the wild:** A first-run empty state that shows a sample and a single
next action, teaching by doing instead of by a wall of onboarding text.

### Postel's Law (Robustness Principle)
**In one line:** Be liberal in what you accept, and conservative in what you
send.
**Why it works:** People and systems produce messy, varied input. Tolerating
that variation while emitting clean, predictable output makes an interface far
more resilient and forgiving.
**How to apply it:**
- Accept input in whatever reasonable form users offer it — phone numbers with
  or without spaces, dates in common formats, extra whitespace — and normalize
  it for them.
- Anticipate a wide range of actions, devices, and abilities; design for
  flexibility and accessibility.
- Set clear input boundaries and give immediate, helpful feedback when
  something truly can't be accepted.
**Where it bites:** "Liberal" has limits — accepting genuinely invalid data
silently causes downstream errors; validate and guide, don't just swallow.
**Seen in the wild:** A payment field that accepts a card number typed with or
without spaces and formats it as you go.

### Tesler's Law (Conservation of Complexity)
**In one line:** Every system has an irreducible amount of complexity that can't
be designed away — the only question is who absorbs it.
**Why it works:** Some complexity is inherent to the task. If the design doesn't
handle it, the burden lands on the user; it doesn't vanish.
**How to apply it:**
- Take on inherent complexity in the design and engineering so users don't have
  to — smart defaults, automation, sensible assumptions.
- When complexity must surface, expose it gradually and in context rather than
  all at once.
- Decide deliberately which unavoidable complexity the system carries and which
  the user must.
**Where it bites:** Over-simplifying the interface can just push hidden
complexity onto the user in a worse, less visible form. And don't design only
for an idealized rational user — real people behave messily.
**Seen in the wild:** Email "reply-all" logic and address handling that the app
manages quietly, sparing users the underlying routing rules.