Evaluate designs

Laws of UX

Psychology principles like Hick's, Fitts's and Jakob's Law, applied to UI.

⏱ 13 minBeginnerBy Jon YablonskiSince 2018

Fitts

Hick

Jakob

Miller

Peak-End

Tesler

Use it when

Explaining design decisions and fixing interaction details.

You'll walk away with

Design decisions backed by named principles.

Step 1 · The idea

Psychology you can design with

Laws of UX is a collection of psychology principles gathered by designer Jon Yablonski on lawsofux.com and in his book Laws of UX (O'Reilly, 2020). Each explains something about how people perceive, decide and remember — and what it means for interface design.

They aren't strict laws of nature. They're well-researched tendencies that help you explain and defend design decisions.

When a stakeholder asks “why is this button so big?”, answering “Fitts's Law” is much stronger than “it looks better”.

The model

12 laws every designer should know

Jakob's Law

Users spend most of their time on other sites, so they expect yours to work the same way.

Example: Cart icon in the top-right; search at the top.

Fitts's Law

The time to reach a target depends on its size and distance.

Example: Big, thumb-reachable primary buttons on mobile.

Hick's Law

More choices mean longer decisions.

Example: Show 2–3 payment options first; hide the rest under “More”.

Miller's Law

People hold about 7 (±2) items in working memory — so chunk information.

Example: Phone numbers shown as 98765 43210, card numbers in groups of 4.

Goal-Gradient Effect

People speed up as they get closer to a goal.

Example: “Step 3 of 4” progress bars; a coffee card that starts with 2 stamps.

Peak-End Rule

People judge an experience by its peak and its end, not the average.

Example: A friendly success screen after a stressful payment.

Von Restorff Effect

The item that looks different gets remembered.

Example: One highlighted “Most popular” plan among three.

Doherty Threshold

Productivity soars when the system responds within about 400 ms.

Example: Instant feedback on tap; skeleton screens while loading.

Tesler's Law

Every system has complexity that can't be removed — only moved.

Example: Autofilling an address so the system, not the user, handles it.

Zeigarnik Effect

People remember unfinished tasks better than finished ones.

Example: “Your profile is 70% complete” nudges.

Aesthetic-Usability Effect

People see attractive designs as easier to use.

Example: A polished app gets more patience for small bugs.

Law of Proximity

Things close together are seen as related.

Example: A label placed right next to its input field.

Step 2 · Feel it

Fitts's Law test

Click the targets as fast as you can: 5 small ones, then 5 big ones. Compare your average time.

Press start, then click the blue circles.

The test area. Small targets appear anywhere; big ones near the centre.

Small targets—

Big targets—

Feel it

Hick's Law test

Find the fruit shown and click it. 5 rounds with 4 options, then 5 rounds with 16.

Press start.

Options will appear here.

4 options—

16 options—

Step 3 · Real pattern

A checkout, law by law

Most good mobile checkouts use several laws at once.

☰ShopKart🛒 2

Cart top-right, logo centre, menu left

Step 1

Familiar layout

Everything is where people expect it from other apps. No learning needed.

Jakob's Law

Cart ✓Address ✓Payment

Almost done — 1 step left

Step 2

Progress you can see

Being close to the end makes people push through the last step.

Goal-Gradient Effect

Pay with

UPI · recommended

Card

+ 6 more options

Step 3

Fewer choices first

Two clear options up front, the rest one tap away. One option stands out as recommended.

Hick's LawVon Restorff

Card number

4111 1111 1111 1111

12 / 28

•••

Pay ₹1,499

Step 4

Chunked input, big button

Digits in groups of four; a big full-width Pay button in the thumb zone.

Miller's LawFitts's Law

✅

Order placed!

Arriving Thursday

You saved ₹200 on this order

Step 5

A good ending

The last moment is calm and positive — that's what people will remember about the whole checkout.

Peak-End Rule

Fictional shop for teaching.

Watch out

Common mistakes

✓ Do

Use laws to explain and justify decisions
Combine laws with real user testing
Break a pattern only when it's clearly better (Jakob's Law)
Highlight one thing at a time (Von Restorff)
Make feedback instant, even if the work isn't

✗ Avoid

Treating them as strict rules that always apply
Quoting “7±2” to limit menus to 7 items (that's not what Miller meant)
Making everything stand out
Using the Zeigarnik effect to nag people
Believing aesthetics can hide real usability problems

Cheat sheet

Laws of UX in one screen

JAKOB'S          work like other products people use
FITTS'S          bigger + closer = faster to hit
HICK'S           more choices = slower decisions
MILLER'S         chunk information (≈7±2 in working memory)
GOAL-GRADIENT    effort rises near the goal → show progress
PEAK-END         design the best moment and the ending
VON RESTORFF     the different thing gets noticed
DOHERTY          respond within ~400 ms
TESLER'S         complexity moves; make the system carry it
ZEIGARNIK        unfinished tasks stick in memory
AESTHETIC-USABILITY  beautiful feels easier
PROXIMITY        close = related

Use it at work

Figma template

A ready-made canvas for running this framework with your team. Free, editable, and it works in Figma and FigJam.

Figma & FigJam · free

Laws of UX design audit

Screenshot area
12-law checklist
Pass / fix notes

1Download the SVG, or copy it to your clipboard.
2In Figma or FigJam, drag the file onto the canvas — or paste with ⌘V / Ctrl V.
3Everything arrives as editable layers: type in the boxes, add stickies, duplicate rows.

Download SVGOpen in Figma ↗

Check yourself

Quick quiz

Get all three right to complete the lesson.

1. Why is the primary “Pay” button usually large and at the bottom of mobile checkouts?

2. Showing a card number as “4111 1111 1111 1111” instead of one long string uses…

3. A plan comparison page highlights one plan in a different colour. Which law?

My notesSaved

Notes are private and stored in this browser.

Sources and further reading

Jon Yablonski — Laws of UX
Jon Yablonski — Laws of UX (O'Reilly, 2020)

Keep going

Related frameworks

Nielsen's 10 Heuristics15 min · Beginner Fogg Behavior Model11 min · Beginner System Usability Scale9 min · Beginner

Next lesson

System Usability Scale

A 10-question survey that scores any product's usability from 0 to 100.

Start lesson →