UI/UX laws
Laws of UX
32 research-backed principles behind ui-element-best-practices. Every rule cites a mechanism, not a preference. Each law below gets a plain-language definition and a live without/with example you can compare directly.
Built with this site’s own design tokens.
Interaction & Speed
Interaction & Speed
How fast and effortless a single action feels.
Fitts's Law
The time it takes to move to and select a target is a function of the target's size and the distance to it: bigger, closer targets are faster and easier to hit.
Hick's Law
Decision time increases with the number and complexity of choices offered: more options mean slower decisions.
Jakob's Law
Users spend most of their time on other products, so they expect yours to work the same way theirs do.
Doherty Threshold
Productivity and engagement rise when a system responds to input in under about 400 milliseconds.
Forcing Function
In a dialog that triggers an irreversible action, make the safe choice the loud, default primary button and demote the destructive choice to a quiet, link-style action tinted with a warning colour, placed on the opposite side of the dialog rather than beside the primary action.
Focus Ring
A focus indicator is the keyboard equivalent of a mouse cursor: it only needs to appear for keyboard and other non-pointer input, it has to be genuinely visible against its background, it has to follow the DOM rather than the layout, and a modal has to hold it captive until the modal closes.
Hover-Reveal Actions
An action revealed only by :hover has to be reachable at least two other ways: on keyboard focus, so tabbing to it makes it visible, and independent of pointer type, so a touchscreen, which never fires :hover and doesn't set focus from a plain tap, gets the same access as a mouse.
Memory & Attention
Memory & Attention
What people notice, hold onto, and recall later.
Miller's Law
The average person can hold only about 7 (±2) items in working memory at once.
Multi-Step Chunking
Break a long form into a short sequence of steps grouped by meaning, show visible progress across the sequence, validate each step before advancing, and persist state between steps, rather than presenting every field on one continuous page.
Serial Position Effect
People remember the first and last items in a list best, and the items in the middle worst.
Zeigarnik Effect
People remember unfinished or interrupted tasks better than completed ones. Open loops keep nagging at attention.
Peak-End Rule
People judge an experience mostly by its most intense point (the peak) and how it ends, not by the average of every moment.
Perception & Gestalt
Perception & Gestalt
How people group, simplify, and judge what they see.
Law of Prägnanz
People perceive and interpret ambiguous or complex shapes in the simplest form possible.
Law of Proximity
Objects near each other are perceived as more related than objects farther apart.
Law of Common Region
Elements that share a clearly defined boundary (a border, background, or container) are perceived as belonging to the same group.
Law of Similarity
Elements that look visually similar are perceived as related or performing the same function, even when they aren't near each other.
Law of Uniform Connectedness
Elements visually connected by a line, arrow, or shared connector are perceived as more related than elements that are simply close together or similarly styled.
Von Restorff Effect
When several similar items are present, the one that differs from the rest is the one most likely to be remembered.
Aesthetic-Usability Effect
People perceive more aesthetically pleasing designs as easier to use, whether or not they actually are.
Hierarchy Through Contrast
Visual hierarchy comes from contrast in weight and colour, not from escalating font size: a heading and its body text can share the same size as long as weight and colour set them apart.
Tabular Numerals
Numeric values in a table should be right-aligned and set in tabular (fixed-width) figures, so every digit column, including the decimal point, lines up vertically from row to row.
Subgrid Alignment
When cards in a grid hold content of different lengths, each card should align its title, body, and actions to a shared set of row tracks owned by the parent grid, using CSS subgrid, instead of letting every card size its own rows from its own content.
Scrollbar Continuity
A scrollable panel's scrollbar should be restyled thin and on-brand, and left visible, rather than left as the operating system's bulky default or hidden away entirely.
60-30-10 Rule
Split a screen's colour into three roles by proportion: roughly 60% a single neutral for backgrounds and most surfaces, 30% a muted secondary tone for supporting panels and structure, and only 10% a single saturated accent, reserved for the one action or state that should win the eye's first pass.
Match Highlighting
In a filtered or autocomplete list, highlight the exact substring of each label that matched the query, styled with the product's own accent rather than the browser's default yellow, and give the active row its own separate highlight, whichever one arrow keys or the mouse currently point at, so Enter or a click always finishes the value on the row the user can see is active.
Deterministic Avatar Colour
Most users never upload a profile photo, so the fallback — initials over a background colour — is what people actually see. That colour has to be derived deterministically from something stable about the person (their id or name), never picked at random and never the same flat neutral for every user, and never a value chosen once and stored in the database.
Input Affixes
A prefix or suffix attached to an input (a currency symbol, a fixed protocol string, a unit) is part of that field, not a label sitting beside it, so the border, background, and focus ring belong to the wrapper around all three pieces, never to the inner <input> alone.
Motivation & Complexity
Motivation & Complexity
What keeps people moving toward a goal, and who pays for complexity.
Goal-Gradient Effect
Motivation to complete a task increases as people get closer to the goal, and effort accelerates near the finish line.
Tesler's Law
Every process has a fixed amount of irreducible complexity. The only question is who deals with it, the system or the user.
Postel's Law
Be liberal in what you accept from users, and conservative in what you send back to them: the robustness principle.
Inline Validation
Validate a field when the user leaves it (on blur), not on every keystroke and not only at submit. Clear that field's error the instant the user edits it again.
Law of Deletion
An interface element is a liability until proven otherwise: it earns its place on screen only after its requirement is questioned and owned by a real person, and only after it survives an honest attempt to delete it. Simplifying, accelerating, and automating an element all come after that, never before it.
Source
Where this comes from
These laws back the ui-element-best-practices skill, which reviews individual components (buttons, forms, navigation, modals, cards, tables, states, notifications, and tooltips) against them. Pair it with ui-ux-best-practices for full-screen review.