| name | laws-of-ux |
| description | Apply the 30 Laws of UX (Jon Yablonski) to web and app interface work — design review, component building, layout decisions, copy, flows, forms, navigation, error states, performance perception, and accessibility. Use whenever the user is building, reviewing, refactoring, or critiquing a website or web/mobile app UI; whenever they ask "how should this look/feel/behave"; whenever they're picking between layout or interaction options; whenever they share a screenshot or component for feedback; and proactively flag relevant laws during any frontend code work involving user-facing surfaces. Scope is digital screens only — not print, not voice, not physical product design. |
Laws of UX
A working reference for the 30 Laws of UX (Jon Yablonski) as applied to websites and web/mobile applications. Each law is a research-backed pattern about how people perceive, decide, remember, and act. Use them as lenses, not rules.
When to apply
Apply this skill whenever the conversation involves a digital UI surface:
- Building — designing or coding components, pages, flows, forms, navigation, modals, empty/error states, onboarding.
- Reviewing — the user shares a screenshot, mockup, Figma frame, or component code and wants feedback.
- Deciding — the user is choosing between two layouts, interactions, copy variants, or IA structures.
- Diagnosing — the user reports a UX problem ("users keep dropping off", "this feels slow", "people miss the button").
- Scoping — the user is planning what to build and asks what matters most.
Out of scope: print, voice-only, hardware, pure backend with no human surface.
How to apply
Don't list every law every time. Pick what's relevant. The workflow:
- Identify the surface — form, list, dashboard, landing page, settings panel, marketing site, in-app flow, navigation? Mobile or desktop?
- Identify the user task — what is the person trying to do? Decide, scan, complete, recover, learn, compare?
- Pick 2–5 relevant laws from the task→laws map below. Quality over quantity.
- Apply concretely — translate the principle into a specific change to copy, layout, spacing, timing, or state. Avoid abstract restatements ("you should reduce cognitive load"); say what to do ("collapse the secondary filters into a 'More' menu, keep only the four most-used filters visible").
- Note tensions — laws conflict. Aesthetic-Usability vs. Occam's. Jakob's vs. novelty. Surface the tradeoff and let the user decide.
For each law's deeper takeaways, code patterns, anti-patterns, common misapplications, origins, and references, read references/laws-detailed.md. For systematic UI review by surface type (form, dashboard, checkout, etc.), read the "Critique playbooks" section there.
Task → laws quick map
- Forms / inputs → Postel's Law, Fitts's Law, Doherty Threshold, Parkinson's Law, Working Memory, Tesler's Law
- Navigation / IA → Jakob's Law, Hick's Law, Law of Proximity, Law of Similarity, Serial Position Effect, Mental Model
- Lists / search results / cards → Law of Common Region, Law of Proximity, Law of Uniform Connectedness, Chunking, Miller's Law
- CTAs / primary actions → Von Restorff Effect, Fitts's Law, Selective Attention, Goal-Gradient Effect
- Onboarding / new-user flows → Paradox of the Active User, Hick's Law, Mental Model, Jakob's Law, Goal-Gradient Effect
- Loading / progress / latency → Doherty Threshold, Goal-Gradient Effect, Flow, Zeigarnik Effect
- Empty / error / success states → Peak-End Rule, Postel's Law, Aesthetic-Usability Effect
- Dashboards / data-dense screens → Cognitive Load, Working Memory, Chunking, Law of Common Region, Selective Attention, Pareto Principle
- Pricing / decision pages → Choice Overload, Hick's Law, Von Restorff Effect, Cognitive Bias
- Visual hierarchy / layout → Law of Prägnanz, Law of Proximity, Law of Similarity, Von Restorff Effect, Aesthetic-Usability Effect
- Marketing / landing pages → Aesthetic-Usability Effect, Serial Position Effect, Peak-End Rule, Selective Attention
- Settings / preferences → Tesler's Law, Hick's Law, Mental Model, Chunking
- Mobile-specific → Fitts's Law (touch targets), Jakob's Law (platform conventions), Doherty Threshold
The 30 laws — index
Each entry is the law name, its core claim, and the single most important practical takeaway. For nuance, code patterns, anti-patterns, common misapplications, and origins, see references/laws-detailed.md.
Group 1 — Visual perception & layout (Gestalt)
How the eye organizes what it sees. Use for spacing, grouping, hierarchy.
- Law of Proximity — Objects near each other are perceived as grouped. Use spacing as the primary grouping tool before reaching for borders.
- Law of Similarity — Visually similar elements are perceived as related. Same visual = same kind of thing. Style primary CTAs, secondary CTAs, and text links distinctly and consistently.
- Law of Common Region — Elements inside a shared boundary are grouped. A bordered card or panel beats spacing alone for strong grouping.
- Law of Uniform Connectedness — Elements visually connected (lines, frames) are perceived as the most related of all. Stronger than proximity or similarity. Use for steppers, breadcrumbs, related-action toolbars.
- Law of Prägnanz — People interpret ambiguous shapes as the simplest possible form. Aim for layouts that read at a glance as a small number of clean blocks. Reduce decorative noise.
- Von Restorff Effect — The element that differs from peers is best remembered. One filled primary button per view. Don't over-emphasize — if everything stands out, nothing does.
Group 2 — Decision-making & cognitive cost
How people choose under load. Use for forms, menus, settings, pricing.
- Hick's Law — Decision time grows with number and complexity of options. Cap visible options. Highlight a recommended default. Defer the rest behind progressive disclosure.
- Choice Overload — Too many options paralyzes decision-making. Anchor with a "recommended" tier. Provide filters, search, sensible defaults.
- Cognitive Load — Mental resources needed to use the interface. Cut extraneous load: every decoration, animation, or label that doesn't help the task is tax.
- Working Memory — ~4 chunks, decaying in 20–30 seconds. Recognition over recall. Carry context forward across screens (sticky filters, breadcrumbs, persistent state).
- Miller's Law — ~7 (±2) items in working memory. Don't use "7" as a UI rule (it's misused this way constantly). The real lesson is to chunk.
- Chunking — Grouping individual items into meaningful wholes. Apply to text, data, and inputs. Visual chunks must match semantic chunks.
- Tesler's Law — Every system has irreducible complexity; the system absorbs it or the user does. Smart defaults, autofill, format detection — push complexity off the user.
- Occam's Razor — Prefer the option with fewest assumptions / elements. Default to subtraction. Question every element: does it earn its place?
- Pareto Principle (80/20) — Most outcomes come from a small fraction of causes. Identify the 20% of features driving 80% of value. Polish those first; defer the long tail.
- Selective Attention — People filter to goal-relevant stimuli. Beware banner blindness — don't dress real content like ads. One focal point per screen.
- Cognitive Bias — Systematic errors in judgment. Defaults, anchoring, framing, loss aversion shape behavior. Use ethically — dark patterns weaponize bias.
Group 3 — Memory, motivation & experience over time
How users remember and stay motivated through a flow.
- Serial Position Effect — First and last items in a series are best remembered. Lead with the strongest, end with the next-strongest, bury weak items in the middle.
- Peak-End Rule — People judge an experience by its peak and its end, not the average. Invest in delight at peak moments and the end. Fix the worst moment first — negative peaks dominate memory.
- Goal-Gradient Effect — Motivation increases with proximity to the goal. Show progress (bars, step indicators). Pre-fill some progress to bootstrap motivation.
- Zeigarnik Effect — Uncompleted tasks are remembered better than completed ones. Open loops invite return ("draft saved", "1 unread"). Don't weaponize into anxiety machinery.
- Flow — Full immersion when challenge matches skill. Match tempo to user skill. Remove friction breaks. Provide feedback for every action.
- Aesthetic-Usability Effect — Pleasing designs are perceived as more usable. Polish multiplies. Watch out: aesthetics mask usability problems in testing — track behavior, not just satisfaction.
- Paradox of the Active User — Users start using software immediately and don't read manuals. Inline tooltips and contextual help beat separate docs. Onboard through use.
Group 4 — Behavior, expectation & robustness
How users expect things to work, and how to be tolerant when they don't.
- Jakob's Law — Users spend most of their time on other sites; they expect yours to work the same. Default to web/platform conventions. Innovate where it earns the cost; conform where it doesn't.
- Mental Model — Users hold compressed models of how systems work. Match your structure to existing models in the user's domain. Test, don't guess.
- Postel's Law — Be liberal in what you accept, conservative in what you send. Accept any input format (phone numbers, dates, names with diacritics, mixed case email); normalize server-side. Inline validation with concrete fix instructions.
Group 5 — Time, motion & attention
How people experience speed and where they look.
- Fitts's Law — Time to acquire a target depends on size and distance. Touch targets ≥44pt iOS / 48dp Android. Place primary actions where the cursor/thumb already is. Keep destructive actions far from common ones.
- Doherty Threshold — Productivity climbs when system response is under ~400ms. Optimistic UI. Skeleton screens > spinners. Progress bars make waits tolerable even when imprecise.
- Parkinson's Law — A task expands until all the available time is spent. Compress visible task length: autofill, smart defaults, paste-detection. Faster-feeling tasks complete faster.
Tensions to flag
Laws can conflict. Surface the tradeoff explicitly:
- Jakob's Law vs. novelty — Conventions reduce learning cost but blind copying ships a worse experience than the originals. Innovate where it earns its cost.
- Aesthetic-Usability vs. Occam's Razor — Decorative touches that delight may also clutter. The test: does removing it change the feeling of the product, or just the surface?
- Hick's Law vs. Tesler's Law — Fewer options is faster, but the complexity has to live somewhere. Hiding it in a "smart" default surprises users when the default is wrong.
- Doherty Threshold vs. Peak-End Rule — Fast is usually better, but a slightly longer "we found it!" moment can be more memorable than instant resolution.
- Goal-Gradient / Zeigarnik vs. user wellbeing — Open loops drive engagement and anxiety. Notification badges and "complete your profile" prompts cross a line. Don't weaponize.
What this skill does not cover
- Print typography, packaging, signage
- Voice and conversational UI specifics
- Physical product / hardware UX
- Information architecture beyond layout-level grouping
- WCAG / accessibility specifics — these laws are adjacent to a11y but not a substitute. Always pair with explicit accessibility review.
Reference
For each law's full takeaways, code patterns, anti-patterns, common misapplications, origins, and primary research, see references/laws-detailed.md. That file also contains:
- Critique playbooks — systematic UI review checklists by surface type (forms, dashboards, checkout, navigation, etc.)
- Common misapplications — the most frequent ways these laws get cargo-culted into bad design
- How the laws relate — siblings, parents, and meaningful distinctions between similar laws
Source: Laws of UX by Jon Yablonski (https://lawsofux.com/), CC BY-NC-ND 4.0.
