UI/UX Design Principles (Laws of UX)¶
The Laws of UX are heuristics borrowed from psychology and human factors research. They are not rules that a design either passes or fails; they are predictions about how people will perceive and behave, useful for arguing about a design before it reaches users and for explaining why a usability test went the way it did.
Each law below is stated, illustrated with a small visual example, and followed by what it means in practice. The visuals are deliberately abstract: the point is the perceptual effect, not a particular product's styling.
Perception and grouping¶
The Gestalt laws describe how the eye groups things before the reader has consciously parsed anything. Layout that fights them costs attention on every screen.
Law of Proximity¶
Objects near each other are perceived as related.
Spacing is the cheapest grouping tool there is: no borders, no colour, no labels. A form field whose label sits closer to the previous input than to its own is mis-grouped no matter what the markup says.
Law of Common Region¶
Elements inside a shared boundary are perceived as a group, and a boundary beats proximity when the two disagree.
This is why cards work, and why a card drawn around the wrong set of controls is worse than no card at all.
Law of Similarity¶
Elements that share visual characteristics are perceived as having the same function.
The failure mode is the expensive one: underlined non-links, buttons styled as text, and two different components sharing one appearance teach users a rule that then breaks.
Law of Uniform Connectedness¶
Elements that are visually connected, by a line, a rail, an enclosing shape, are perceived as more related than elements that are merely near or alike.
Stepper rails, tree-view guides, and the line joining a legend swatch to its series all exploit this.
Law of Prägnanz¶
The eye resolves ambiguous or complex forms into the simplest interpretation available.
Simple, regular shapes are processed faster and remembered better, which is the whole argument for restrained iconography and plain layout grids.
Attention and memory¶
Miller's Law and Working Memory¶
The average person holds about seven (± two) items in working memory, and that figure is generous; later work puts the practical limit closer to four. Working memory is also volatile: an interruption wipes it.
The design consequence is chunking, not "never show more than seven things". A list of 200 products is fine; a step that requires remembering seven values from a previous screen is not. Carry state forward for the user instead of asking them to hold it.
Cognitive Load¶
Total mental effort spent using the interface. Effort spent decoding the interface is effort not spent on the task.
Selective Attention¶
People filter out anything that resembles what they came to ignore.
Important messages placed in ad-shaped containers are not seen. Neither are consent notices styled like marketing.
Serial Position Effect¶
Items at the beginning and end of a sequence are recalled best; the middle sags.
Put the primary action first or last in a navigation set. The middle of a long menu is where features go to be forgotten.
Von Restorff Effect (Isolation Effect)¶
When several similar objects are present, the one that differs is remembered.
Do not carry the emphasis on colour alone, that fails for colour-blind users and in monochrome. Pair it with weight, size, or position.
Zeigarnik Effect¶
Uncompleted tasks are remembered better than completed ones, and the open loop creates pressure to close it.
Progress indicators, "2 steps left", and saved-but-unsent drafts all use it. It becomes a dark pattern when the loop is manufactured rather than real.
Goal-Gradient Effect¶
Motivation increases as people approach a goal, and apparent progress counts.
Grant artificial head-starts, and make the remaining distance visible. Never show progress that isn't real.
Decision and action¶
Hick's Law¶
Decision time grows logarithmically with the number and complexity of choices:
The fix is rarely deletion, it is progressive disclosure, categorisation, and a sane default. Note the "complexity" term: five unfamiliar options can cost more than fifty familiar ones.
Choice Overload¶
Beyond decision time, too many comparable options reduce satisfaction and the likelihood of choosing at all.
Highlight a recommended plan, cap comparison sets, and let filters do the elimination.
Fitts's Law¶
Time to acquire a target depends on its distance and size:
Practical consequences: touch targets of at least 44 × 44 px, the whole row clickable rather than the four-word link inside it, and destructive actions deliberately not adjacent to the ones people click all day. Screen edges are effectively infinite in size, a cursor cannot overshoot them, which is why edge-docked menus and bars are fast.
Doherty Threshold¶
Productivity rises sharply when system response stays under 400 ms, because neither the user nor the computer waits for the other.
When the work genuinely takes longer, buy back the perception: optimistic UI, skeleton screens, progress that reflects real progress, and useful work started before the user finishes typing.
Tesler's Law (Conservation of Complexity)¶
Every system has irreducible complexity. The only question is who absorbs it, the user, or the engineering.
Address parsing, timezone handling, and retry logic are complexity someone pays for. Paying it once in code beats charging every user for it forever.
Occam's Razor¶
Among designs that meet the requirements, prefer the one with the fewest parts, and remove elements only until removing one more would break the design.
Enter a term to search the catalogue below
▭ Go · clear · advanced · help
Pareto Principle¶
Roughly 80% of effects come from 20% of causes. In products: a small subset of features carries most of the usage.
Measure before deciding which 20% it is. The tail still matters, it just should not be the default view.
Parkinson's Law¶
Work expands to fill the time available. Users take as long as they are given.
or
enter card details manually
Making a task possible to complete quickly is not enough, the fast path must also be the obvious one.
Expectation¶
Jakob's Law¶
Users spend most of their time on other sites, so they expect yours to work like the ones they already know.
Innovate where it differentiates the product. Do not innovate on the location of the close button.
Mental Model¶
People carry a belief about how a system works, formed from every similar system they have used. Friction appears when the design's model and the user's model diverge.
flowchart LR
UM["User's mental model<br/>'Folders hold my files'"] --> GAP{Mismatch?}
SM["System model<br/>Tags, not folders"] --> GAP
GAP -->|"aligned"| E["Feels obvious"]
GAP -->|"diverged"| F["Errors, support tickets,<br/>'this app is confusing'"]Match the model, or teach it deliberately, a metaphor, an onboarding pass, an empty state that shows the intended shape.
Postel's Law (Robustness Principle)¶
Be liberal in what you accept, and conservative in what you send.
+1 (415) 555-0132✗ Digits only, no spaces or symbols
+1 (415) 555-0132Saved as +14155550132
Accept whatever the human can plausibly type; be strict and predictable in what you output and store. Liberal parsing is not permission to skip validation at trust boundaries, normalise then validate.
Paradox of the Active User¶
Users never read the manual. They start acting immediately, so learning must happen inside the doing.
[Skip] ← what everyone clicks
Tip appears the first time you drag a block
Feeling¶
Aesthetic-Usability Effect¶
People perceive attractive designs as more usable, tolerate minor problems in them longer, and report higher satisfaction for the same task performance.
Name
OK
Name
Submit
The effect cuts both ways: polish masks usability problems during testing, so a beautiful prototype can hide defects that survive to production.
Peak-End Rule¶
People judge an experience largely by its most intense moment and by how it ended, not by the average.
Invest in the moments that matter most, and in the endings: a confirmation screen, an order delivered, an error that is handled gracefully. Negative peaks are weighted more heavily than positive ones, so removing the worst moment beats adding a delightful one.
Flow¶
The state of full absorption in a task, reached when challenge and skill are matched and feedback is immediate.
This is the argument for progressive disclosure with an accelerating path: defaults and guardrails for the novice, keyboard shortcuts and bulk operations for the expert, in the same product.
Using these laws¶
- They are heuristics, not acceptance criteria. They generate hypotheses; usability testing and analytics decide.
- They conflict. Fitts's Law wants big, close targets; Hick's Law wants fewer of them; Jakob's Law wants them where every other product puts them. Resolving that is the design work.
- They are descriptive, not permission. Zeigarnik, goal-gradient, and choice architecture all convert directly into dark patterns when used to serve the business against the user. The same research that makes an interface humane makes it manipulative, the difference is intent, and it is visible in the metrics you chose to optimise.
- They do not replace accessibility. Every visual technique above needs a non-visual equivalent: grouping expressed in the accessibility tree, emphasis not carried by colour alone, targets reachable by keyboard.
Related: Usability as an architectural characteristic, and Design Principles.