The Laws of UX

These aren't opinions, they're research-backed principles about how humans perceive, process, and interact with interfaces. Know them, apply them, and you'll avoid the most common design mistakes.

Heuristic Laws

Jakob's Law

Users spend most of their time on other sites. They expect your site to work the same way.

This is the single most important UX law. Users don't arrive at your product with a blank slate. They bring expectations from every other product they've used.

Application:

• Use established conventions for navigation, buttons, and interactions
• Place elements where users expect them (logo top-left, search top-right, cart top-right)
• Don't reinvent patterns unless you have a very good reason and user research to back it

Real-world example:

When to break convention: Only when your research shows that a new pattern measurably outperforms the convention for your specific users. A/B test it.

Hick's Law

The time to make a decision increases logarithmically with the number and complexity of choices.

More options = slower decisions = more abandonment. This applies to navigation menus, feature lists, pricing pages, settings screens, and every other decision point in your interface.

The formula (simplified): Decision time = constant × log₂(number of choices + 1)

Application:

• Limit choices to 5-7 options at each decision point
• Use progressive disclosure to reveal complexity gradually
• Group related options to reduce perceived complexity
• Provide smart defaults so users can accept without choosing
• Highlight the recommended option on pricing pages

Before and after:

BEFORE (overwhelming):
┌──────────────────────────────────────────────────────────┐
│ Choose your plan:                                         │
│ ○ Free  ○ Starter  ○ Basic  ○ Standard  ○ Professional   │
│ ○ Business  ○ Enterprise  ○ Ultimate  ○ Custom            │
└──────────────────────────────────────────────────────────┘
Users freeze. Conversion drops.

AFTER (manageable):
┌──────────────────────────────────────────────────────────┐
│ Choose your plan:                                         │
│                                                           │
│  ┌────────┐  ┌─────────────┐  ┌────────────┐             │
│  │  Free  │  │ Pro ⭐      │  │ Enterprise │             │
│  │ $0/mo  │  │ $29/mo      │  │ Contact us │             │
│  │        │  │ MOST POPULAR│  │            │             │
│  └────────┘  └─────────────┘  └────────────┘             │
└──────────────────────────────────────────────────────────┘
3 clear options. Recommended option highlighted. Fast decision.

Practical thresholds:

Fitts's Law

The time to acquire a target is a function of the distance to and size of the target.

Big, close targets are fast. Small, distant targets are slow. This is physics-level UX. You can't argue with it.

The formula (simplified): Movement time = constant × log₂(distance / target width + 1)

Application:

• Make primary action buttons large and prominent (minimum 44×44px on touch)
• Place frequently-used actions in easily reachable areas
• Increase clickable/tappable areas beyond visible boundaries using padding
• Position related actions close together
• Use edge and corner targeting. Elements at screen edges are effectively infinite in one dimension (browser edges act as a wall that stops the cursor)

Practical examples:

/* BAD: Small click target, hard to hit */
.tiny-link {
  font-size: 12px;
  padding: 2px 4px;
  /* Effective target: ~60×16px — too small on mobile */
}

/* GOOD: Generous click target */
.easy-link {
  font-size: 14px;
  padding: 12px 16px;
  /* Effective target: ~92×40px — easy to tap */
}

/* BETTER: Invisible expanded hit area */
.icon-button {
  width: 24px;
  height: 24px;
  padding: 12px; /* Visual = 24px, tappable = 48px */
}

Distance matters too:

BAD: Confirm and Cancel far apart
┌──────────────────────────────────────────────┐
│ Delete this item?                             │
│                                               │
│ [Cancel]                          [Delete]    │
└──────────────────────────────────────────────┘
User's mouse travels far between options.

BETTER: Related actions close together
┌──────────────────────────────────────────────┐
│ Delete this item?                             │
│                                               │
│                       [Cancel]  [Delete]       │
└──────────────────────────────────────────────┘
Quick comparison and selection.

Miller's Law

The average person can hold 7 (±2) items in working memory.

This isn't about limiting lists to 7 items. It's about chunking: grouping information so the brain can process it as fewer units.

Application:

• Chunk information into groups of 3-5 items (modern research suggests the lower end)
• Break long processes into manageable steps
• Use visual grouping (borders, spacing, color) to reduce memory load
• Don't require users to remember information between screens
• Format data for scanning: phone numbers as (555) 123-4567, not 5551234567

Chunking in practice:

BEFORE (10 ungrouped items — hard to scan):
Settings: Notifications, Privacy, Security, Account, Billing,
          Appearance, Language, Integrations, API, Support

AFTER (3 chunks — easy to process):
Account:     Profile, Security, Billing
Preferences: Appearance, Language, Notifications
Connections: Integrations, API, Support

Gestalt Principles

These describe how humans perceive visual elements as unified wholes. Your brain is a pattern-matching machine, and these are its rules.

Law of Proximity

Elements placed close together are perceived as related. This is the most powerful grouping principle.

BAD: Equal spacing — no grouping:
┌───┐ ┌───┐ ┌───┐ ┌───┐ ┌───┐ ┌───┐
│ A │ │ B │ │ C │ │ D │ │ E │ │ F │
└───┘ └───┘ └───┘ └───┘ └───┘ └───┘
Users see 6 unrelated items.

GOOD: Proximity creates groups:
┌───┐ ┌───┐    ┌───┐ ┌───┐    ┌───┐ ┌───┐
│ A │ │ B │    │ C │ │ D │    │ E │ │ F │
└───┘ └───┘    └───┘ └───┘    └───┘ └───┘
Users see 3 groups of 2.

Rule of thumb: Space between groups should be at least 1.5× the space between items within a group.

Real-world application:

Form with poor proximity:        Form with good proximity:

Full name                        Full name
[_______________]                [_______________]
Email address                    Email address
[_______________]                [_______________]
Phone number
[_______________]                (24px gap)
                                 
Shipping address                 Phone number
[_______________]                [_______________]
City                             Shipping address
[_______________]                [_______________]
                                 City
                                 [_______________]

In the good version, personal info and address info are visually grouped by the extra space between them.

Law of Similarity

Elements that look similar are perceived as related (same color, shape, size, or orientation).

Application:

• All clickable elements should share visual traits (color, shape)
• All non-clickable text should look distinct from interactive elements
• Use consistent icon styles (don't mix outlined and filled icons)
• Same-type content should use the same card/layout style

BAD: Mixed styles confuse grouping
[Blue Button]  [Green Button]  [Blue Link]  [Red Button]

GOOD: Visual similarity shows function
[Blue Filled: Primary]  [Blue Outlined: Secondary]  [Red Text: Destructive]

Law of Closure

The mind fills in missing information to create complete shapes. You can suggest shapes without drawing them fully.

Application:

• Use implied boundaries rather than explicit borders everywhere
• Card layouts work without visible borders if spacing is consistent
• Progress indicators can show partial completion and users infer the whole

Law of Continuity

Elements arranged on a line or curve are perceived as more related than elements not on the line.

Application:

• Align form labels and inputs on the same vertical axis
• Use consistent left margins to create a strong reading line
• Timelines and step indicators rely on this principle

Law of Common Region

Elements within a shared boundary are perceived as a group, even more strongly than by proximity.

Application:

• Use cards to group related content
• Put related form fields inside a bordered section
• Use background color to define regions (e.g., a grey background behind a settings group)

Without common region:          With common region:
Name: John                      ┌─────────────────────────┐
Email: john@email.com           │ Personal Info            │
Phone: 555-0123                 │ Name: John               │
                                │ Email: john@email.com    │
Address: 123 Main St            │ Phone: 555-0123          │
City: Springfield               └─────────────────────────┘
State: IL                       ┌─────────────────────────┐
                                │ Address                  │
                                │ 123 Main St              │
                                │ Springfield, IL          │
                                └─────────────────────────┘

Law of Figure/Ground

People instinctively separate visual elements into foreground (figure) and background (ground).

Application:

• Modals and overlays use a darkened backdrop to push content behind
• Shadows on cards create depth, making them "float" above the background
• Active/selected states should feel elevated above inactive siblings

Cognitive Biases in UX

Von Restorff Effect (Isolation Effect)

Items that stand out visually are more likely to be remembered.

Application:

• Make CTAs visually distinct from all other elements
• Use a contrasting color for the primary action (only one per screen)
• Highlight the recommended pricing plan with color, size, or a badge

Example: On a pricing page with three white cards, make the middle card blue with a "Most Popular" badge. It stands out, gets remembered, and gets chosen more.

Serial Position Effect

Users best remember the first and last items in a series.

Application:

• Place the most important nav items first and last
• In a feature tour, put the key benefit first and the CTA last
• In mobile tab bars, put the primary action at the start or end position

Peak-End Rule

People judge experiences based on how they felt at the peak moment and at the end, not the average.

Application:

• End checkout with a satisfying confirmation (animation, clear receipt, "You're all set!")
• After a long form, show a positive summary rather than just "Submitted"
• Make onboarding's final step feel like an achievement, not another chore
• If an error occurs mid-flow, make the recovery experience positive

Anchoring Bias

People rely heavily on the first piece of information they encounter.

Application:

• Show the higher-priced plan first so the mid-tier feels like a deal
• Show "was $99, now $59". The original price anchors perceived value
• Display the most generous metric first ("Join 50,000+ customers")

Aesthetic-Usability Effect

Users perceive aesthetically pleasing designs as more usable, even when they aren't.

Application:

• Visual polish matters. It literally changes how users perceive functionality
• Invest in consistent styling, good typography, and proper spacing
• But never let visual polish override actual usability. Test both

Additional Key Laws

Pareto Principle (80/20 Rule)

80% of effects come from 20% of causes.

In practice:

• 80% of users use 20% of features. Find and optimize those features
• 80% of support tickets come from 20% of usability problems. Fix those first
• 80% of conversions come from 20% of pages. Focus testing there

Tesler's Law (Conservation of Complexity)

Every application has inherent complexity that cannot be removed. The question is: who handles it, the user or the system?

Application: Absorb complexity into the system whenever possible.

Postel's Law (Robustness Principle)

Be liberal in what you accept, conservative in what you send.

Application:

• Accept phone numbers in any format: (555) 123-4567, 555.123.4567, 5551234567
• Accept dates as "Jan 15", "1/15/2024", "15/01/2024"
• Trim whitespace from email inputs
• Output data in a single consistent format regardless of input

Doherty Threshold

Productivity soars when computer and user interact at a pace (<400ms) ensuring neither has to wait on the other.

Application:

• Respond to every user action within 400ms
• If a server response takes longer, show optimistic UI updates immediately
• Use skeleton screens and spinners to maintain the sense of progress
• Pre-fetch data for likely next actions

Zeigarnik Effect

People remember uncompleted tasks better than completed ones.

Application:

• Show progress bars on incomplete profiles ("Your profile is 60% complete")
• Use checklists that show remaining steps
• LinkedIn's profile strength indicator uses this to drive engagement

Quick Reference

Key Takeaways

• These laws aren't guidelines, they're descriptions of how humans actually work. You can't change human cognition; design around it.
• Jakob's Law is the most practically important. Before inventing a new pattern, check if a convention exists.
• Hick's Law applies everywhere you offer choices. Audit every screen for decision overload.
• Fitts's Law means your most important action should be the biggest, closest target.
• Gestalt principles are your tools for creating visual structure without borders and labels on everything.
• When in doubt, reduce. Fewer options, fewer elements, fewer steps.