UX Rules

The psychology every rule in this Bible derives from. Two of these are equations you can measure in your own browser, on this page.

Live preview

Everything below is the real component. Change the controls, tab through it, and turn on Inspector Mode to read any value off the screen.

Measure itLaw

TargetW 88px · D 90px · ID 1.03 bits

large · near1.0 bits · —

large · far2.9 bits · —

small · near2.8 bits · —

small · far4.6 bits · —

Measure all four. The times track the bits, not the pixels — which is why a small target far away is roughly twice the work of a large one nearby, and why screen edges are effectively infinite in size.

Miller’s law — chunking

Working memory holds around four chunks, not seven items. The digits are identical; only the grouping changed.

453987214673002116 items

4539 8721 4673 00214 chunks

Gestalt — proximity

Nothing was added and nothing was coloured. Spacing alone created two groups, which is why a gap is a stronger grouping signal than a border.

Six things

Two groups of three

Visual weight

Emphasis is relative. Three primary buttons are three equal choices, and the user has to do the prioritising the design skipped.

Everything is primary

One primary

Von Restorff — the isolation effect

The item that differs is the item that is remembered. It works exactly once per screen; two highlights cancel each other out.

FreeProPopularTeamScale

Progressive disclosure

The common case costs one click; the rare case costs two. This is the honest way to satisfy Hick’s law without deleting a feature someone needs.

Export

The common case is one click. The rare case is two.

The Doherty threshold — 400ms

Below about 400ms, attention holds and the interface feels like an extension of the hand. Press both.

Optimistic · 0ms

Round trip · 1400ms

Interaction states

Every state a user can put this component into, rendered side by side. If a state is missing here, it is missing in production too.

Instant

< 100msinstant

Responsive

< 400msattention holds

Noticeable

< 1sflow intact

Show progress

< 10sneeds progress

Abandoned

> 10sthey leave

44pxFitts floor

4539 8721

4 chunksMiller

then split

5–7 fieldsper group

Anatomy

Every part, every measurement, and the reason it is that number.

Delete workspaceThis removes every project and cannot be undone.

14 projects will be deleted

Their history goes with them.

One small dialog, six laws. Nothing here is decoration — every choice is one of the rules below, applied.

Title largestvisual hierarchy
Size, weight and colour all point the same way, so the eye lands on the title first without being told to. Emphasis is relative — if everything is emphasised, nothing is.
Three groupsGestalt proximity
Title block, warning, actions. Spacing alone did the grouping — no borders, no boxes, no lines.
Two choicesHick’s law
log2(2 + 1) is about 1.6 bits. A dialog with five buttons is not slightly worse, it is a measurably different kind of decision.
Primary bottom-rightserial position + Fitts
Where the eye finishes reading, and where the cursor already is after scanning the text. The last item in a sequence is also the best remembered.
Danger styled apartVon Restorff
The destructive action differs from everything around it, so it cannot be pressed inattentively.
Consequence statederror prevention
"14 projects" is specific. A generic "this cannot be undone" is read as boilerplate and skipped.
Cancel is quietvisual weight
Present and reachable, but not competing. Two equally weighted buttons make a decision out of something that already had one.
Familiar shapeJakob’s law
Title, body, actions bottom-right. Users have seen this dialog a thousand times, and that recognition is free.

Design tokens used

Values are read live from the running stylesheet, so this table can never drift from the code. Click any value to copy it.

Color

Token	Value	Used for
--ds-accent	—	Von Restorff — one emphasis per screen
--ds-fg-muted	—	De-emphasis, so the primary can win

Spacing

Token	Value	Used for
touch target		Fitts’s law — the acquisition floor
group gap		Gestalt proximity
field gap		Proximity within a group

Typography

Token	Value	Used for
type scale		Visual hierarchy

Motion

Token	Value	Used for
duration		The Doherty threshold
feedback		Perceived as instant

Recommended sizes

Pick a size from this table. Do not invent a new one — a fourth height is how a design system starts dying.

Size	Height	Min width	When to use
Touch target	44px	—	Fitts. The fingertip contact patch plus margin for a moving hand.
Pointer target	32px	—	Fitts, with a precise pointer. Still not 16px.
Menu items	—	5–9 items	Hick. Past nine, group them rather than deleting.
Fields per group	—	5–7	Miller. Then split into a new fieldset.
Nav destinations	—	3–5	Hick and the thumb arc agreeing.
Chunk size	—	3–4 characters	Miller. Card numbers, codes, phone numbers.
Response budget	< 400ms	—	Doherty. Past it, show progress.
Feedback	< 100ms	—	Perceived as instant. Every press needs it.

Do

Make the important target big and closeFitts’s law is nearly physics. Doubling the width buys back the same time as halving the distance, and screen edges are effectively infinite targets because the pointer stops there.

MoveArchive · Delete

FlagStar · Snooze

Group before you deleteHick’s law is logarithmic and applies to undifferentiated lists. Sixteen items in four labelled groups is two cheap decisions, and nobody loses a feature.

logo top-left · cart top-right · ⌘K

Be conventional where it does not matterJakob’s law: users spend nearly all their time on other products, so their expectations were formed elsewhere. Spend your novelty budget on what makes your product different, not on the logout menu.

Optimistic · 0ms

Round trip · 1400ms

Answer within 400ms, or show progressThe Doherty threshold: below it attention holds and the tool feels like an extension of the hand. Above it, the mind starts to wander and the return trip is expensive.

FreeProPopularTeamScale

Emphasise exactly one thingVon Restorff works by contrast, so it works once. Two highlighted plans on a pricing page is the same as none, plus the noise.

ArchiveE

Recognition over recallShowing the options costs screen space; remembering them costs the user working memory they need for the actual task. A visible label beats a memorised shortcut for everyone except the daily user — who gets both.

Don't

Do not put a small target far awayIt is the one combination Fitts’s law punishes twice. A 16px close button in the opposite corner of a large dialog is the canonical example.

Do not present twenty flat optionsHick’s law with no grouping, and it is the shape most "advanced settings" pages take. Every choice is paid for by every user, including the ones who wanted the default.

a “delightful” address form

Do not be novel where users are on autopilotJakob’s law again. A creative checkout flow, an unconventional scrollbar or a reinvented date picker spends the user’s patience on something that was never the point.

“Enter your timezone offset in minutes”

Do not push complexity onto the userTesler’s law: every system has a level of complexity that cannot be removed, only moved. The question is who absorbs it — and it should be you, once, rather than every user, every time.

“Save” under More options

Do not hide the primary path behind disclosureProgressive disclosure is for the rare case. Hiding the common one behind "Advanced" trades a small gain in tidiness for a large loss in usability.

payment succeeds → “Error: null”

Do not end on the worst momentThe peak-end rule: an experience is remembered by its most intense point and its ending. A flawless flow that finishes with a raw error message is remembered as a bad flow.

Accessibility

Not a checklist to run at the end. These are the requirements the component was built from.

2.4.6Headings and LabelsAA2.5.8Target Size (Minimum)AA3.2.3Consistent NavigationAA3.2.4Consistent IdentificationAA3.3.2Labels or InstructionsA

Contrast

Visual hierarchy is built from contrast, and de-emphasis has a floor. Secondary text still needs 4.5:1 — "quieter" must never mean "harder to read".
Von Restorff by colour alone excludes anyone who cannot see that colour. Pair it with size, weight, a border or a label.
Gestalt grouping by proximity works at any contrast, which is exactly why it is the more robust technique.

Keyboard

`Tab order`	Must follow the visual hierarchy. If the eye goes title → body → primary action, so should focus.
`Shortcuts`	Recognition over recall — show them beside the action rather than expecting them to be memorised.
`Escape`	Consistent identification: the same key dismisses the topmost layer everywhere, every time.

Screen readers

Every Gestalt grouping needs a semantic equivalent. Whitespace conveys nothing to a screen reader, so proximity alone is a group only sighted users can see.
Miller’s law applies harder without vision: a list of twelve unchunked items read aloud is far heavier than the same list scanned. Group and label.
Recognition over recall matters most here. Announce state — "selected", "expanded", "3 of 12" — rather than expecting it to be tracked in memory.
The peak-end rule holds for audio too. An error announced as a raw exception is the ending a screen-reader user is left with.

Focus & touch

Focus order is the hierarchy, expressed for people who are not looking. Where the eye is meant to go first, focus goes first. A layout that reads correctly but tabs in a scrambled order has a hierarchy that only exists visually.
Fitts’s law is why 44px exists: a fingertip is roughly 8–10mm and the hand is moving. Hick’s law is why bottom navigation caps at five. The thumb arc is Fitts applied to a hand that cannot reach the whole screen.

Attribute	Applied to	Notes
Semantic grouping	Visual groups	Gestalt proximity is invisible to a screen reader. A group that exists only as whitespace needs a fieldset, a list or a region to exist at all.
Heading levels	Hierarchy	The visual hierarchy needs a programmatic twin. Font size is not a heading level.
Emphasis	The isolated item	Von Restorff must be in the accessible name — "Pro, most popular" — not conveyed only by a border and a shadow.
aria-live	Anything past 400ms	The Doherty threshold applies to assistive tech too. Silence during a wait is worse than a spinner, because there is not even a spinner.

Code

Example usage

1// Fitts's law — MT = a + b · log2(2D / W)2// Movement time rises with the log of distance over width. Halve the3// width or double the distance and the difficulty goes up one bit.4const indexOfDifficulty = (distance: number, width: number) =>5  Math.log2((2 * distance) / width)67indexOfDifficulty(90, 88)    // 1.03 bits — large and near8indexOfDifficulty(320, 26)   // 4.62 bits — small and far, ~4.5× the work910// Hick's law — RT = a + b · log2(n + 1)11// Logarithmic, so four times the options is not four times the time.12// It also only applies to an UNDIFFERENTIATED list — grouping resets it.13const decisionCost = (options: number) => Math.log2(options + 1)1415decisionCost(16)             // 4.09 bits, flat16decisionCost(4) + decisionCost(4)  // 2.32 + 2.32 → but only ONE of each17                                   // is paid: pick a group, then an item1819// The Doherty threshold — 400ms20const BUDGET = {21  feedback: 100,   // press → visible response. Below this: instant.22  action:   400,   // attention holds. This is the real budget.23  progress: 1000,  // past this, show determinate progress24  abandon: 10000,  // past this, they are gone25}2627// Miller's law — chunk, do not shorten28const chunk = (s: string, size = 4) =>29  s.replace(new RegExp(`(.{${size}})`, 'g'), '$1 ').trim()3031chunk('4539872146730021')   // '4539 8721 4673 0021'

Component API

The laws, as numbers

Prop	Type	Default	Description
Fitts	MT = a + b·log2(2D/W)	—	Produces the 44px touch target and the 32px pointer target. Screen edges are infinite targets.
Hick	RT = a + b·log2(n+1)	—	Produces 5–9 menu items and 3–5 navigation destinations. Grouping resets the count.
Miller	~4 chunks	—	Produces 5–7 fields per group and 3–4 character chunks in codes and card numbers.
Doherty	400ms	—	Produces the response budget, the 100ms feedback rule and the 1s progress threshold.
Von Restorff	one per screen	—	Produces the single-primary-action rule.
Serial position	first and last	—	Produces primary-action-last and most-used-destination-first.

Notes

Professional tips

When two designs both seem fine, find the law that distinguishes them. There usually is one, and it turns a taste argument into a decision.
Fitts’s law has a corollary worth remembering: screen edges and corners are infinitely large targets, because the pointer cannot overshoot them. That is why the macOS menu bar sits flush at the top.
Hick’s law applies to undifferentiated lists. Grouping is the cheap fix, and it is almost always better than removing a feature someone depends on.
Miller’s "seven plus or minus two" is widely misquoted. Later work puts working memory nearer four chunks, and chunk size matters more than item count either way.
The peak-end rule means error states deserve disproportionate care. They are the peak, and too often the end.
The aesthetic-usability effect is real but double-edged: a beautiful interface is rated as more usable, and it also hides genuine usability problems from your own testing.

Performance

The Doherty threshold is a performance budget written as psychology. 400ms is not a nice-to-have; it is where attention measurably breaks.
Perceived performance is the one that counts. Optimistic updates, skeletons and prefetching move the perceived number without moving the real one — and the perceived one is what the user has.
Feedback under 100ms is cheap and non-negotiable. Even when the work takes two seconds, the press must acknowledge itself immediately.
Animation eats the same budget. A 300ms transition on a 200ms request produces a 500ms interaction, and the animation was your choice.

Common mistakes

Citing Hick’s law to justify removing a feature, when grouping would have solved it without the loss.
Applying "seven plus or minus two" as a hard limit. It was never that, and the number is closer to four.
Emphasising several things at once, which is the same as emphasising none.
Being novel in the places users are on autopilot, and conventional in the place your product is actually different.
Treating these as rules rather than priors, and overriding evidence from your own users with a citation.
Forgetting that visual grouping is invisible to assistive technology unless it is also semantic.

Real-world recommendations

Fitts’s law is the one to reach for in an argument, because it is measurable in ten minutes with the demo on this page. Very few design disputes survive a stopwatch.
Most "the design feels off" reactions are a violation of one of these, usually hierarchy or proximity. Naming it converts a vague objection into a specific fix.
The laws conflict often, and the skill is knowing which one binds. Hick versus Jakob comes up constantly: fewer options, or the options users already expect?
Users cannot tell you which law you broke, only that something felt wrong. That is exactly what this page is for.
Tesler’s law is the most under-used one here. Every "just ask the user to configure it" decision is complexity moved rather than removed, and it is moved onto the people least equipped to absorb it.