---
title: "Occam's Razor"
source: "/reference/occams-razor"
description: "When several designs solve the same problem equally well, prefer the one that introduces fewer assumptions, mechanisms, and moving parts."
---
# Occam's Razor

When several designs solve the same problem equally well, prefer the one that introduces fewer assumptions, mechanisms, and moving parts.



### Principle

When several designs solve the same problem equally well, prefer the one that introduces fewer assumptions, mechanisms, and moving parts.

### Why it matters

In product design, simplicity is valuable when it removes unnecessary concepts, states, steps, or special cases while preserving capability. The principle is comparative: it helps choose between solutions that perform equally well. A simpler-looking UI can still hide greater operational complexity or reduce user control.

### Deeper design interpretation

Occam's Razor is useful when comparing solutions that satisfy the same requirements. The preferable design is the one that introduces fewer concepts, exceptions, states, and mechanisms without losing capability or correctness. This is especially relevant in design systems, where historical duplication can create several ways to solve the same problem.

Simplicity should be evaluated across the product lifecycle, not only the rendered screen. A visually minimal interaction may hide complicated behavior, surprise users, or require more maintenance. Conversely, a slightly richer control can make state and consequence much clearer.

Layr should therefore evaluate conceptual simplicity, interaction simplicity, and implementation simplicity together when enough evidence is available.

### What the agent should reason about

Identify duplicated concepts, redundant states, repeated steps, and special-case components. Verify that a proposed consolidation preserves the domain distinctions that matter. The agent should explain which complexity disappears and which capability remains.

Do not recommend reuse merely because two components look similar; their semantics may require separate primitives.

### Common failure patterns

- Separate component families exist for nearly identical interaction structures.
- Flows contain steps with no unique information, decision, or safety value.
- New terminology duplicates an existing concept.
- Historical edge cases become permanent UI branches.
- Decorative abstraction makes a direct action harder to understand.

### Audit questions

- Are there multiple mechanisms solving the same user problem?
- Does each state or step contribute unique value?
- Would consolidation preserve semantics and accessibility?
- Is the “simpler” design actually simpler for users, implementation, and maintenance?

### Example agent finding

> **Low — Three modal primitives implement the same interaction contract.** Confirmation, warning, and review dialogs differ mainly in icon and tone but maintain separate focus and sizing logic. Consolidate them into one accessible dialog primitive with explicit semantic variants while preserving their distinct content requirements.

### Agent directive

> Prefer the least complicated solution that fully satisfies the user, accessibility, and system requirements. Do not simplify by deleting necessary capability or context.

### Apply this when

- Information architecture, component variants, flow design, settings, navigation, modal sequences, onboarding, and design-system consolidation.

### Observable signals

- Two components solve the same job with different APIs or interaction models.
- A flow contains steps that collect no unique information or provide no decision value.
- Special-case UI exists because of implementation history rather than user need.
- A new concept is introduced where an existing product concept could represent the same thing.
- A decorative layer adds explanation requirements without adding task value.

### Recommended actions

- Remove redundant states, screens, controls, and component variants.
- Reuse existing concepts where their semantics fit.
- Combine duplicated interaction patterns after verifying edge cases.
- Prefer direct language and explicit outcomes over clever abstractions.

### Do not over-apply

Do not collapse distinct concepts merely because they look similar. The simpler solution must still model the domain correctly.

### Example

**Weak:** A product has separate modal systems for confirmation, warning, and review even though the interaction structure is the same and only content/severity differs.

**Stronger:** One accessible dialog primitive supports well-defined variants while preserving the distinct semantics of each use case.

### Evaluation notes

- **Default severity:** Low to medium; high when complexity causes recurring errors or maintenance-driven inconsistency.
- **Typical confidence:** High for duplicated mechanisms; medium for architectural simplification.
- **Primary evidence:** Component inventory, flow steps, state machines, duplicated concepts, requirements.
- **Related rules:** Law of Prägnanz, Tesler's Law, Cognitive Load, Pareto Principle

### References

- [Laws of UX — Occam's Razor](https://lawsofux.com/occams-razor/)

## Related rules

- [Law of Prägnanz](/__layr/pages/reference/law-of-pragnanz.md)
- [Tesler's Law](/__layr/pages/reference/teslers-law.md)
- [Cognitive Load](/__layr/pages/reference/cognitive-load.md)
- [Pareto Principle](/__layr/pages/reference/pareto-principle.md)

## Agent guidance

Review criteria, the finding contract a report must use, and worked examples.

Established principle; Layr interpretation and agent guidance. Category: Decision, Simplicity & Familiarity.

## Retrieve
- Canonical page: https://layr.design/reference/occams-razor
- Markdown for agents: https://layr.design/__layr/pages/reference/occams-razor.md
- Reference map: https://layr.design/llms.txt
- Route index: https://layr.design/__layr/routes.toon

## Rule object
```yaml
rule:
  id: "occams-razor"
  title: "Occam's Razor"
  category: "Decision, Simplicity & Familiarity"
  origin: established
  canonical_url: "https://layr.design/reference/occams-razor"
  principle: "When several designs solve the same problem equally well, prefer the one that introduces fewer assumptions, mechanisms, and moving parts."
  directive: "Prefer the least complicated solution that fully satisfies the user, accessibility, and system requirements. Do not simplify by deleting necessary capability or context."
  applies_when:
    - "Information architecture, component variants, flow design, settings, navigation, modal sequences, onboarding, and design-system consolidation."
  observable_signals:
    - "Two components solve the same job with different APIs or interaction models."
    - "A flow contains steps that collect no unique information or provide no decision value."
    - "Special-case UI exists because of implementation history rather than user need."
    - "A new concept is introduced where an existing product concept could represent the same thing."
    - "A decorative layer adds explanation requirements without adding task value."
  audit_questions:
    - "Are there multiple mechanisms solving the same user problem?"
    - "Does each state or step contribute unique value?"
    - "Would consolidation preserve semantics and accessibility?"
    - "Is the “simpler” design actually simpler for users, implementation, and maintenance?"
  recommended_actions:
    - "Remove redundant states, screens, controls, and component variants."
    - "Reuse existing concepts where their semantics fit."
    - "Combine duplicated interaction patterns after verifying edge cases."
    - "Prefer direct language and explicit outcomes over clever abstractions."
  avoid_when:
    - "Do not collapse distinct concepts merely because they look similar. The simpler solution must still model the domain correctly."
  common_failure_patterns:
    - "Separate component families exist for nearly identical interaction structures."
    - "Flows contain steps with no unique information, decision, or safety value."
    - "New terminology duplicates an existing concept."
    - "Historical edge cases become permanent UI branches."
    - "Decorative abstraction makes a direct action harder to understand."
  evidence_types:
    - "Component inventory"
    - "flow steps"
    - "state machines"
    - "duplicated concepts"
    - "requirements"
  default_severity: "Low to medium; high when complexity causes recurring errors or maintenance-driven inconsistency."
  typical_confidence: "High for duplicated mechanisms; medium for architectural simplification."
  related_rules:
    - { id: "law-of-pragnanz", title: "Law of Prägnanz", url: "https://layr.design/reference/law-of-pragnanz" }
    - { id: "teslers-law", title: "Tesler's Law", url: "https://layr.design/reference/teslers-law" }
    - { id: "cognitive-load", title: "Cognitive Load", url: "https://layr.design/reference/cognitive-load" }
    - { id: "pareto-principle", title: "Pareto Principle", url: "https://layr.design/reference/pareto-principle" }
```

## What to reason about
Identify duplicated concepts, redundant states, repeated steps, and special-case components. Verify that a proposed consolidation preserves the domain distinctions that matter. The agent should explain which complexity disappears and which capability remains. Do not recommend reuse merely because two components look similar; their semantics may require separate primitives.

## Routing
Route a review here when the user must choose between alternatives, learn an unfamiliar control, navigate competing actions, or configure a system before reaching value. Inspect the structure of the decision before recommending fewer options.

## Review procedure
For every finding:
1. Identify the exact component, state, route, or interaction.
2. State the observable evidence.
3. Name the principle that applies.
4. Explain the user consequence in the current context.
5. Estimate severity from the consequence, frequency, and reversibility.
6. Recommend the smallest change that addresses the issue while preserving the product's existing design system.
7. Lower confidence when intent, frequency, audience, device, or product constraints must be inferred.
8. Do not produce generic advice such as "improve hierarchy" or "make this clearer" without specifying what is wrong and why.

## Finding contract — emit exactly this shape
```yaml
finding:
  rule_id: string
  location: string
  evidence:
    - observable fact
  impact: string
  severity: low | medium | high | critical
  confidence: low | medium | high
  recommendation:
    change: string
    rationale: string
    preserve:
      - existing design-system behavior
      - valid product constraints
```

## Example finding for this rule
Low — Three modal primitives implement the same interaction contract. Confirmation, warning, and review dialogs differ mainly in icon and tone but maintain separate focus and sizing logic. Consolidate them into one accessible dialog primitive with explicit semantic variants while preserving their distinct content requirements.

## Code reference

The same principle as markup. Compare the structure, not the class names.

```html
<!-- weak -->
<div class="example-ui example-ui-weak">
  <div class="scene-chrome">
    <span class="scene-chrome-app">Design system</span>
    <span class="scene-chrome-view">Dialog components</span>
  </div>
  <div class="scene-body">
    <div class="scene-dialog-stack">
      <div class="scene-dialog scene-dialog-a">
        <span class="scene-dialog-title">Confirm</span>
        <span>Continue?</span>
        <span class="scene-action">OK</span>
      </div>
      <div class="scene-dialog scene-dialog-b">
        <span class="scene-dialog-title">Warning!</span>
        <span>Please review.</span>
        <span class="scene-action scene-action-danger">Proceed</span>
      </div>
      <div class="scene-dialog scene-dialog-c">
        <span class="scene-dialog-title">Review</span>
        <span>Check details.</span>
        <span class="scene-action scene-action-primary">Confirm</span>
      </div>
    </div>
    <span class="scene-note">3 component families · 1 interaction structure</span>
  </div>
</div>
```

```html
<!-- stronger -->
<div class="example-ui example-ui-strong">
  <div class="scene-chrome">
    <span class="scene-chrome-app">Design system</span>
    <span class="scene-chrome-view">Dialog</span>
  </div>
  <div class="scene-body">
    <div class="scene-dialog scene-dialog-real">
      <span class="scene-dialog-title">Archive this project?</span>
      <span>Members keep read access. You can restore it from the archive at any time.</span>
      <div class="scene-row">
        <span class="scene-action">Cancel</span>
        <span class="scene-action scene-action-primary">Archive project</span>
      </div>
    </div>
    <div class="scene-row">
      <span class="scene-meta">One primitive, three variants</span>
      <span class="scene-tag scene-tag-neutral">default</span>
      <span class="scene-tag scene-tag-warning">caution</span>
      <span class="scene-tag scene-tag-danger">danger</span>
    </div>
    <span class="scene-note">Shared structure · semantics kept distinct</span>
  </div>
</div>
```

```css
/* declarations these studies depend on */
.example-ui { display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; min-height: 17rem; overflow: hidden; border: var(--border-thin) solid var(--color-border-strong); background: var(--color-background); color: var(--color-text); font-size: var(--text-xs); line-height: var(--leading-snug); }
.example-ui .scene-chrome { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); padding: var(--space-2) var(--space-3); border-bottom: var(--border-thin) solid var(--color-border-strong); background: var(--color-surface); }
.example-ui .scene-chrome-app { font-size: var(--text-2xs); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.example-ui .scene-chrome-view { color: var(--color-text-tertiary); font-size: var(--text-2xs); }
.example-ui .scene-body { display: grid; align-content: start; gap: var(--space-3); min-width: 0; padding: var(--space-3); }
.example-ui .scene-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-1) var(--space-2); width: 100%; min-width: 0; padding-block: var(--space-1); }
.example-ui .scene-meta { color: var(--color-text-tertiary); font-size: var(--text-2xs); }
.example-ui .scene-note { width: 100%; padding-top: var(--space-2); border-top: var(--border-thin) solid var(--color-border-subtle); color: var(--color-text-tertiary); font-family: var(--font-mono); font-size: var(--text-2xs); line-height: var(--leading-snug); }
.example-ui .scene-action { display: inline-flex; align-items: center; justify-content: center; min-height: var(--space-8); padding-inline: var(--space-3); border: var(--border-thin) solid var(--color-border-strong); border-radius: var(--radius-xs); background: var(--color-surface-raised); color: var(--color-text); font-size: var(--text-xs); font-weight: 550; white-space: nowrap; }
.example-ui .scene-action-primary { border-color: var(--color-primary-bg); background: var(--color-primary-bg); color: var(--color-primary-text); }
.example-ui .scene-action-danger { border-color: var(--color-danger); color: var(--color-danger); }
.example-ui .scene-tag { display: inline-block; padding: 0 var(--space-2); border: var(--border-thin) solid var(--color-border-strong); color: var(--color-text-secondary); font-size: var(--text-2xs); line-height: 1.6; white-space: nowrap; }
.example-ui .scene-tag-neutral { border-color: var(--color-border-strong); }
.example-ui .scene-tag-warning { border-color: var(--color-caution); color: var(--color-caution); }
.example-ui .scene-tag-danger { border-color: var(--color-danger); color: var(--color-danger); }
.example-ui .scene-dialog-stack { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-1); width: 100%; }
.example-ui .scene-dialog { display: grid; justify-items: start; gap: var(--space-2); width: 100%; padding: var(--space-3); border: var(--border-thin) solid var(--color-border-strong); background: var(--color-surface-raised); box-shadow: var(--shadow-floating); }
.example-ui .scene-dialog-stack .scene-dialog { padding: var(--space-2); font-size: var(--text-2xs); }
.example-ui .scene-dialog-stack .scene-action { min-height: var(--space-5); padding-inline: var(--space-1); font-size: var(--text-2xs); }
.example-ui .scene-dialog-a { border-radius: 0; }
.example-ui .scene-dialog-b { border-width: 2px; border-radius: var(--radius-sm); }
.example-ui .scene-dialog-c { border-radius: var(--radius-lg); }
.example-ui .scene-dialog-real { border-radius: var(--radius-sm); }
.example-ui .scene-dialog-title { font-size: var(--text-sm); font-weight: 600; }
.example-ui { min-height: 15rem; }
.example-ui .scene-dialog-stack { grid-template-columns: minmax(0, 1fr); }

/* resolved values */
:root {
  --border-thin: 1px;
  --font-mono: "Geist Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --leading-snug: 1.35;
  --radius-lg: 10px;
  --radius-sm: 4px;
  --radius-xs: 2px;
  --shadow-floating: 0 1px 2px rgb(17 17 15 / 5%), 0 8px 24px rgb(17 17 15 / 8%);
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-5: 1.25rem;
  --space-8: 2rem;
  --text-2xs: 0.6875rem;
  --text-sm: 0.875rem;
  --text-xs: 0.75rem;
  --tracking-label: 0.06em;
}
```

## Weak vs stronger
- Weak: A product has separate modal systems for confirmation, warning, and review even though the interaction structure is the same and only content/severity differs.
- Stronger: One accessible dialog primitive supports well-defined variants while preserving the distinct semantics of each use case.

## Reporting rules
- Report only what the interface shows as observable evidence; phrase psychological or motivational effects as possible consequences.
- Returning no finding is a valid result when evidence is insufficient.
