Laws Of Ux

Laws of UX

A framework of behavioural psychology principles applied to interface design. These laws describe how humans perceive, decide, and act -- use them to design interfaces that work with human cognition, not against it.

This skill focuses on behavioural laws (Fitts's, Hick's, Miller's, etc.). For usability heuristics, see ux-heuristics. For visual grouping principles, see gestalt-ui.

Core Principle

Design for how humans actually behave, not how they should behave. Users don't read -- they scan. They don't optimise -- they satisfice. They don't remember -- they recognise. Every interaction design decision should be grounded in observable human behaviour, not designer assumptions.

Scoring

Goal: 10/10. When reviewing or designing interactions, rate 0-10 based on alignment with these behavioural laws.

• 9-10: Interactive targets are appropriately sized and placed. Choices are manageable. Response times feel instant. Progress is visible. Memory load is minimal.
• 7-8: Most interactions follow the laws. Minor issues: a few small targets, one overloaded menu, occasional missing feedback.
• 5-6: Some laws applied, others ignored. Noticeable friction: too many choices, missing progress indicators, slow feedback.
• 3-4: Significant violations. Small touch targets, overwhelming option lists, no loading feedback, heavy memory demands.
• 1-2: Laws systematically violated. Interface fights human cognition at every step.

The Laws of UX Framework

1. Fitts's Law -- Size and Distance Matter

Core concept: The time to reach a target is a function of the distance to and size of the target. Larger, closer targets are faster and easier to hit.

Why it works: Motor control follows a logarithmic speed-accuracy trade-off. Smaller targets require slower, more precise movements.

Key insights:

• Minimum touch target: 44x44 CSS pixels (10mm x 10mm physical, per MIT Touch Lab)
• Add padding between adjacent interactive elements to prevent mis-taps
• Screen edges and corners are effectively infinite-size targets (cursor stops at edge)
• Place frequently used actions near the cursor's resting position or thumb zone
• Primary actions should be the largest interactive elements in their context

Product applications:

Ethical boundary: Never make important actions (unsubscribe, delete account, reject cookies) deliberately small or hard to reach.

See: references/motor-laws.md

2. Hick's Law -- Fewer Choices, Faster Decisions

Core concept: Decision time increases logarithmically with the number and complexity of choices. More options = more cognitive effort = slower action.

Why it works: Each additional option requires evaluation and comparison. The brain processes choices sequentially, not in parallel.

Key insights:

• Limit top-level navigation to 5-7 items
• Use progressive disclosure: show details on demand, not all at once
• Break complex processes into sequential steps (wizards over mega-forms)
• Highlight recommended options to reduce decision effort
• Categorise long lists instead of presenting flat lists
• "Choice overload" causes decision paralysis when options exceed ~4 meaningful alternatives

Product applications:

See: references/decision-laws.md

3. Miller's Law -- Chunk Information

Core concept: Working memory holds approximately 7 +/- 2 items. Beyond this, information overflows and is forgotten or confused.

Why it works: Short-term memory has a fixed capacity. Chunking groups individual items into meaningful units, effectively multiplying capacity.

Key insights:

• Break long sequences into chunks: (555) 123-4567 not 5551234567
• Limit items per group to 5-9 (navigation sections, tab groups, option lists)
• Use headings and visual separators to chunk content on a page
• Don't interpret this as "menus must have exactly 7 items" -- it's about cognitive load, not a magic number

Product applications:

See: references/memory-laws.md

4. Jakob's Law -- Users Expect Convention

Core concept: Users spend most of their time on other sites. They prefer your interface to work the same way as interfaces they already know.

Why it works: Familiar patterns leverage existing mental models. Users don't need to learn new interactions -- they transfer knowledge from past experience.

Key insights:

• Logo top-left links to home (universal convention)
• Search in the top-right or top-centre
• Shopping cart icon for e-commerce
• Hamburger menu = hidden navigation (mobile)
• "Settings" = gear icon; "Profile" = avatar/circle
• Innovate on content and value, not on basic interaction patterns
• When you must break convention, provide clear signifiers and instructions

Product applications:

Critical rule: Every deviation from convention must earn its place. If users need to learn something new, the benefit must clearly outweigh the learning cost.

See: references/decision-laws.md

5. Doherty Threshold -- Speed Builds Flow

Core concept: Productivity soars when response time is under 400ms. Above this, users perceive a delay and lose their sense of flow.

Why it works: Below 400ms, the interaction feels instantaneous -- the brain doesn't register waiting. Above it, the user's attention shifts from the task to the system.

Key insights:

• < 100ms: Feels instantaneous. No feedback needed for direct manipulation (clicks, toggles)
• 100-400ms: Subtle indicator (button state change, micro-animation)
• 400ms-2s: Spinner or skeleton screen required
• 2-10s: Progress bar with percentage

• 10s: Progress bar + status messages explaining what's happening

• Use optimistic UI: show the result immediately, sync in the background
• Animate transitions (300-500ms) to mask loading time

Product applications:

See: references/motor-laws.md

6. Von Restorff Effect -- Distinctiveness Creates Memory

Core concept: When multiple similar objects are present, the one that differs from the rest is most likely to be remembered.

Why it works: The brain allocates more attention and memory to novel or distinctive stimuli. Contrast is a survival mechanism.

Key insights:

• Make the primary CTA visually distinct from all other buttons
• Highlight the recommended pricing plan with a different style
• Use distinctive styling for important notifications or alerts
• Sparingly: if everything is highlighted, nothing stands out (see Focal Points in gestalt-ui)
• Accessibility: don't rely on colour alone for distinctiveness -- use size, shape, position, and text

Product applications:

7. Peak-End Rule -- Moments That Matter

Core concept: People judge an experience by its peak moment (most intense point) and its ending, not by the average of all moments.

Why it works: Memory is constructive, not comprehensive. The brain stores emotional highlights and the final state, then generalises from those.

Key insights:

• Optimise the first impression (landing, onboarding) and the final interaction (confirmation, thank-you)
• Error recovery is a peak moment -- handle it gracefully and users forgive other friction
• A frustrating checkout can ruin an otherwise excellent browsing experience
• Celebratory moments (achievement unlocked, order confirmed) create positive peaks
• The last step of any flow disproportionately influences overall satisfaction

Product applications:

8. Aesthetic-Usability Effect -- Beauty Buys Tolerance

Core concept: Users perceive aesthetically pleasing designs as more usable, even when they're objectively not.

Why it works: Visual appeal creates positive emotional responses that bias perception. Users are more patient, more forgiving, and more willing to explore beautiful interfaces.

Key insights:

• Visual polish increases tolerance for minor usability issues
• First impressions are disproportionately influenced by visual quality
• But: aesthetics cannot compensate for fundamentally broken interactions
• Invest in visual refinement after getting the interaction model right
• A beautiful but unusable interface is worse than an ugly but functional one

9. Tesler's Law -- Complexity Must Live Somewhere

Core concept: Every system has irreducible complexity that cannot be eliminated. The question is whether the user or the system deals with it.

Why it works: Complexity is conserved -- simplifying the user's experience means the system absorbs that complexity. The goal is to move complexity away from the user wherever possible.

Key insights:

• Smart defaults reduce decisions the user must make
• Auto-detection (location, language, currency, timezone) absorbs complexity
• Pre-filling forms with known data moves complexity to the system
• But: don't hide essential controls behind too much "magic" -- users need to feel in control
• The simplest UI is not always the best UI -- sometimes showing complexity is appropriate (power tools)

Product applications:

10. Postel's Law -- Be Forgiving with Input

Core concept: Be liberal in what you accept, conservative in what you send. Accommodate varied input; produce clean output.

Why it works: Users input data in unpredictable formats. Fighting their format creates friction. Accepting and normalising silently creates flow.

Key insights:

• Accept phone numbers with or without country code, spaces, dashes, parentheses
• Accept dates in multiple formats and normalise to one display format
• Trim whitespace, fix capitalisation, strip formatting silently
• Display output in a clean, consistent format regardless of input
• Forgive typos in search (fuzzy matching, "did you mean...?")

Product applications:

11. Goal-Gradient Effect -- Proximity to Finish Motivates

Core concept: Motivation increases as users approach their goal. The closer to completion, the harder they'll work.

Why it works: Progress toward a visible goal triggers dopamine release. The brain rewards effort more as the finish line approaches.

Key insights:

• Show progress bars in multi-step processes
• Start progress slightly filled (artifical advancement increases completion)
• "Step 2 of 4" is more motivating than showing all steps as equally distant
• Checklists with some items pre-checked leverage this effect
• Loyalty programs and streaks use goal-gradient extensively

Product applications:

Combining Laws

Laws work together. The strongest designs apply multiple laws simultaneously:

Common Mistakes

Quick Diagnostic

Reference Files

• references/motor-laws.md -- Fitts's Law and Doherty Threshold with sizing tables and response time guidelines
• references/decision-laws.md -- Hick's Law, Jakob's Law, choice architecture, and progressive disclosure
• references/memory-laws.md -- Miller's Law, Serial Position Effect, Zeigarnik Effect, and chunking strategies

Further Reading

• Jon Yablonski, Laws of UX
• Paul Fitts, "The Information Capacity of the Human Motor System" (1954)
• William Hick, "On the Rate of Gain of Information" (1952)
• George Miller, "The Magical Number Seven" (1956)