Laws of UX, in pictures

The psychology behind good design, one law at a time: what it means in plain words, a real interface that shows it at work, and how to use it in your next screen.

Start reading Get the cards

How we see

The brain groups, sorts and simplifies what it sees before we even think about it.

How we see

Aesthetic-Usability Effect

If something looks good, people believe it works better, and forgive small problems.

Use it: Polish matters, but don't let a pretty screen hide a usability problem in testing.
In the wild: A beautifully made banking app feels safer than a plain one, even when both do the same thing.
Watch out: Testers who love the look may not mention what confused them. Watch what they do, not just what they say.

Masaaki Kurosu and Kaori Kashimura, 1995

How we see

Law of Common Region

Things inside the same box or background feel like they belong together.

Use it: Use cards and panels to group related content instead of extra labels.
In the wild: A product card holds the photo, price and button together, so you never wonder which price is whose.
Watch out: Boxes inside boxes inside boxes. Too many containers become clutter of their own.

Stephen Palmer, 1992

How we see

Law of Proximity

Things that sit close together look like a group.

Use it: Put a label right next to its field, and leave more space between groups than inside them.
In the wild: On a form, the gap between sections tells you where one question ends and the next begins.
Watch out: Even spacing everywhere. When every gap is the same, nothing looks grouped.

Max Wertheimer and the Gestalt psychologists, 1923

How we see

Law of Prägnanz

We see complicated shapes as the simplest shapes that could make them.

Use it: Simple, clear forms are understood faster. Icons especially.
In the wild: The Olympic rings read as five circles, not as one tangled shape.
Watch out: Detailed, realistic icons. At small sizes they turn into blobs nobody can read.

Gestalt psychologists, 1920s

How we see

Law of Similarity

Things that look alike, by colour, shape or size, seem to do the same job.

Use it: Make every link look like a link and every button like a button. Different jobs, different looks.
In the wild: Blue underlined words on a page all feel clickable, because they all look the same.
Watch out: Styling a plain label like a button. People will tap it and nothing will happen.

Max Wertheimer and the Gestalt psychologists, 1923

How we see

Law of Uniform Connectedness

Things joined by a line or a shared colour feel more related than things that aren't.

Use it: Connect the steps of a flow with a line, or the parts of a group with one colour.
In the wild: A checkout's progress bar links Cart, Address and Payment into one journey.
Watch out: Decorative lines that join unrelated things. People will read a connection that isn't there.

Stephen Palmer and Irvin Rock, 1994

How we see

Von Restorff Effect

When everything looks the same, the one thing that's different is the one we remember.

Use it: Make the most important action stand out, and only one. If everything is loud, nothing is.
In the wild: The one highlighted plan on a pricing page, marked “Most popular”.
Watch out: Relying on colour alone to stand out. Add size, weight or a label so everyone notices.

Hedwig von Restorff, 1933

How we remember

Attention and memory are small. Good interfaces ask for very little of either.

How we remember

Chunking

We remember long information better when it's broken into small groups.

Use it: Show phone numbers, card numbers and long pages in chunks.
In the wild: Card numbers printed as four groups of four digits.
Watch out: Chunks with no logic. Groups should follow the meaning, not just a fixed count.

George A. Miller, 1956

How we remember

Cognitive Load

Every extra thing on a screen costs a little brain power to understand.

Use it: Remove anything that doesn't help the task in front of the person.
In the wild: A checkout that hides the store's menu so you can focus on paying.
Watch out: Hiding what people need to save space. Less clutter, not less information.

John Sweller, 1988

How we remember

Miller's Law

Most people can hold only about seven things in mind at once, often fewer.

Use it: Don't make people remember things between screens. Show them again.
In the wild: A booking flow that repeats your dates and guests on every step.
Watch out: Treating seven as a hard rule for menu lengths. The point is memory, not counting.

George A. Miller, 1956

How we remember

Working Memory

Our short-term memory is a small, leaky box: new things push old ones out.

Use it: Keep what people need visible, like the items in a cart or the step they're on.
In the wild: Recently viewed items on a shop's home page, so you don't have to remember them.
Watch out: Asking people to copy a code from one screen into another. Fill it in for them.

Alan Baddeley and Graham Hitch, 1974

How we remember

Serial Position Effect

We remember the first and last items in a list best, and the middle least.

Use it: Put the most important items at the start and end of menus and lists.
In the wild: Tab bars put Home first and Profile last, the places your eye checks most.
Watch out: Burying the key action in the middle of a long list of options.

Hermann Ebbinghaus, 1885

How we remember

Zeigarnik Effect

Unfinished tasks stick in our minds more than finished ones.

Use it: Show progress on incomplete tasks, like a profile that's 70% done, to invite people back.
In the wild: A course page that shows “3 of 25 lessons done” and keeps you coming back.
Watch out: Fake progress bars that never finish. People notice, and stop trusting them.

Bluma Zeigarnik, 1927

How we remember

Peak-End Rule

We judge an experience by its best or worst moment, and how it ended.

Use it: Design a delightful high point and a good ending, like a clear success screen.
In the wild: The confetti when you finish a payment, which makes the whole flow feel good.
Watch out: Polishing the peak and forgetting errors. A bad moment can become the one people remember.

Daniel Kahneman and colleagues, 1993

How we remember

Selective Attention

People focus on what matters to their goal and tune the rest out, including ads.

Use it: Important content shouldn't look like an ad or a banner, or it will be ignored.
In the wild: Nobody remembers the banners on a news site; everyone remembers the headline.
Watch out: Putting a vital notice in a bright banner at the top. People have learned to skip those.

Colin Cherry, 1953

How we decide

People choose fast, lean on habit and rarely read the instructions.

How we decide

Choice Overload

Too many options make choosing harder, and people sometimes give up.

Use it: Offer a few good options, recommend one, and let people filter the rest.
In the wild: Streaming apps showing a short row of “Top picks for you” instead of the whole library.
Watch out: Removing choice people actually need. Make the options easy to compare, not just fewer.

Sheena Iyengar and Mark Lepper, 2000

How we decide

Hick's Law

The more choices there are, the longer it takes to pick one.

Use it: Break big decisions into steps and highlight the most likely choice.
In the wild: A food app asking “Delivery or pickup?” before anything else.
Watch out: Splitting a simple choice into many steps. That's slower, not faster.

William Hick and Ray Hyman, 1952

How we decide

Cognitive Bias

Our thinking takes shortcuts that tilt our judgement, often without us noticing.

Use it: Test with real people and real data, not just your own instincts.
In the wild: A crossed-out higher price makes the real price feel like a bargain (anchoring).
Watch out: Using biases to trick people into choices they wouldn't make. That's a dark pattern.

Amos Tversky and Daniel Kahneman, 1974

How we decide

Mental Model

People expect a product to work the way they think it works.

Use it: Match what people already believe, like a cart that behaves like a cart.
In the wild: A trash can icon you can drag files into, and pull them back out of.
Watch out: Designing for how the system is built instead of how people think it works.

Kenneth Craik, 1943

How we decide

Jakob's Law

People spend most of their time on other apps, and expect yours to work the same way.

Use it: Use familiar patterns. Save your originality for what makes your product special.
In the wild: The logo in the top left takes you home, on almost every website.
Watch out: A clever new navigation that people have to learn before they can use your product.

Jakob Nielsen, 2000

How we decide

Paradox of the Active User

People skip the instructions and start using things straight away.

Use it: Teach inside the interface, at the moment it's needed, not in a manual up front.
In the wild: A tooltip that appears the first time you reach a new feature, not a ten-screen tour.
Watch out: Long onboarding carousels. Most people tap Skip and learn nothing.

John Carroll and Mary Beth Rosson, 1987

Time and effort

Speed, distance and progress change how hard something feels.

Time and effort

Doherty Threshold

When a product answers in under about 0.4 seconds, people stay in the flow.

Use it: Respond instantly, even if it's just a loading state or an optimistic update.
In the wild: A like button that fills straight away, before the server has even answered.
Watch out: Spinners for everything. Show the result early, or a skeleton of it.

Walter Doherty and Ahrvind Thadani, 1982

Time and effort

Fitts's Law

Big targets that are close by are faster and easier to hit.

Use it: Make buttons large enough to tap, and keep them near where the thumb or cursor already is.
In the wild: A full-width Pay button at the bottom of the screen, right under your thumb.
Watch out: Tiny close buttons in the far corner, or two important buttons squeezed side by side.

Paul Fitts, 1954

Time and effort

Flow

We get absorbed when a task is challenging enough, but not too hard.

Use it: Remove friction, give clear feedback and match the difficulty to the person.
In the wild: A language app that gets harder only as fast as you improve.
Watch out: Interrupting people mid-task with pop-ups, ratings requests or upsells.

Mihaly Csikszentmihalyi, 1975

Time and effort

Goal-Gradient Effect

The closer we get to a goal, the faster we move towards it.

Use it: Show progress, and give people a head start, like a stamp card with two stamps already.
In the wild: “You're 1 step from free delivery” in a shopping cart.
Watch out: Progress that goes backwards, like adding steps after people thought they were nearly done.

Clark Hull, 1932

Time and effort

Parkinson's Law

A task grows to fill the time you give it.

Use it: Make tasks quicker than people expect: autofill, sensible defaults, fewer fields.
In the wild: Checkout that fills your saved address and card, so paying takes seconds.
Watch out: Countdown timers that pressure people. Quick should feel easy, not rushed.

Cyril Northcote Parkinson, 1955

Design principles

Rules of thumb for deciding what to build, and how much.

Design principles

Occam's Razor

Of two solutions that work, the simpler one is usually better.

Use it: Remove things until removing more would break it.
In the wild: A search page that's just a box and a button.
Watch out: Simple for you, hard for them. Simplicity is judged by the person using it.

William of Ockham, 14th century

Design principles

Pareto Principle

Roughly 80% of results come from 20% of the causes.

Use it: Find the few features most people use most, and make those excellent first.
In the wild: Most people use a handful of a photo app's tools; those sit on the main screen.
Watch out: Ignoring the other 20% of people entirely, like those who rely on accessibility features.

Vilfredo Pareto, 1896

Design principles

Postel's Law

Be flexible in what you accept from people, and precise in what you give back.

Use it: Accept dates, phone numbers and names in any sensible format and tidy them up yourself.
In the wild: A phone field that accepts spaces, dashes or brackets, and formats the number for you.
Watch out: Error messages for harmless differences, like a space in a card number.

Jon Postel, 1980

Design principles

Tesler's Law

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

Use it: Move the complexity to the product and the team, so the person doesn't have to carry it.
In the wild: Maps works out the route; you just type where you want to go.
Watch out: Hiding necessary choices so well that people can't find them when they need them.

Larry Tesler, 1980s

Laws of UX cards

All 30 laws as cards: the scene and the law on the front; on the back, how to use it, where you’ve seen it and what to watch out for. Here are four; tap one to flip it. The PDF has the whole set, ready to print for your desk.

Download PDF PNGs (zip)Open the Figma board

The Figma board

Open in Figma and duplicate it ↗

Put the laws to work.

Knowing the laws is the start. Use them in real screens with our free, hands-on Learn Figma course, or learn the whole craft with mentors in the full UX UI Open course.

Learn Figma free

Laws of UX, in pictures

How we see

Aesthetic-Usability Effect

Law of Common Region

Law of Proximity

Law of Prägnanz

Law of Similarity

Law of Uniform Connectedness

Von Restorff Effect

How we remember

Chunking

Cognitive Load

Miller's Law

Working Memory

Serial Position Effect

Zeigarnik Effect

Peak-End Rule

Selective Attention

How we decide

Choice Overload

Hick's Law

Cognitive Bias

Mental Model

Jakob's Law

Paradox of the Active User

Time and effort

Doherty Threshold

Fitts's Law

Flow

Goal-Gradient Effect

Parkinson's Law

Design principles

Occam's Razor

Pareto Principle

Postel's Law

Tesler's Law

Laws of UX cards

The Figma board

Put the laws to work.

Aprender

Aprendizaje abierto

Herramientas

Empresa

Otros

Laws of UX, in pictures

How we see

Aesthetic-Usability Effect

Law of Common Region

Law of Proximity

Law of Prägnanz

Law of Similarity

Law of Uniform Connectedness

Von Restorff Effect

How we remember

Chunking

Cognitive Load

Miller's Law

Working Memory

Serial Position Effect

Zeigarnik Effect

Peak-End Rule

Selective Attention

How we decide

Choice Overload

Hick's Law

Cognitive Bias

Mental Model

Jakob's Law

Paradox of the Active User

Time and effort

Doherty Threshold

Fitts's Law

Flow

Goal-Gradient Effect

Parkinson's Law

Design principles

Occam's Razor

Pareto Principle

Postel's Law

Tesler's Law