Skip to main content

Laws of UX

Practical UX principles backed by psychology that every developer building web interfaces should know. This page summarizes the 21 laws collected by Jon Yablonski at lawsofux.com, organized into five thematic groups with concrete implementation guidance.

This is a developer-oriented reference — each law is condensed into what matters when you're writing code and making UI decisions. For deeper reading, case studies, and the full academic context, see the book Laws of UX (O'Reilly, 2nd ed., 2024).

tip

Use this page as a reference, not a memorization exercise. Skim the categories, then come back when designing a specific feature.

Making Decisions Easier​

These laws address cognitive load — how much thinking your UI demands from users.

Hick's Law​

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

When users face too many options, they freeze. Limit primary navigation to 5–7 items. Break complex forms into logical steps. Use progressive disclosure — show essentials first, reveal advanced options on demand. Replace long dropdowns (50+ items) with searchable or filterable inputs.

— William Edmund Hick & Ray Hyman, 1952

Miller's Law​

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

Chunk information into groups of 3–5 items. Format phone numbers as (555) 123-4567, not 5551234567. Limit tabs to roughly 5–7. If a data table has 15 columns, decide which ones are essential and hide the rest by default.

Miller's paper was about short-term memory capacity — it does NOT mean every list must have exactly 7 items. The takeaway is to group and chunk, not to count to seven.

— George A. Miller, 1956

Occam's Razor​

The simplest solution is usually the best.

Before adding a tooltip, modal, or settings panel — ask if it's truly needed. Prefer removing complexity over adding explanatory UI. If you need an onboarding tutorial to explain your interface, the interface is too complex. Every layer of explanation is a signal that the underlying design can be simplified.

— William of Ockham, 14th century

Parkinson's Law​

Any task will inflate until all of the available time is spent.

Reduce form fields to the minimum required. Auto-fill what you can — geolocation for country, browser autofill via autocomplete attributes. Set reasonable defaults. Every field you remove increases completion rate. If a form asks for information you could derive or defer, cut it.

— Cyril Northcote Parkinson, 1955

Shaping User Behavior​

These laws govern how users interact with elements and respond to feedback loops.

Fitts's Law​

The time to reach a target depends on its distance and size. Larger, closer targets are faster to select.

Make interactive elements large enough to click and tap easily — at least 24×24 CSS pixels to meet WCAG 2.2 AA, with larger touch targets such as 44×44 still recommended for comfort. Place primary actions near the user's current focus. Avoid tiny icon-only buttons without adequate hit-area padding. Make the primary CTA button visually and physically larger than secondary actions.

See also Accessibility as Design for touch target guidelines.

— Paul Fitts, 1954

Goal-Gradient Effect​

People accelerate their behavior as they approach a goal.

Use progress indicators in multi-step forms — steppers, progress bars, "Step 2 of 5." Show completion percentage in onboarding flows. Consider starting progress with some initial value ("Profile 20% complete") to leverage the endowed progress effect — users who feel they've already started are more likely to finish.

See Common UI Patterns for loading state patterns.

— Clark Hull, 1932

Doherty Threshold​

Productivity soars when response time is under 400ms.

Target under 400ms for all UI responses. Use optimistic UI updates, skeleton screens, and progress indicators to bridge any gaps. Even perceived performance matters — an animated progress bar feels faster than a static spinner. Preload data the user is likely to need and use React.startTransition or requestIdleCallback for deferred work.

— Walter J. Doherty & Arvind J. Thadani, 1982

Postel's Law (Robustness Principle)​

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

Accept flexible input formats — phone numbers with or without dashes, names with accents and special characters, dates in multiple formats. Parse and normalize on the backend. Display output in a clean, consistent format. Never reject a form submission for trivial formatting issues like extra spaces or missing hyphens.

See Accessibility as Design for related tolerance patterns.

— Jon Postel, 1980

Tesler's Law (Conservation of Complexity)​

Every application has inherent complexity that cannot be removed — only moved between the user and the developer.

Absorb complexity on the engineering side so users don't have to deal with it. Use smart defaults, auto-detection, progressive disclosure, and auto-formatting. If configuring a date range is complex, offer preset shortcuts ("Last 7 days", "This month") alongside the full date picker. The developer's job is to handle the hard parts so the user doesn't have to.

— Larry Tesler, mid-1980s

Leveraging Perception​

These laws explain how users see and interpret visual information.

Aesthetic-Usability Effect​

Users perceive visually pleasing designs as more usable — even when they're not.

Invest in polished visual design: consistent spacing, quality typography, harmonious colors. A well-designed interface builds trust and increases user tolerance for minor issues. Use a component library like MUI or shadcn/ui to get professional aesthetics out of the box.

See Visual Design Fundamentals for practical guidance on spacing, typography, and color.

— Masaaki Kurosu & Kaede Kashimura, 1995

caution

Beauty does not excuse broken functionality. The aesthetic-usability effect means users tolerate small issues in a polished UI — not that they'll accept a broken one. Get the usability right first, then polish the visuals.

Law of Prägnanz (Simplicity)​

People perceive and interpret complex visuals in the simplest form possible.

Simplify layouts. Use clean, simple shapes and obvious visual structures. Remove unnecessary borders, decorations, and color variations. Every element on screen should have a clear purpose. If an element doesn't serve a function, remove it. When in doubt, strip away — the remaining design will be stronger.

— Max Wertheimer (Gestalt psychology), 1923

Law of Common Region​

Elements within a shared boundary are perceived as a group.

Use cards, panels, and bordered sections to visually group related content. A subtle background color or border around a form section communicates "these fields belong together" more clearly than proximity alone. This principle is why card-based UIs and well-structured dashboard panels feel intuitive — the boundary does the grouping work for you.

— Stephen Palmer, 1992

Law of Proximity​

Objects near each other are perceived as a group.

Place labels close to their form fields — immediately above or to the left, never far away. Group related actions together. Use more whitespace between unrelated sections than within them. In a settings page, the spacing between setting groups should be visibly larger than the spacing between individual settings within a group.

See Visual Design Fundamentals for spacing guidelines.

— Gestalt psychology, 1923

Law of Similarity​

Similar elements are perceived as part of the same group, even when separated.

Style interactive elements consistently — all primary buttons should share the same color, shape, and size. If a text link looks like a heading, users won't click it. Maintain consistent styling for all items of the same type: cards, list items, navigation links. Break visual consistency only when you need to signal that something is different.

— Gestalt psychology, 1923

Law of Uniform Connectedness​

Elements visually connected by lines, arrows, or shared containers are perceived as more related.

Use visual connectors in step indicators (lines between steps), breadcrumbs (separators), and timelines. Tree views and org charts should use visible lines to show relationships. Stepper components connect steps with a line because it reinforces sequence — use the same pattern in any UI where order matters.

— Stephen Palmer & Irvin Rock, 1994

Memory & Attention​

These laws address what users remember, notice, and carry away from an experience.

Von Restorff Effect (Isolation Effect)​

When multiple similar objects are present, the one that differs is most likely to be remembered.

Visually differentiate the primary CTA from secondary actions using color, size, or weight. Highlight the recommended pricing tier with a distinct border or badge. Use labels like "New" or "Popular" sparingly for emphasis. The key constraint: don't make everything stand out — if every element is bold, nothing is.

— Hedwig von Restorff, 1933

Serial Position Effect​

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

Place the most important navigation items at the beginning and end of menus. In mobile bottom navigation, put the primary action first or last — Home first, Profile last. This is why mobile apps place key tabs at the edges of the bottom bar and bury less-used items in the middle.

— Hermann Ebbinghaus, 1885

Zeigarnik Effect​

People remember uncompleted tasks better than completed ones.

Use progress indicators for multi-step processes — profile completion meters, onboarding checklists, setup wizards. LinkedIn's "profile strength" meter is a textbook example. Show users what they haven't finished yet to drive re-engagement. Pair this with the Goal-Gradient Effect for maximum impact.

— Bluma Zeigarnik, 1927

Peak-End Rule​

People judge an experience based on its most intense moment and its ending, not the average.

Invest in delightful success states — clear confirmation messages, smooth animations on completion. The checkout confirmation page matters more than most internal pages. Graceful error recovery matters more than preventing every error. End every user flow on a positive, unambiguous note: "Your changes have been saved" beats a silent redirect.

— Daniel Kahneman, 1993

Working With Expectations​

These laws address the assumptions users bring to your interface from their experience elsewhere.

Jakob's Law​

Users spend most of their time on other sites — they prefer yours to work the same way.

Follow established conventions: logo top-left linking to home, primary navigation at the top or left, search icon as a magnifying glass, shopping cart top-right, 404 pages with a "go home" link. Don't reinvent standard patterns unless you have a compelling reason. Use recognized UI patterns from component libraries rather than inventing custom interactions.

— Jakob Nielsen, 2000

Pareto Principle (80/20 Rule)​

Roughly 80% of effects come from 20% of causes.

Identify the critical 20% of features your users actually use and make them prominent, fast, and polished. Deprioritize or hide rarely-used features behind menus or settings pages. Use analytics to find the top user flows and optimize those first. Not every feature deserves equal screen real estate — give the most space and attention to the actions that matter most.

— Vilfredo Pareto, 1896

Further Reading​