# Laws Of Ux

> Apply evidence-based UX psychology laws when building web applications and interfaces. Use this skill whenever designing or reviewing UI/UX for web apps, dashboards, landing pages, forms, navigation systems, or any user-facing interface. Also triggers on: 'UX review', 'usability', 'user experience design', 'make this more usable', 'improve UX', 'UX patterns', 'interface design', 'is this good UX'…

- **Type:** Skill
- **Install:** `agentstack add skill-cite-me-in-skills-laws-of-ux`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [cite-me-in](https://agentstack.voostack.com/s/cite-me-in)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [cite-me-in](https://github.com/cite-me-in)
- **Source:** https://github.com/cite-me-in/skills/tree/main/skills/laws-of-ux

## Install

```sh
agentstack add skill-cite-me-in-skills-laws-of-ux
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Laws of UX — Web App Design Skill

> **Source:** [lawsofux.com](https://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").

```tsx
// ✅ 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.

```tsx
// ✅ 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.

```html

  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.**

```html

──●──●──○

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.

```css
/* ✅ 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

```tsx
// ✅ 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).

```tsx

  
  {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](https://github.com/cite-me-in)
- **Source:** [cite-me-in/skills](https://github.com/cite-me-in/skills)
- **License:** MIT

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

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-cite-me-in-skills-laws-of-ux
- Seller: https://agentstack.voostack.com/s/cite-me-in
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.