---
title: "Jakob's Law"
source: "/reference/jakobs-law"
description: "Users bring expectations learned from other products and usually benefit when familiar conventions continue to behave in familiar ways."
---
# Jakob's Law
Users bring expectations learned from other products and usually benefit when familiar conventions continue to behave in familiar ways.
### Principle
Users bring expectations learned from other products and usually benefit when familiar conventions continue to behave in familiar ways.
### Why it matters
External conventions reduce learning cost. A magnifying-glass icon, browser back behavior, common form patterns, platform navigation, and established ecommerce flows arrive with expectations before the user sees the product's documentation. Novel interaction can be worthwhile when it creates clear value, but novelty should pay for its learning cost.
### Deeper design interpretation
Users arrive with prior experience. They already understand common browser behavior, platform controls, ecommerce conventions, search patterns, form semantics, navigation models, and keyboard expectations. Reusing those conventions lets users spend their learning effort on what is unique about the product.
Novel interaction is justified when it produces enough task value to repay the learning cost. The standard should be high for routine tasks such as closing, searching, going back, submitting forms, selecting items, or editing text. Product differentiation usually belongs in the domain workflow rather than in reinventing basic controls.
Layr should consider both external conventions and internal consistency. A product can violate expectations even when a pattern is not globally standardized if it behaves differently from its own established behavior.
### What the agent should reason about
Compare controls against platform norms, domain conventions, and the product's existing patterns. Check semantics, keyboard behavior, focus, browser history, gestures, and labels. Novelty should be evaluated in relation to measurable benefit and learnability.
A custom component that looks familiar while dropping accessibility behavior is a high-confidence problem because it borrows the expectation without delivering the behavior.
### Common failure patterns
- Standard icons trigger unexpected actions.
- Browser back behavior is intercepted in surprising ways.
- Custom form controls lose native keyboard and focus behavior.
- A familiar gesture performs a different destructive action without warning.
- The product uses multiple internal patterns for the same common task.
### Audit questions
- What expectation would an experienced user bring to this control?
- Does the product preserve that expectation or intentionally teach a better model?
- What measurable value does the novelty provide?
- Is there a familiar fallback or recovery path?
### Example agent finding
> **High — The magnifying-glass icon opens workspace settings.** This icon carries a mature search expectation across desktop and mobile products. Use the established settings icon or label for workspace settings and reserve the magnifying glass for search behavior.
### Agent directive
> Prefer established platform and domain conventions for ordinary tasks. Introduce novel patterns deliberately, with clear affordance and a measurable advantage.
### Apply this when
- Navigation, authentication, search, forms, tables, settings, checkout, mobile gestures, keyboard shortcuts, and common component behavior.
### Observable signals
- A common symbol performs an unexpected action.
- The product changes standard platform behavior without visible explanation.
- Basic controls are replaced with custom components that lose keyboard, focus, or semantic behavior.
- A new interaction requires onboarding for a task users already know how to perform elsewhere.
- The same convention is implemented differently inside the product.
### Recommended actions
- Use platform-native or well-established patterns where they satisfy the task.
- Keep common labels and control semantics recognizable.
- When novelty is valuable, preserve familiar fallback paths and teach by interaction rather than long documentation.
- Test custom components against accessibility and input expectations.
### Do not over-apply
Familiarity is not a ban on invention. A new pattern can be justified when it materially improves the task and remains learnable, reversible, and accessible.
### Example
**Weak:** A search icon opens account settings because the team wanted a distinctive navigation language.
**Stronger:** Search behaves conventionally, while the product's unique workflow appears in the domain-specific part of the experience.
### Evaluation notes
- **Default severity:** Medium to high when convention mismatch causes wrong actions; low for learnable novelty with little consequence.
- **Typical confidence:** High for mature conventions; medium when domain conventions vary.
- **Primary evidence:** Platform conventions, common product patterns, component behavior, labels, user domain.
- **Related rules:** Mental Model, Law of Similarity, Paradox of the Active User, Aesthetic-Usability Effect
### References
- [Laws of UX — Jakob's Law](https://lawsofux.com/jakobs-law/)
- [Nielsen Norman Group — Jakob's Law of Internet User Experience](https://www.nngroup.com/videos/jakobs-law-internet-ux/)
## Related rules
- [Mental Model](/__layr/pages/reference/mental-model.md)
- [Law of Similarity](/__layr/pages/reference/law-of-similarity.md)
- [Paradox of the Active User](/__layr/pages/reference/paradox-of-the-active-user.md)
- [Aesthetic-Usability Effect](/__layr/pages/reference/aesthetic-usability-effect.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/jakobs-law
- Markdown for agents: https://layr.design/__layr/pages/reference/jakobs-law.md
- Reference map: https://layr.design/llms.txt
- Route index: https://layr.design/__layr/routes.toon
## Rule object
```yaml
rule:
id: "jakobs-law"
title: "Jakob's Law"
category: "Decision, Simplicity & Familiarity"
origin: established
canonical_url: "https://layr.design/reference/jakobs-law"
principle: "Users bring expectations learned from other products and usually benefit when familiar conventions continue to behave in familiar ways."
directive: "Prefer established platform and domain conventions for ordinary tasks. Introduce novel patterns deliberately, with clear affordance and a measurable advantage."
applies_when:
- "Navigation, authentication, search, forms, tables, settings, checkout, mobile gestures, keyboard shortcuts, and common component behavior."
observable_signals:
- "A common symbol performs an unexpected action."
- "The product changes standard platform behavior without visible explanation."
- "Basic controls are replaced with custom components that lose keyboard, focus, or semantic behavior."
- "A new interaction requires onboarding for a task users already know how to perform elsewhere."
- "The same convention is implemented differently inside the product."
audit_questions:
- "What expectation would an experienced user bring to this control?"
- "Does the product preserve that expectation or intentionally teach a better model?"
- "What measurable value does the novelty provide?"
- "Is there a familiar fallback or recovery path?"
recommended_actions:
- "Use platform-native or well-established patterns where they satisfy the task."
- "Keep common labels and control semantics recognizable."
- "When novelty is valuable, preserve familiar fallback paths and teach by interaction rather than long documentation."
- "Test custom components against accessibility and input expectations."
avoid_when:
- "Familiarity is not a ban on invention. A new pattern can be justified when it materially improves the task and remains learnable, reversible, and accessible."
common_failure_patterns:
- "Standard icons trigger unexpected actions."
- "Browser back behavior is intercepted in surprising ways."
- "Custom form controls lose native keyboard and focus behavior."
- "A familiar gesture performs a different destructive action without warning."
- "The product uses multiple internal patterns for the same common task."
evidence_types:
- "Platform conventions"
- "common product patterns"
- "component behavior"
- "labels"
- "user domain"
default_severity: "Medium to high when convention mismatch causes wrong actions; low for learnable novelty with little consequence."
typical_confidence: "High for mature conventions; medium when domain conventions vary."
related_rules:
- { id: "mental-model", title: "Mental Model", url: "https://layr.design/reference/mental-model" }
- { id: "law-of-similarity", title: "Law of Similarity", url: "https://layr.design/reference/law-of-similarity" }
- { id: "paradox-of-the-active-user", title: "Paradox of the Active User", url: "https://layr.design/reference/paradox-of-the-active-user" }
- { id: "aesthetic-usability-effect", title: "Aesthetic-Usability Effect", url: "https://layr.design/reference/aesthetic-usability-effect" }
```
## What to reason about
Compare controls against platform norms, domain conventions, and the product's existing patterns. Check semantics, keyboard behavior, focus, browser history, gestures, and labels. Novelty should be evaluated in relation to measurable benefit and learnability. A custom component that looks familiar while dropping accessibility behavior is a high-confidence problem because it borrows the expectation without delivering the behavior.
## 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
High — The magnifying-glass icon opens workspace settings. This icon carries a mature search expectation across desktop and mobile products. Use the established settings icon or label for workspace settings and reserve the magnifying glass for search behavior.
## Code reference
The same principle as markup. Compare the structure, not the class names.
```html
Workspace
Overview
Projects
Members
⌕
Magnifier expected: search · actual: account settings
```
```html
Workspace
Overview
Projects
Members
⌕
atlas
⌘K
Search behaves conventionally · novelty stays in the domain view
```
```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-kbd { padding: 0 var(--space-1); border: var(--border-thin) solid var(--color-border-strong); border-radius: var(--radius-xs); font-family: var(--font-mono); 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-icon-target { display: inline-grid; place-items: center; width: var(--space-6); height: var(--space-6); border: var(--border-thin) solid var(--color-border-strong); font-size: var(--text-2xs); }
.example-ui .scene-icon-target-active { border-color: var(--color-action); color: var(--color-accent-text); }
.example-ui .scene-menu { display: grid; justify-items: stretch; gap: 0; width: 100%; padding: var(--space-1); border: var(--border-thin) solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface-raised); box-shadow: var(--shadow-floating); }
.example-ui .scene-menu-group { padding: var(--space-2) var(--space-2) var(--space-1); color: var(--color-text-tertiary); font-size: var(--text-2xs); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.example-ui .scene-menu-item { padding: var(--space-1) var(--space-2); }
.example-ui .scene-topbar { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding-bottom: var(--space-2); border-bottom: var(--border-thin) solid var(--color-border-strong); }
.example-ui .scene-palette { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); width: 100%; padding: var(--space-2); border: var(--border-thin) solid var(--color-border-strong); background: var(--color-surface-raised); }
.example-ui .scene-palette-input { display: flex; align-items: center; font-size: var(--text-sm); }
.example-ui .scene-caret { display: inline-block; width: var(--border-thin); height: 1em; margin-left: 1px; background: var(--color-action); }
.example-ui { min-height: 15rem; }
/* resolved values */
:root {
--border-thin: 1px;
--font-mono: "Geist Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
--leading-snug: 1.35;
--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-6: 1.5rem;
--text-2xs: 0.6875rem;
--text-sm: 0.875rem;
--text-xs: 0.75rem;
--tracking-label: 0.06em;
}
```
## Weak vs stronger
- Weak: A search icon opens account settings because the team wanted a distinctive navigation language.
- Stronger: Search behaves conventionally, while the product's unique workflow appears in the domain-specific part of the experience.
## 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.