Laws of UX — Before & After Examples
Interactive before/after demos for the 21 core Laws of UX.
See each law violated, then applied — with a ready-made stakeholder pitch for every<br>design decision. A companion to lawsofux.com.
Your progress
0 of 21 laws learned
21 laws at once would violate Miller's Law — so they're chunked into five themes.<br>Open a law and hit “Mark as learned”; progress is saved in your browser and never leaves your device.
Reduce the mental load
People can only process so much at once. These laws cut choices, fields, and features down to what actually matters.
Hick's Law
More choices, slower decisions. A pricing page slimmed from six plans to three.
Miller's Law
Working memory holds ~7 items. Chunk card numbers, codes, and content into digestible groups.
Occam's Razor
Prefer the simplest thing that works. A 12-field registration form cut down to three.
Tesler's Law
Complexity can't be removed — only moved. Who does the hard work: the user or the system?
Pareto Principle
80% of users use 20% of features. Design for the vital few, tuck away the rest.
Organize the page visually
Spacing, grouping, and consistency tell users what belongs together — before they read a single word.
Law of Proximity
Close together = belongs together. The same form, fixed purely with spacing.
Law of Common Region
Elements inside a shared boundary read as a group. Ungrouped settings vs. clear card sections.
Law of Similarity
Things that look alike seem related. Consistent link and button styling vs. visual chaos.
Law of Uniform Connectedness
Visually connected elements read as related. Wizard steps and paired controls, joined up.
Law of Prägnanz
The eye simplifies complex images. A decorated dashboard vs. the simple form it was fighting.
Make interaction fast and forgiving
Targets that are easy to hit, systems that respond instantly, inputs that accept imperfection, layouts users already know.
Fitts's Law
Bigger, closer targets are faster to hit. Try tapping the tiny checkout link vs. the thumb-sized one.
Doherty Threshold
Respond within 400 ms. A live search demo: same slow backend, radically different experience.
Postel's Law
Be liberal in what you accept. A live phone-number field: strict rejection vs. graceful parsing.
Jakob's Law
Users expect your site to work like every other site. A “creative” shop layout vs. conventions.
Motivate progress
Progress users can see and unfinished business they want to close — momentum by design.
Goal-Gradient Effect
People speed up as they near a goal. Show progress — and give users a head start.
Zeigarnik Effect
Unfinished tasks stick in memory. Show what's incomplete and people come back to finish it.
Parkinson's Law
Tasks expand to fill the time available. Set expectations and shorten the path.
Design for memory and feelings
What users remember: firsts and lasts, the thing that stood out, and how it all felt at the end.
Serial Position Effect
People remember the first and last items best. Put what matters at the ends of the nav.
Von Restorff Effect
The one that differs gets remembered. Make the primary action unmistakable.
Peak-End Rule
People judge an experience by its peak and its end. Don't let the last screen be the worst one.
Aesthetic-Usability Effect
Users perceive beautiful design as easier to use — the same app, restyled, feels more trustworthy.
Who is this for?
For Beginners who seek direction
New to UX or product design? Don't memorize 21 abstract laws — watch each one break<br>a real interface, then fix it. Intuition first, vocabulary second.
For Product Managers who lack time
Product and business managers: every demo is a 60-second design review — the problem,<br>the fix, and the business case. Decision-ready, no course required.
For Designers who want authority
Stop defending taste. Show the law working, cite the research behind it, and read the<br>stakeholder pitch out loud — evidence wins reviews that opinions lose.