Laws Of Ux

Laws of UX — Web App Design Skill

> Source: lawsofux.com by Jon Yablonski · 30 evidence-based psychology laws for UX design

---

How This Skill Works

Mode A: Quick Question (one law, yes/no fix)

User asks: "Is this button big enough?" / "Should I add another nav item?"

1. Read Quick Reference table → find the relevant law(s)
2. Read that law's detail section only
3. Answer directly: principle + ✅/❌ verdict + one concrete suggestion
4. Skip everything else (routing, conflicts, scripts, checklist)

Mode B: Full Review / Design Session

User asks: "Review my dashboard" / "Help me design a checkout flow"

1. Understand context — what's being built? (Use Context Routing below)
2. Select 3–7 relevant laws from routing table + Quick Reference
3. Give specific feedback per law: principle → their code/UI → concrete fix → severity (🔴🟡🔵)
4. Check conflicts between selected laws → [When Laws Conflict](#when-laws-conflict)
5. Output prioritized findings list using [Review Workflow](#review-workflow)
6. Stakeholder scripts (optional) — if user needs to defend decisions → [Stakeholder Communication](#stakeholder-communication)

---

Context Routing: What You're Building → Which Laws Matter

Forms & Input (signup, checkout, settings, search)

| Priority | Law | Why | |---|---|---| | 🔴 Critical | Postel's Law | Accept varied input, normalize internally | | 🔴 Critical | Hick's Law | Break long forms into steps; limit choices per screen | | 🔴 Critical | Doherty Threshold | Inline validation Note: Working Memory (#17) and Miller's Law (#14) are closely related. Chunking (#16) is the primary technique for both.

---

The Laws (Detailed Reference)

> Read on-demand after selecting relevant laws from context routing or Quick Reference. Don't present all at once.

---

1. Fitts's Law

> Target acquisition time = f(distance, size).

Rules: Targets ≥ 44×44px (iOS) / 48×48px (Material). Never 3% of taps miss, enlarge.

---

2. Doherty Threshold

> *Respond 1s (spinners, skeletons, bars).

Perceived performance tricks: Skeletons > spinners. Animated progress bars feel faster even if indeterminate. Staggered reveal holds attention. Micro-delays after payment increase perceived value ("something important happened").

// ✅ Instant visual, async sync
const handleLike = () => {
  setLiked(!liked);                          //  setLiked(!liked)); // async
};
// ❌ Blocking await — user stares at nothing
await api.toggleLike(id); setLiked(!liked);

Anti-patterns: Unresponsive during fetches, blank route transitions, no loading states.

Validate: Time-to-interactive. Lighthouse "First Input Delay." User studies: watch for repeated clicks (sign of "did it register?").

---

3. Hick's Law

> More choices = slower decisions.

Rules: Progressively disclose — show only what's needed now. Wizards, accordions, "Advanced ▾". Highlight default — guide don't overwhelm. Break forms into steps — 20 fields → 3 steps of ~7. Nav: ~5–7 items top level.

// ✅ Progressive disclosure

// ❌ Wall of choices — 25 fields at once

Anti-patterns: 15+ nav items, every metric visible, 50-option selects, pricing with no recommended plan.

Validate: Form completion time (before/after splitting steps). Drop-off rate per added option. Heatmap dwell time on decision points.

---

4. Jakob's Law

> Users spend most time on other sites. Yours should work like them.

Rules: Logo → home (top-left), cart → top-right, search → 🔍, mobile → hamburger, hierarchy → breadcrumbs. Don't reinvent date pickers, modals, dropdowns, tabs unless you have overwhelming reason. When innovating, provide off-ramp (YouTube redesign approach).

The innovation tradeoff: Novel patterns incur training debt. Ask: Does this give enough value to justify learning cost?

Anti-patterns: Custom scroll behavior, repositioned submit button, novel navigation without signifiers.

Validate: Task completion time for first-time users vs returning users. If first-time is dramatically slower, Jakob's debt may be too high. Onboarding drop-off rate.

---

5. Mental Model

> Design for how users THINK it works.

Rules: Leverage existing models ("like Spotify" → Spotify metaphors). Bridge gaps with analogies. Expose cause-and-effect visibly. Avoid hidden modes (double-click ≠ single-click in same context).

Detect broken models: Users hesitate, hover aimlessly, click wrong thing repeatedly, say "I thought it would..."

Anti-patterns: Hidden features, inconsistent behaviors across similar elements, abstract icons without labels.

Validate: Think-aloud protocols. Watch for surprise ("I didn't expect that to happen"). Error patterns that suggest wrong mental model.

---

6. Paradox of the Active User

> Nobody reads docs. They start clicking immediately.

Rules: Zero-onboarding usage possible. Defaults work well. Core value accessible without tutorial. Contextual help > documentation. Tooltips, inline hints, microcopy beat PDFs. Design error recovery. Undo, clear next steps, forgiving inputs. Learning by doing. Tours interact with real UI, progressive feature reveal.

The 10-second test: Can a new user accomplish something meaningful within 10 seconds? If not, most bounce before finding help.

Anti-patterns: Mandatory 10-step onboarding before access, features locked behind docs, errors referencing manual page numbers.

Validate: Time-to-first-value. Onboarding completion rate (if mandatory). Support ticket frequency for "how do I..." questions that should be discoverable.

---

7. Law of Proximity

> Near items = related items.

Rules: Group with whitespace, not lines. Label closer to its input than next field's label. Consistent spacing scale (base 4px: 4, 8, 12, 16, 24, 32, 48, 64). Within-group gap + { margin-top: 16px; }

**Where it applies:** Form labels, card titles, toolbar icon groups, list items, definition lists. Bring related things closer, push unrelated apart.

---

## 8. Law of Similarity
> *Same look = same kind.*

**Rules:** Same style = same type. All primary buttons match. All destructive = red. All links share color/underline. Different actions MUST look different. Cancel ≠ Submit visually.

```css
/* ✅ Visual language = function */
.primary   { background: #0066cc; color: white; font-weight: 600; }
.secondary { background: #f0f0f0; color: #333; }
.danger    { background: #dc3545; color: white; }
/* ❌ Same look, different function = confusion */
.submit { background: #0066cc; } .cancel { background: #0066cc; }

Pro tip: Audit in grayscale. Can't distinguish action types by size/shape/weight alone? Over-relying on color = accessibility issue.

---

9. Law of Common Region

> Shared boundary = shared group.

Rules: Cards, panels, containers = regions (background, border, shadow). Sidebar/main/header = regions via contrast. Wizard steps as cards = clear stage boundaries.

Hierarchy: Common Region > Proximity. Items in same card grouped even if spaced within it. Items in different cards seen as separate even if close.

  Analytics  
  Quick Actions           

---

10. Law of Uniform Connectedness

> Connected elements = related.

Rules: Connector lines beat proximity. Timelines, workflows, step indicators — lines show sequence. Breadcrumb separators, table row borders exploit this.

Gestalt strength: Uniform Connectedness > Common Region > Similarity > Proximity. When in doubt, draw a line.

──●──●──○

ABC

---

11. Law of Prägnanz (Simplicity)

> Complex → interpreted as simplest form.

Rules: Every element earns its place ("Does this help the user NOW?"). Recognizable icons only (trash can = trash can). Standard layouts (single-col reading, grid browsing, sidebar+main tools). Decorative complexity without function = cognitive tax.

Simplicity test: Describe page structure in one sentence: "It's a [layout] with [main] and [secondary]." Need five sentences? Too much going on.

---

12. Von Restorff Effect (Isolation Effect)

> Odd one out remembered best.

Rules: One standout per screen max. Primary CTA visually distinct from secondary/cancel. Important notifications break pattern. Restraint = skill. Pick 1-2 emphasis dimensions (size, weight, color, position, motion). Not all everywhere.

/* ✅ One pops */
.secondary { background: #f0f0f0; }
.primary   { background: #0066cc; color: white; font-weight: 600; } /* pops */
.danger    { background: #dc3545; color: white; } /* sparse */
/* ❌ Everything competes */
.a { background: red; } .b { background: blue; font-size: 1.2em; } .c { background: yellow; animation: pulse; }

⚠️ Accessibility: Never rely on color alone. Combine size + weight + shape + position + text. Respect prefers-reduced-motion.

⚠️ Ad-blindness risk: Standout element that looks like banner ad (flashing, aggressive contrast, ad placement) → users tune out via Selective Attention. Emphasis must feel native.

---

13. Selective Attention

> People focus only on goal-related stimuli.

Rules: Ignore off-goal content (checkout user misses newsletter banner). Design for goal-state RIGHT NOW. Avoid banner-blindness zones (top-right banners, ad-like footers). In-context beats prominent (inline message where user looks > interrupting modal).

Goal-State Mapping technique:

Goal: "Find pricing"
→ Pricing link obvious in nav + footer + homepage
→ No "Read our blog" popup on pricing page
→ Nav clutter removed on pricing page (Hick's + Selective Attention combo)

Goal: "Submit this form"
→ Header/nav/footer/sidebar stripped — pure form view
→ Progress indicator shown (Working Memory)
→ One clear CTA (Von Restorff)
→ Inline validation, fast (Doherty + Postel's)

Anti-pattern: Promo banners on checkout, modals interrupting tasks, critical info in footers on task pages.

---

14. Miller's Law

> Working memory holds 7±2 items.

Rules: ~5–9 items per view (nav tabs, filters, radios). Chunk to stay within limit. Never require cross-page recall. Practical limit: 4±1 for complex items (menu options with labels) — original paper was 1D stimuli; real items are richer. Err toward fewer.

Validate: Card sorting studies. Eye-tracking (fixation count per area). Task success when N items present vs reduced.

---

15. Cognitive Load

> Mental resources needed to understand your UI.

Three types — know which you're designing for:

| Type | Definition | Fix | |---|---|---| | Intrinsic | Effort inherent to the task | Support with wizards, previews, tooltips. Can't eliminate, only support. | | Extraneous | Effort from HOW you present it | Fixable. Remove decoration, simplify visuals, kill gratuitous animation. | | Germane | Effort spent learning/processing | Reduce via familiarity (Jakob's). Known patterns = zero learning cost. |

Golden rule: One concept per screen. Settings categorized, not 50 toggles flat.

Validate: NASA-TLX task load assessment (research method). Time-on-task comparisons. Error rate correlation with interface complexity.

---

16. Chunking

> Break info into meaningful groups.

Rules: Group nav under headings ("Account", "Billing"). Format data for scanning (phones, dates, addresses). Card grids chunk content (12 posts → 3×4 cards). Breadcrumbs = spatial chunks.

Chunking vs Progressive Disclosure: Chunking organizes WHAT'S VISIBLE. PD controls HOW MUCH IS VISIBLE. They work together — show few chunks, expand within each.

Practical sizes: Nav group: 3-7. Form step: 4-7 fields. Dashboard row: 2-4 cards. Table cols: 4-8 visible. List before paginate: 7-15.

---

17. Working Memory

> Temporary memory for active tasks.

Rules: Never ask users to recall from previous step without showing it ("Step 3 of 3" summarizes 1&2). Persist values (navigate away/back → draft still there). State visibility always (saving? saved? what's left?). Multi-step = persistent progress indicator.

Micro-friction cost: Every forgotten piece = tiny frustration. Accumulates → abandonment.

Implementation checklist: Auto-save drafts ✓. Summarize prior selections ✓. Save status visible ✓. Restore state on return ✓.

Validate: Return rate after abandonment (did draft-saving bring them back?). Error rate on multi-step flows (does state visibility reduce mistakes?). "Start over" click rate.

---

18. Serial Position Effect

> First and last remembered best.

Rules: Most important item first, most important action last. Nav: most-used first. Form: primary CTA last. Pricing: recommended plan first or last (or Von Restorff-highlighted). Accept middle amnesia in equal lists.

Beyond lists: Menu: revenue links first. Announcements: lead with biggest win. Errors: most actionable first (not necessarily first from backend). Testimonials: strongest quote first or last.

---

19. Aesthetic-Usability Effect

> Pretty = feels more usable.

Rules: Polish is functional, not cosmetic. Cohesive design system (type, color, spacing, icons). ⚠️ Beauty masks problems — test function separately from form. First impression: ~50ms. Above-the-fold sets tone for everything.

Polish checklist: Consistent type scale ✓. Harmonious colors ✓. Whitespace ✓. Single icon family ✓. Micro-interactions ✓. Responsive everywhere ✓. No ragged edges/misalignments ✓.

Stakeholder pitch: "Investing in visual quality isn't vanity — the Aesthetic-Usability Effect is well-documented. Users report higher satisfaction and tolerance in polished interfaces. It's a usability multiplier."

Validate: A/B test: same functionality, different polish levels. Perceived usability ratings (expect pretty version to score higher even if functionally identical). Task completion rates (the real test — sometimes pretty version wins, sometimes it masks problems).

---

20. Peak-End Rule

> Judged by peak emotion + final moment.

Rules: Design peak moments at task completion (confetti, copy, animation). End every flow on high note (warm confirmation + next steps). Negative peaks linger longer — invest in error recovery. Map journey → identify peaks → design intentionally.

Flow endings ranked:

1. ✅ Delight + clear next step (confetti + "View order")
2. ✅ Warm confirmation + next step
3. ⚠️ Confirmation only ("Done") — functional, forgettable
4. ❌ Abrupt cutoff — feels broken
5. ❌ Negative peak at end — worst impression

// ✅ Strong end

  
  Order #{id} confirmed!
  Email sent to {email} with tracking.
  View Details

// ❌ Dead end
Thank you. Order received.

Validate: NPS/CSAT measured at flow endpoints (Peak-End prediction: these scores weight heavily on final moment). Exit survey after key flows. Return rate post-completion (did good ending bring them back?).

---

21. Zeigarnik Effect

> Incomplete tasks remembered better.

Rules: Show incomplete progress prominently ("75% complete", "3 of 8 remaining"). Partial progress motivates (endowed progress: signup instant 10%). Auto-save drafts → incomplete = return motivation. Never hide in-progress state (drafts, abandoned carts, unfinished onboarding = re-entry points).

  
  {percent}% complete
  {percent Complete →}

⚠️ Ethics: Powerful but can manipulate (gamification dark patterns, artificial urgency). Use for genuinely valuable tasks, not addictive looping.

Validate: Return/abandonment rate after showing progress bar (before/after). Profile completion rate with vs without endowed progress. Draft recovery rate (auto-saved drafts reopened within 7 days).

---

22. Goal-Gradient Effect

> Closer to goal = more motivated.

Rules: Accelerate perceived progress near end (smaller remaining steps, larger increments). Framing: "Onl

…

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: cite-me-in
• Source: cite-me-in/skills
• License: MIT

Install and usage instructions live in the source repository linked above.