Reference · lawsofux.com

Laws of UX

Every law. Animated, explained, with examples clear enough for anyone. 🌿

Cognitive Load & Memory

Without chunking
0
4
4
3
3
2
3
1
2
6
With chunking
0
4
4
3
3
2
3
1
2
6
Memory

Miller's Law

"The average person can only keep 7 (±2) items in working memory."
Don't overwhelm users with too many items at once. Group information into digestible clusters.
A phone number split as 044 332 31-26 is easier to hold in mind than 0443323126.
Mental cost per element
essential
consider
remove
Simplicity

Cognitive Load

"The amount of mental resources needed to understand and interact with an interface."
Every element on screen costs the user mental energy. Remove anything that doesn't earn its place.
A settings page with 40 options forces users to process all of them just to find one.
Unstructured
Grouped
Organisation

Chunking

"Individual pieces of information grouped together into a meaningful whole."
Related content grouped together is processed as a single unit, reducing mental effort.
Form fields grouped by topic (Personal / Address / Payment) rather than one continuous list.
step 1
✓
step 2
✓
step 3
?
state visible → no memory needed
Memory

Working Memory

"A cognitive system that temporarily holds and manipulates information needed to complete tasks."
Users can't hold much in mind at once. Design so they don't have to — make current state visible.
Progress bars, breadcrumbs, and step summaries act as external working memory for the user.

Decision Making & Choice

Decision time grows with options:
2
fast
5
medium
9
slow
Decisions

Hick's Law

"The time it takes to make a decision increases with the number and complexity of choices."
More choices = slower decisions. Simplify menus, reduce options, use progressive disclosure.
A remote control with 3 buttons is used immediately. A remote with 60 buttons is put down and ignored.
❌ Too many options
Option A
Option B
Option C
Option D
Option E
Option F
Option G
Option H
→ user abandons
✓ Curated options
Starter
Pro
Teams
→ user decides confidently
Decisions

Choice Overload

"The tendency to get overwhelmed when presented with a large number of options."
Too many choices leads to paralysis and abandonment. Curate options — don't just list everything possible.
Offer 3 clearly differentiated pricing plans, not 12.
What the user sees
☕ Order
→
What happens behind it:
auth
payment
inventory
queue
notify
log
Complexity can't vanish — it moves to the system.
Complexity

Tesler's Law

"For any system there is a certain amount of complexity which cannot be reduced."
Complexity doesn't disappear — it shifts. Simplify the UI and the system behind it grows more complex. Someone always absorbs it.
A "Send" button feels instant and simple. Behind it: email routing, spam checks, delivery queues, read receipts.
Over-designed
Essential only
Simplicity

Occam's Razor

"Among competing hypotheses, the one with the fewest assumptions should be selected."
The simplest solution that works is the best one. Remove every element that doesn't earn its place.
When two design solutions solve the same problem, the one with fewer components and edge cases wins.

Perception & Visual Grouping

Attention

Von Restorff Effect

"When multiple similar objects are present, the one that differs from the rest is most likely to be remembered."
Visual contrast creates hierarchy. One thing that stands out gets noticed and remembered.
One accent-colour button on a neutral page draws the eye immediately. It only works if it's rare.
Gestalt

Law of Proximity

"Objects that are near, or proximate to each other, tend to be grouped together."
Spatial closeness implies relationship. Elements that belong together should live together.
A label placed close to its input field is read as a pair — spacing communicates structure.
↑ same shape = perceived as one group; different = different role
Save
Share
Delete
↑ visual pattern communicates function
Gestalt

Law of Similarity

"The human eye tends to perceive similar elements as a complete picture, shape, or group."
Visual consistency communicates function. Elements that look the same are assumed to behave the same.
All primary actions share one visual style — so users know at a glance what's interactive.
❌ floating
✓ contained
Gestalt

Law of Common Region

"Elements sharing an area with a clearly defined boundary tend to be perceived as a group."
A boundary — border, background, shadow — tells users "these things belong together" more powerfully than spacing alone.
A card container turns floating text, an image, and a button into one unified piece of content.
Attention

Selective Attention

"The process of focusing attention only on a subset of stimuli — usually those related to our goals."
Users see what they're looking for and filter out everything else. Design for their goal, not your full feature set.
A user scanning a page for a "Download" button will not notice other elements until they find it.
Complex
→
Simplified
Gestalt

Law of Prägnanz

"Ambiguous or complex images are interpreted as the simplest form possible."
Users find the simplest interpretation of whatever they see. Design to guide that interpretation clearly.
An icon with too many lines reads as noise. Reduced to its essential shape, it reads in under a second.
1
2
3
4
Connection implies relationship — a journey, not isolated steps.
Gestalt

Law of Uniform Connectedness

"Elements that are visually connected are perceived as more related than elements with no connection."
Lines, shared backgrounds, and borders communicate relationship more powerfully than proximity alone.
Steps connected by a progress line read as a single journey — disconnected steps look like separate screens.

Behaviour & Motivation

1
2
3
4
pace
accelerates near the end
Motivation

Goal-Gradient Effect

"The tendency to approach a goal increases with proximity to the goal."
People move faster the closer they are to finishing. Showing progress motivates completion.
A checkout showing "Step 3 of 4" makes users push through — the finish line is visible.
✓
Choose a username
✓
Verify email address
Add a profile photo
Complete your bio
Memory

Zeigarnik Effect

"People remember uncompleted or interrupted tasks better than completed tasks."
Unfinished things nag at us. Incomplete indicators keep users returning to complete flows.
"Your profile is 60% complete" creates a cognitive pull that brings users back.
peak end start end
Memory of experience ≠ average of all moments
Memory

Peak-End Rule

"People judge an experience largely based on how they felt at its peak and at its end."
The whole journey matters less than its most intense moment and its final impression. Design both.
A warm, satisfying confirmation screen after a stressful sign-up flow rescues the entire experience.
Home
recalled
About
Blog
Contact
recalled
First + last items are remembered most. Middles get lost.
Memory

Serial Position Effect

"Users have a propensity to best remember the first and last items in a series."
The primacy and recency effect — beginnings and endings are remembered. Middles get lost.
Place your most important navigation items first and last. The ones in the middle receive the least attention.
📖
manual
👆
just clicks
Behaviour

Paradox of the Active User

"Users never read manuals but start using the software immediately."
Nobody reads onboarding. Design must be self-evident. Guidance must be in-context, not in a help document.
Tooltips, inline hints, and empty-state prompts — because the user has already closed the tutorial.
❌ Interrupted
✓ Uninterrupted
Friction breaks rhythm. Uninterrupted time enables deep focus.
Focus

Flow

"A mental state of full immersion — energized focus and enjoyment in the activity."
Design that removes unnecessary friction lets users enter a state of deep, productive focus.
Unnecessary confirmation dialogs, notifications, and mode switches all shatter a user's flow state.

Performance & Feedback

Response time
click
goal
200ms
✓
click
900ms
⟳
Speed

Doherty Threshold

"Productivity soars when a computer and its users interact at a pace under 400ms."
Under 400ms feels instant — users stay in control. Above it, they feel they're waiting and lose focus.
Skeleton screens and optimistic UI updates keep perceived speed high even when data loads slowly.
small
far
large
near
Interaction

Fitts's Law

"The time to acquire a target is a function of the distance to and size of the target."
Bigger, closer targets are reached faster. Make important actions large and easy to reach.
Primary action buttons should be large and close to the user's natural flow. Destructive actions should be small and away from it.
Accept input in any format the user provides…
jan 5th
→
2024-01-05
✓ clean
jan 5th
05/01/24
January 5
2024.1.5
→ all accepted
Robustness

Postel's Law

"Be liberal in what you accept, and conservative in what you send."
Accept user input in any reasonable format they provide, then output it in one clean, consistent form.
A date field that accepts "jan 5", "05/01", "January 5th" and normalises them all to the same format.

Mental Models & Expectations

✓ expected
? disorienting
Familiarity

Jakob's Law

"Users spend most of their time on other sites — they prefer your site to work the same way."
Don't reinvent conventions without strong reason. Users bring expectations from every product they've ever used.
A logo in the top-left, search in the top-right — deviating from these patterns creates unnecessary friction.
User's model
🗂
"folder"
match
System
📁
directory
Familiarity

Mental Model

"A compressed model based on what we think we know about a system and how it works."
Users arrive with assumptions about how things work. Design that matches their mental model feels instantly intuitive.
A folder icon works because it maps to a filing cabinet. Break that model and the interface becomes opaque.
Unpolished
SUBMIT
trust ★★☆☆☆
Considered
Continue →
trust ★★★★★
Bias

Aesthetic-Usability Effect

"Users often perceive aesthetically pleasing design as design that's more usable."
A considered, refined interface earns more tolerance for friction. Visual quality builds trust before a single interaction.
Users rate a polished interface as "easier to use" even when the underlying flow is identical to an unpolished one.
Anchoring bias
was
€99
now
€49
The first number shapes how we value the second — even if €49 is still expensive.
Bias

Cognitive Bias

"Systematic errors in thinking that influence our perception and decision-making."
Users are not rational. Decisions are shaped by shortcuts, context, and emotion. Design for how people actually think, not how they should think.
Anchoring: showing "was €99, now €49" makes €49 feel like a bargain — even if it never cost €99.
80%
80% of value
from 20% of features
Design for what matters most — first.
Priority

Pareto Principle

"For many events, roughly 80% of the effects come from 20% of the causes."
A small number of features represent the majority of user value. Prioritise ruthlessly and design those first.
Most users of any app rely on 3–4 core features 80% of the time. Design those beautifully before adding anything else.