UX Canon translates the foundational laws of user experience into interactive demos, code patterns, and AI-powered analysis so the gap between design theory and production code finally closes.
Each of the 10 core UX laws is broken down into a plain-language definition and a set of actionable principles, written for the people actually building the thing.
Every law comes with an interactive demo designed to make you experience the principle directly, not just read about it. Click targets, drag sliders, watch decision time change in real time.
See exactly what correct implementation looks like. Copyable, syntax-highlighted code patterns that translate the law directly into CSS, HTML, and JS.
Paste your code or drop in a screenshot. The AI analyzer evaluates it against whichever law you're viewing and returns a verdict, observations, and a concrete improvement.
UX laws are research-backed principles drawn from cognitive psychology, behavioral science, and decades of human-computer interaction research. They were codified by researchers like Paul Fitts, George Miller, and Jakob Nielsen to give product teams a shared vocabulary for design decisions. This site is for designers and engineers who want to understand why users behave the way they do, and write code that works with human nature, not against it.
The time to acquire a target is a function of the distance to and size of the target.
Why tiny buttons on mobile kill conversions.
The time it takes to make a decision increases with the number and complexity of choices.
Why too many options on a pricing page cause analysis paralysis.
The average person can only keep 7 (±2) items in their working memory.
Why long forms and sprawling menus exhaust users before they finish.
Productivity soars when a computer and its users interact at a pace (<400ms) that ensures neither has to wait on the other.
Why a sluggish app feels broken even when it technically works.
When multiple similar objects are present, the one that differs from the rest is most likely to be remembered.
Why interfaces with four equally-styled buttons leave users unsure what to do next.
Users have a propensity to best remember the first and last items in a series.
Why items buried in the middle of a nav menu get the fewest clicks.
People remember uncompleted or interrupted tasks better than completed tasks.
Why LinkedIn's profile completion bar is so effective at driving return visits.
The tendency to approach a goal increases with proximity to the goal.
Why loyalty programs that give you a head start outperform those that don't.
Objects that are near each other tend to be grouped together.
Why poorly spaced forms confuse users about which label belongs to which field.
Users spend most of their time on other sites. They prefer your site to work the same way.
Why redesigning your navigation into something 'unique' reliably tanks engagement.
Drop in a code snippet or a screenshot. The analyzer evaluates it against whichever law you're viewing and returns a verdict, observations, and a concrete improvement. Powered by Claude.
$ analyze --law fitts --input button.tsx
✓ Verdict: Mostly compliant
△ Observation: Primary CTA is 36×36, below the 44px minimum recommended touch target.
→ Suggestion: Increase button padding to py-3 px-6 for a 48px hit area.
Powered by Claude · 1.2s
“Design is not just what it looks like and feels like. Design is how it works.”
Steve Jobs