UX Encyclopedia

Laws of Interaction Design

Quantified regularities of human performance. Use when sizing/placing controls, deciding menu length, setting performance budgets, or judging how much choice to expose.

Try it — Fitts's law. Adjust target size and distance; the index of difficulty (ID = log₂(2D/W)) updates live. Click the target to feel it.

Fitts's Law (1954)

Time to acquire a target is a function of distance to and size of the target (T = a + b·log2(2D/W); HCI commonly uses the Shannon form log2(D/W + 1), MacKenzie 1992). Implications:

  • Make frequent/primary actions large and close to the pointer/thumb.
  • Screen edges and corners are effectively infinite-width targets for a cursor (you can't overshoot them) — prime real estate on desktop.
  • On touch, this motivates minimum target sizes: 44×44 pt (Apple HIG), 48×48 dp (Material), 24×24 CSS px minimum (WCAG 2.2 SC 2.5.8, Level AA; 44×44 is the AAA "enhanced" level, SC 2.5.5).

Steering Law (Accot & Zhai 1997)

Steering law: a short, wide tunnel is fast to steer through; a long, narrow tunnel is slow and error-prone. Wide × short fast Narrow × long slow, error-prone — difficulty grows with length ÷ width T ∝ D / W (hover menus, sliders, long drags are steering tasks)
Steering a cursor through a corridor: widen the path or shorten it — or replace steering with clicking.

Extension of Fitts to constrained paths: time to steer through a tunnel is proportional to its length divided by its width — and difficulty grows much faster than for discrete pointing. Implications:

  • Nested hover menus are steering tasks: widen the corridor (generous submenu hit areas, hover-intent delays, diagonal-movement tolerance like Amazon's classic menu) or replace hover with click.
  • Sliders, drag-to-reorder, and gesture paths: shorter and wider is faster; don't demand precise long drags for common actions.

Hick–Hyman Law (1952/1953)

Hick's law: decision time rises with the logarithm of the number of options — each doubling of options adds a constant step of time. 24 816 options (each step doubles) decision time same added time per doubling
Computed log₂ curve: going from 2 → 4 options costs as much decision time as 8 → 16. Halving a long list barely helps; grouping it does.

Decision time grows with the log of the number of equally probable choices. Implications: fewer, well-grouped options decide faster; categorize long lists; progressive disclosure for advanced options. Caveats:

  • Applies to simple choice among known, equally likely options — not to complex deliberation, reading, or search.
  • Ordered/predictable lists (alphabetical, frequency-sorted) are scanned, not "decided," so length costs far less; experts with practiced choices approach constant time.
  • Don't over-apply: hiding options to shrink N can trade decision time for navigation time and discoverability (the Hick number that matters is options considered, not options that exist).

Miller (1956) and Cowan (2001) — working memory

Working memory holds about four chunks: ten separate digits overflow it; three chunks fit easily. working memory ≈ 4±1 chunks 10 items 4155550123 — overflows 3 chunks 4155550123 — fits Same ten digits. Chunking changes what counts as “one thing.”
Miller's 7±2 was about chunks; Cowan's revision puts the practical limit near 4. Format codes, group settings, never make memory carry raw items.

Miller's "magical number seven, plus or minus two" described short-term memory span for chunks; later work (Cowan) puts the practical working-memory limit nearer 4±1 chunks. Design implication: don't require users to hold items in memory across steps at all (recognition over recall); chunk numbers and codes (e.g., 4242 4242 4242 4242).

Weber's Law (Weber 1834; Fechner 1860)

Weber's law: the same absolute difference is obvious on a small base and invisible on a large one. 20 → 24 px +20% — obvious 100 → 108 px +8% — barely visible
Perception scales with ratios (ΔI/I), not absolute amounts — why type and spacing scales are built on multiplicative steps, and why near-miss differences read as sloppy.

The just-noticeable difference in a stimulus is proportional to its magnitude (ΔI/I ≈ constant). Implications:

  • Scales need ratio steps, not equal increments: type scales and spacing ramps built on multiplicative ratios read as even; +2 px is obvious on an icon, invisible on a hero.
  • To make two elements read as different levels, exceed the JND clearly; near-miss differences (15 px vs 16 px text) read as sloppy, not as hierarchy.
  • Incremental redesigns exploit it: changes below the JND go unnoticed — useful for gradual migration, dangerous for "we improved it, no one saw."

Postel's Law (robustness principle, RFC 761, 1980)

Postel's law: accept many messy input formats, display one canonical format. (415) 555-0123 415.555.0123 415 555 0123 parse liberally display one way: +1 415 555-0123 Accept liberally in — emit strictly out. The user never does the machine's parsing.
From TCP (RFC 761) to form fields: spaces, dots, dashes all parse; one canonical format displays.

"Be conservative in what you do, be liberal in what you accept from others." An engineering convention (from TCP), applied to UX by analogy: accept flexible, messy human input; emit strict, predictable output. Accept spaces and dashes in card/phone numbers, trim whitespace, take multiple date formats — then display one canonical format. Never make the user do the machine's parsing.

Jakob's Law (Nielsen)

Jakob's law: users expect your interface to follow the conventions of the sites they already use; an inverted layout creates friction. Convention: logo left, nav right, content below “Where am I?” Every other site trained your user. Deviate only where deviation IS the product.
Three sites share the skeleton users have already learned; the fourth makes them relearn it for no payoff.

Users spend most of their time on other sites/apps, so they expect yours to work like the ones they already know. Deviate from convention only where the deviation is your product's actual value.

Occam's Razor — as heuristic, not law

Among designs that accomplish the same task, prefer the one with the fewest elements and assumptions. It's a philosophical heuristic, not measured science — and it caps against Tesler's law: simplify presentation, but the task's irreducible complexity must still live somewhere.

Response-time thresholds (Miller 1968; Card et al. 1991; Nielsen 1993)

Response-time thresholds on a log scale: 0.1 seconds feels instant, 1 second preserves flow, 10 seconds is the limit of attention. 0.1 s0.4 s1 s10 s instantflow holdsattention ends no indicator neededsubtle busy signalprogress + cancel Doherty threshold productivity climbs under ~400 ms
The three thresholds (log scale) and the feedback each demands — the same playbook as Feedback, Loading, Errors & Recovery.
  • ~0.1 s: feels instantaneous — direct manipulation, keypress feedback.
  • ~1 s: flow of thought preserved, though delay is noticed.
  • ~10 s: limit of attention; beyond this, show progress and allow other work. Related: Doherty & Thadani (1982, IBM) reported productivity rising sharply as system response fell below ~400 ms ("Doherty threshold").

Other reliable effects

Serial-position effect: recall is high for the first and last items and lowest in the middle. firstlast recall
Serial position — ends are remembered; bury nothing important mid-list.
Von Restorff effect: one visually distinct item among uniform items is the one noticed and remembered. One accent works. Six accents are none.
Von Restorff — distinctiveness is a budget; spend it on the primary action.
Zeigarnik effect: a completed task fades from memory while an incomplete task stays mentally open. done — forgotten 70% — stays open in memory checklists, resumable drafts, profile meters
Zeigarnik — open loops pull users back; completion releases them.
Aesthetic-usability effect: the more attractive version is perceived as easier to use even when measured usability is equal. measured usability: equal perceived ease plain polished beauty buys patience — and hides flaws in tests
Aesthetic–usability — attractive interfaces are perceived as easier; test ugly prototypes too.
Goal-gradient effect: effort accelerates as the goal gets closer. startgoal effort rises near the end
Goal gradient — progress accelerates near completion; endowed head starts exploit this (ethics file applies).
Peak-end rule: memory of an experience is set by its most intense moment and its ending, not its average. peak end average (not remembered) invest in the best moment and the last screen
Peak–end — the memory is the peak plus the ending; a rough checkout taints a great session.
Pareto principle: a small share of features accounts for most of the use. features usage optimize the core path first
Pareto — a rule of thumb, not a law: the few features doing most of the work deserve most of the polish.
Tesler's law: a task's irreducible complexity must live somewhere — either the system absorbs it or the user carries it. the task's complexity who carries it: system absorbs user
Tesler — complexity is conserved; good design moves it into the system, not onto the user.
  • Serial-position effect (Ebbinghaus; Murdock 1962): first and last items in a list are best remembered — put key items at ends of menus/lists.
  • Von Restorff / isolation effect (1933): the visually distinct item is remembered/noticed — this is why a single accented primary CTA works, and why it stops working when everything is accented.
  • Zeigarnik effect (1927): interrupted/incomplete tasks are remembered better than completed ones — basis for progress indicators, checklists, and profile-completeness meters.
  • Aesthetic–usability effect (Kurosu & Kashimura 1995; Tractinsky et al. 2000): visually pleasing interfaces are perceived as easier to use and earn more tolerance for minor problems. Danger: pretty prototypes can mask usability issues in testing.
  • Goal-gradient effect (Hull 1932; Kivetz, Urminsky & Zheng 2006): effort accelerates as people near a goal; artificial advancement (a head start on a reward card) increases completion.
  • Peak–end rule (Kahneman et al. 1993): experiences are remembered by their most intense moment and their ending, not their average — invest in the flow's climax and last step (confirmation, offboarding). Details in Emotional Design & Trust.
  • Pareto principle (empirical rule of thumb): a minority of features drives the majority of use — optimize the core path first.
  • Tesler's law of conservation of complexity: irreducible complexity must live somewhere; prefer absorbing it into the system over pushing it onto the user (attributed to Larry Tesler; popularized in Saffer, Designing for Interaction).

Sources

  • Fitts, P. M. (1954). "The information capacity of the human motor system…" Journal of Experimental Psychology, 47(6). MacKenzie, I. S. (1992), Human-Computer Interaction, 7(1) — Shannon formulation.
  • Accot, J. & Zhai, S. (1997). "Beyond Fitts' law: Models for trajectory-based HCI tasks." Proc. CHI '97.
  • Hick, W. E. (1952), QJEP; Hyman, R. (1953), JEP — choice reaction time.
  • Miller, G. A. (1956). "The Magical Number Seven, Plus or Minus Two." Psychological Review, 63(2). Cowan, N. (2001), BBS, 24(1).
  • Fechner, G. T. (1860). Elemente der Psychophysik — Weber's law.
  • Postel, J. (1980). RFC 761, Transmission Control Protocol, §2.10.
  • Nielsen, J. (1993). Usability Engineering, ch. 5 (response times); "Jakob's Law," nngroup.com. Miller, R. B. (1968). "Response time in man-computer conversational transactions." Proc. AFIPS.
  • Doherty, W. J. & Thadani, A. J. (1982). "The economic value of rapid response time." IBM technical report.
  • Kurosu, M. & Kashimura, K. (1995), CHI '95; Tractinsky, N., Katz, A. & Ikar, D. (2000). "What is beautiful is usable." Interacting with Computers.
  • Kahneman, D., Fredrickson, B. L., Schreiber, C. A. & Redelmeier, D. A. (1993). "When more pain is preferred to less: Adding a better end." Psychological Science, 4(6).
  • Kivetz, R., Urminsky, O., & Zheng, Y. (2006). JMR, 43(1).
  • Yablonski, J. (2020; 2nd ed. 2024). Laws of UX. O'Reilly — accessible compilation of the above (lawsofux.com).
↑↓ to navigate · Enter to open · Esc to close