Twenty-four UX laws, each one runnable in thirty seconds.
Broken on the left, fixed on the right — both interactive. Open Apply it for the engineer's takeaway. Based on lawsofux.com.
Chapters
Set the tone
First impressions and shared expectations. Get these right and the user lends you their patience for everything else.
Aesthetic–Usability Effect
Users perceive aesthetically pleasing designs as more usable. A polished UI is forgiven its rough edges.
Apply it
- Spend the extra 30 minutes on spacing, type hierarchy, and a real button style — it pays back as forgiveness for slow API calls and odd edge cases.
- Use design tokens (e.g.
--space-1..6,--radius-sm/md/lg) so polish is the default, not opt-in. - Don't use this as an excuse to skip usability testing — pretty doesn't fix unusable, it only buys patience.
Jakob's Law
Users spend most of their time on other sites and expect yours to work like the ones they already know.
Apply it
- Logo top-left links home. Cart top-right. Underline links.
Cmd+Kopens search. Don't reinvent these. - Match platform conventions — iOS back-swipes from the left edge, web users expect the browser back button to work.
- Save your novelty budget for the differentiated feature, not the navigation.
Mental Model
Users have a learned model of how the world works. Friction is the gap between your system and that model.
Apply it
- Reach for native HTML before
<div role="…">— it brings keyboard, focus, AT, and form semantics for free. - If you must build a custom control, read the ARIA Authoring Practices for that pattern. Match its keyboard map exactly.
- "Trash" should empty. "Save" should persist. Don't be clever with verbs.
Postel's Law
Be conservative in what you do, liberal in what you accept. Forgive imperfect input; produce strict, predictable output.
Apply it
- Strip and normalize on submit, don't reject on type. Phone:
v.replace(/\D/g,''). Email:.trim().toLowerCase(). - Accept dates in any reasonable form (
"tomorrow","3/4","2026-03-04") — chrono-node and friends exist. - Validate on blur, not on every keystroke. Show errors only after the user signals "I'm done with this field".
Reduce friction
Every choice, field, and click is a tax on attention. Spend that budget on what matters.
Hick's Law
Decision time grows with the number and complexity of choices. More options = slower (and worse) decisions.
Apply it
- Cap top-level choices at
~5±2. Hide the long tail behind"More", search, or a settings page. - Highlight a default ("Recommended", "Most popular") — it converts indecision into action.
- Progressive disclosure: don't show the 47 advanced flags until the user proves they want them.
Occam's Razor
Among equivalent designs, the one with the fewest elements wins. Every added element is a tax.
Apply it
- For every UI element, ask "what breaks if we delete this?" If nothing breaks, delete it.
- Default to one primary action per screen. Secondary actions get muted styling. Everything else hides in a menu.
- Beware "just one more option" — feature creep is mostly a UI debt problem, not a code one.
Pareto Principle (80/20)
Roughly 80% of effects come from 20% of causes. Most of your users only use a small fraction of your features.
Apply it
- Instrument feature usage. Look at your funnel: 80% of clicks usually hit 2–3 buttons. Optimize those mercilessly.
- Don't waste design budget polishing rarely-used admin screens. Polish the homepage, the search box, the checkout.
- Aggregate the long tail: combine 30 rarely-used controls into a single "Advanced" panel.
Parkinson's Law
Work expands to fill the time available. The same is true of forms, settings, and any UI that doesn't enforce defaults.
Apply it
- Default everything that has a sensible default. Country from IP. Currency from locale. Name from session.
- Smart inputs:
autocomplete,inputmode, address autocomplete APIs, Apple/Google Pay sheets. - Audit forms quarterly: every field needs to justify its existence. "Could be useful" is not enough.
Tesler's Law (Conservation of Complexity)
Every process has irreducible complexity. The question is who absorbs it: the user, the designer, or the engineer.
Apply it
- When you're tempted to add a field, ask: can the server figure this out? Locale, currency, timezone, plan-from-email-domain.
- Smart defaults > more options. The "best" UX is the one where the user's only decision is the irreducible one.
- If complexity must surface, surface it once — don't sprinkle the same question across 4 screens.
Group and signal
The eye groups before it reads. Use distance, borders, shape, and contrast to do half the work for free.
Law of Common Region
Items inside the same bounded region (a card, a box) are perceived as related, even if spacing alone doesn't group them.
Apply it
- Wrap each logical record in a bordered/backgrounded container. CSS:
border-radius+borderor subtlebackground. - Don't lean on whitespace alone for grouping when the content varies in length — borders survive ragged edges.
- Conversely, don't wrap atoms that aren't a unit (e.g. don't card-ify single labels).
Law of Proximity
Objects placed close together appear related. Distance implies separation regardless of style.
Apply it
- Halve spacing within a group, double it between groups. The "8/16/32 rule" works:
gap:8inside,32between sections. - If users repeatedly mis-associate fields, the answer is usually distance, not a heading.
- Never let unrelated content sit closer than related content.
Law of Similarity
Things that look alike are assumed to do alike. Inconsistent styling for similar functions confuses; consistent styling teaches.
Apply it
- One visual treatment per function: all destructive buttons are red, all links share a color, all clickable rows show a hover state.
- Conversely, never give two different functions the same look — a "save" button and a "publish" button styled identically will be misclicked.
- Run a "squint test": blur the screen and see if affordances still cluster correctly.
Law of Uniform Connectedness
Elements connected by lines, arrows, or shared backgrounds feel more related than ones simply close together.
Apply it
- Use shared backgrounds for related controls (a settings panel, a card, a fieldset) — stronger than spacing alone.
- Connecting lines work for stepper/wizard UIs. The line tells you they're a sequence.
- Trees and indented lists use connection (indent + line) to imply hierarchy. Don't fake hierarchy with color.
Law of Prägnanz
The eye simplifies complex shapes into the simplest interpretation. Reduce ambiguity by reducing visual noise.
2024-01: ▆▃▆▂▆▃▇▂▆▅▇▃ 2024-02: ▃▅▇▂▆▅▆▂▇▃▆▅ 2024-03: ▆▃▆▂▆▃▇▂▆▅▇▃ 2024-04: ▃▅▇▂▆▅▆▂▇▃▆▅ 2024-05: ▆▃▆▂▆▃▇▂▆▅▇▃
Apply it
- For dashboards: lead with one big number. Charts are supporting actors; the headline tells the story.
- Audit your screen: if you removed each element, what would users miss? Ship the edit.
- Beware decorative SVGs/illustrations that compete with the actual content.
Von Restorff Effect
An item that visually stands out from its peers is more likely to be remembered (and clicked).
Apply it
- Pick exactly one element per screen to be the "different" one — the primary CTA, the recommended plan. Two competing peaks ≈ no peaks.
- Use it for empty states ("← Click here to get started") and onboarding moments.
- Don't abuse with permanent badges. If everything's labeled "NEW", nothing is.
Respect body and mind
The user has fingers, eyes, and a working memory the size of a sticky note. Build like that's a constraint — because it is.
Fitts's Law
Time to acquire a target is a function of distance and size. Big nearby targets are faster than small far ones.
Apply it
- Tap targets ≥
44×44 px(Apple HIG) /48×48 dp(Material). Don't argue with users; they have fingers. - Put the primary action where the thumb naturally rests — bottom on mobile, near the cursor's last action on desktop.
- Screen edges and corners are infinitely "big" (you can't overshoot them). Use them: max bar, dock, close button.
Doherty Threshold
Productivity and engagement hold when a system responds in under ~400 ms. Past that, attention drops.
Apply it
- Show feedback within
~100 ms. If you can't compute the answer that fast, render a skeleton, optimistic state, or progress indicator immediately. - Debounce input handlers, but don't debounce the spinner — start it on keystroke, swap to results when ready.
- For long ops, show a determinate progress bar (a moving number is better than an indefinite spinner past 2 s).
Miller's Law
The average person can hold ~7 (±2) items in working memory. Group long sequences to ease recall.
Apply it
- Format phone numbers, credit cards, IBANs, and OTP codes with separators. Use
autocomplete+inputmode. - Don't take this as "always show ≤7 items" — that's a misreading. The limit is on items the user must hold in their head, not items on screen.
- Long lists are fine if they're searchable/scannable. The problem is asking users to remember.
Working Memory
Working memory is small, fragile, and easily disrupted. Every context switch costs the user state.
Apply it
- Confirmations should restate what, why, and what happens next. The user shouldn't have to remember which row they clicked.
- Persist form state on every keystroke — never lose what the user typed because of a navigation, refresh, or session expiry.
- Don't pop modals over forms. Don't redirect mid-task. For OTPs, set
autocomplete="one-time-code"so the OS handles the context switch.
Selective Attention
People filter out elements that look like ads, banners, or anything irrelevant to their task ("banner blindness").
Apply it
- Critical UI must not look like marketing chrome. Avoid bright gradients and dismissable corner toasts for things users actually need to see.
- Place mission-critical messages inline, in the user's reading path, in the same visual language as the rest of the content.
- Test by squint: anything that screams "ad" will be ignored, even if it's important.
Serial Position Effect
People remember the first and last items in a list best. The middle vanishes.
Apply it
- Put the highest-value items at the start and end of any list, menu, or sidebar.
- For tables: most-important column first, action column last. Middle columns are scenery.
- In feature lists: lead with the killer feature, end with the surprising one.
Make it stick
Memory is the long shadow of UX. What people recall about your product two weeks later is what they tell their team.
Goal-Gradient Effect
Motivation increases as people get closer to a goal. Show progress toward completion, even if you have to fake the head-start.
Apply it
- Always render progress as a bar/percent, not just
"step 2 of 5". Brain math is friction. - Endowed progress: start the bar partially filled (
"You're 20% done!") — measurably increases completion rates. - For long flows, break into chunks and show micro-completion (✓ animations) as each finishes.
Peak–End Rule
People judge an experience by its peak (best or worst moment) and its end, not the average.
- · Invite teammates
- · Connect a repo
- · Create your first project
Apply it
- Spend 2× the polish on the success state vs. the steady state. Confetti, a real summary, a clear "what now".
- Likewise, eliminate the worst moment — that one slow API call, that one confusing error — even at the cost of average performance.
- Error states are also peaks. A great error message ("here's what happened, here's how to fix it") gets remembered as competence.
Zeigarnik Effect
People remember interrupted or incomplete tasks better than completed ones. Show what's left undone.
Apply it
- Persistent onboarding checklists with a clear "next step" pull users back to incomplete tasks days later.
- Show counts of unread/unfinished items in the nav (the dot, the badge). It's not noise; it's a memory aid.
- Drafts deserve breadcrumbs: "You have 1 unsent draft" beats letting it rot in a folder.
That's all twenty-four.
Now go build something that respects fingers, eyes, working memory, and the back button. Your users will tell their team about the polish — not the cleverness.
Read Yablonski's full reference →