[PRINCIPLES] /principles
Each card is one rule, written the way I say it to myself. Every one has a live demo you can play with, one line on why, and where I learnt it. Most demos have the same controls: a Before and After switch, a slider and Replay.
Turns every demo into its still, calm version. If your system already asks for less motion, it is on for you.
[I] #motion
How things move decides whether an interface feels quick or sluggish, calm or fussy. These are the rules I check first.
go deeper:Ease Racetrack ↗
M1
ease-in
sluggish start
ease
fine
ease-out
answers at once
whyEase-out starts fast and lands soft, so the thing answers the moment you ask and still settles gently.
M2
A panel arrives
A panel leaves
A dot moves across
A progress bar fills
A loader spins
0 of 5 fit the job.
whyArriving eases out, going away eases in, moving across the screen eases both ways. Linear is only for loops and progress.
source: nngroup.com ↗ (opens in a new tab)
M3
Short hops at 300ms feel slow; long ones feel rushed. I use about 160ms plus a bit per unit of distance.
whyA fixed time makes long moves look rushed and short ones look lazy. The speed should feel the same.
M4
Resting on the left. Fling it, then grab it again before it lands. The spring stops in your hand.
whyA spring keeps the speed of your hand, so a flung card carries on and a caught card stops. A fixed curve can do neither.
source: joshwcomeau.com ↗ (opens in a new tab)
M5
13ms a step. The last tile lands at 900ms.
whyAround 30 to 50ms between items reads as one gesture. A cap on the total means the last item never keeps you waiting.
source: gsap.com ↗ (opens in a new tab)
last tile lands at 1320ms: too slow, people wait for it
M6
shop
Grey wool scarf
The item travels to the cart and the count bumps: you see where it went.
whyGood motion shows where something went or what changed. If it tells you nothing, it is in the way.
M7
Opened 0 times. Time spent watching it: 0.0s. Try ten times with ⌘K or Ctrl+K.
whyA 300ms opening is charming once and a tax the hundredth time. Keyboard actions should feel instant.
M8
paused · layout for 60 bars, every frame. A fast laptop hides it; a phone won’t.
whyThose two skip layout and paint, so the GPU can do the work. Width, top or margin make the browser redo the page every frame.
[II] #blur
Blur is focus, speed and depth. It is also one of the most expensive things a browser can draw, so I use it on purpose.
go deeper:Blur Lab ↗
B1
Slide 1 of 5. Peak blur on the last move: 0px. Slow it right down to see the blur follow the speed.
whyA little blur along the direction of travel tells your eye it moved fast, like a camera would. When it slows, the blur goes.
B2
Things I’ve learnt
Things I’ve learnt
Things I’ve learnt
The blur-in has no travel, so it still feels calm when someone asks for less motion.
whyText that sharpens into place feels like it comes into focus. It reads sooner than a fade and needs no travel.
B3
Rename project
The page is still there, just out of the way.
whyA light blur behind a dialog says “only this, for now” without hiding where you were. Too much and you lose your place.
B4
Busy content
Scroll this panel. The header blurs whatever passes under it.
Header text over white, worst case: 7.17:1, passes AA.
whyBackdrop blur over a flat colour does nothing. Over busy content it needs a tint, or the text on top fails contrast.
B5
paused · 6 real blurs re-sampled every frame.
whyEvery blurred pixel samples its neighbours, every frame. A few big blurred layers can drop a phone below 60fps, so I keep a cheap fallback.
[III] #transitions
A transition is the bridge between two states. A good one tells you how they are related, so you never lose your place.
go deeper:Transition Deck ↗
T1
Details
tabs: crossfade
Your name
steps: slide by direction
whyTabs are siblings, so they swap in place. Steps in a flow go forward and back, so they slide that way.
T2
whyWhen a card grows into its detail view, you never lose what you tapped. FLIP makes it cheap: measure first, measure last, invert, play.
T3
/work
The browser snapshots both states and morphs the square and the title between them.
whyThe browser snapshots both views and morphs what they share. It is built in, and where it isn’t supported you get a plain swap.
T4
Add a toast. It leaves on its own after three seconds.
Enter 320ms, exit 224ms. The exit is quicker: going away should never hold you up.
whyThings that vanish in a blink feel like errors. A short exit, quicker than the entrance, says where it went.
T5
whyA menu that grows out of its button looks like it came from there. From the centre it looks like it came from nowhere.
[IV] #scroll
Scroll belongs to the person scrolling. I can react to it, but I never take it away, and I never let it hide what they came for.
S1
Scroll this panel ↓ then back up.
01
Arrive
02
Orient
03
Explain
04
Show
05
Prove
06
Act
Linked: the cards follow your scroll both ways. The bar on top is linked too.
whyLinked follows your scroll both ways, which suits progress. Triggered plays once, which suits reveals. CSS can now do linked with no JavaScript.
source: gsap.com ↗ (opens in a new tab)
Scroll down ↓
01
Arrive
02
Orient
03
Explain
04
Show
05
Prove
06
Act
S2
01 / 06
One
Use a mouse wheel or trackpad over this panel.
02 / 06
Two
Use a mouse wheel or trackpad over this panel.
03 / 06
Three
Use a mouse wheel or trackpad over this panel.
04 / 06
Four
Use a mouse wheel or trackpad over this panel.
05 / 06
Five
Use a mouse wheel or trackpad over this panel.
06 / 06
Six
Use a mouse wheel or trackpad over this panel.
Smoothed: every scroll counts, eased at 0.12 a frame. Lower is floatier.
whySmoothing keeps your input and softens it. Hijacking throws your input away and plays its own. People hate the second.
S3
card 01
Content you came here to read.
card 02
Content you came here to read.
card 03
Content you came here to read.
card 04
Content you came here to read.
card 05
Content you came here to read.
card 06
Content you came here to read.
card 07
Content you came here to read.
card 08
Content you came here to read.
card 09
Content you came here to read.
card 10
Content you came here to read.
card 11
Content you came here to read.
card 12
Content you came here to read.
card 13
Content you came here to read.
card 14
Content you came here to read.
card 15
Content you came here to read.
card 16
Content you came here to read.
Press Fling. It jumps the panel 3000px in one go, like a hard flick on a phone.
whyIf a fast fling skips the trigger, hidden stays hidden. Content is visible by default and motion is only an extra.
S4
Dither Wave
[open /lab/dither-wave]Still image showing. The live scene starts when it is on screen and the page has room for it.
whyA still shows at once and costs nothing. The live scene starts when it is in view and stops when it isn’t, so the page stays quick.
R1
| Full motion | Reduced |
|---|---|
| Slides in from below | Fades in |
| Parallax and scroll scrub | Static, final layout |
| Looping background | One composed still |
| Button press scale | Colour and label change |
| Spinner | Kept: it is feedback |
whyPeople who turn motion down still need to know something happened. I keep fades and state changes and drop the flying.
source: MDN ↗ (opens in a new tab)
R2
Frames drawn: 0. Frozen: off screen.
whyWCAG asks for a pause on anything that moves for more than five seconds. I also stop loops the moment they leave the screen.
[V] #visual
The rules I check before any motion goes in. Each one is a still you can read in a second. If a page fails these, no animation will save it.
V1
EVERYTHING SHOUTS
ONE BIG THING
whyIf everything is loud, nothing is. One clear lead tells people where to start.
V2
SCALE 16PX × 1.25
MEASURE 60 TO 70 CHARACTERS
Body text sits at 17px with 1.6 line height. A line that runs past about seventy characters makes your eye hunt for the start of the next one, so I cap the measure.
whyA fixed ratio keeps sizes related, and a capped line length keeps reading easy.
V3
COLOUR BUDGET
88 NEUTRAL · 10 STEEL · 2 ACCENT
OKLCH RAMP · HUE 35
whyAn accent only works if it's rare. Spend it on the one thing you want pressed.
V4
WCAG RATIO ON #080808
Body text needs 4.5:1. I check the number, not my screen.
whyScreens and eyes differ. The ratio doesn't, so it's the one I trust.
V5
EVEN GAPS
INNER < OUTER
whyThings close together read as one. Less space inside a group than between groups does the grouping for free.
V6
THREE LEVELS
A page, a card raised one level with a soft shadow, and a menu raised two levels with a lighter surface and a deeper shadow.
whyShadow and a lighter surface say this sits above the page, so people know what they can dismiss.
V7
SAME RADIUS
OUTER = INNER + PAD
whyA nested corner looks right when the outer radius equals the inner one plus the padding.
[VI] #ux
Twelve findings about how people use screens, each one something you can try right here. A law of UX is a pattern that research keeps finding, not a rule someone made up. Play the demo first, then read why.
U1
Press START, then hit the target as fast as you can.
SMALL+FAR -- · BIG+CLOSE --
whyThe time to hit a target grows with distance and shrinks with size. Small and far is always slow.
U2
I’ll name one command. Find it and click it.
FLAT -- · GROUPED -- · TYPED --
whyEvery extra option adds decision time. Grouping or search turns 24 choices into a few.
U3
A shop page will appear. Find the cart.
MY IDEA -- · WHERE PEOPLE LOOK --
whyPeople spend most of their time on other sites. They bring those habits to mine.
U4
900ms you notice the wait
UP TO DATE · slide under 400ms and it feels like the page is keeping up
whyUnder about 400ms people stay in flow. Past a second, their mind wanders off.
U5
Same three steps. Go through both, then rate each.
A
1/3 BASKET
B
1/3 BASKET
A -- · B --
whyPeople judge an experience by its best moment and its last one, not the average.
U6
Only black and white. The difference does the work, not colour.
whyThe odd one out is the one people remember. It works in black and white, no colour needed.
source: lawsofux · von Restorff effect ↗ (opens in a new tab)
U7
1 FIELD · switch a cue on
whyGestalt means the eye sees wholes before parts. Any one cue is enough to make groups appear.
U8
FOUR ODD THINGS
whyConnected things read as one path, and the eye prefers the simplest shape it can find.
U9
I’ll show a 12-digit code for 4 seconds. Then type it back.
LONG STRING -- · CHUNKS --
whyWorking memory holds only a few things at once. Four groups of four is far easier than twelve loose digits.
U10
Enter: 12 Harbour Street, Northgate 4012
0 KEYS NOW · YOU DO IT -- · I DO IT --
whySome complexity can't be removed, only moved. I'd rather the system carry it than the person.
U11
Same five tasks. B counts the two you already did.
A · FROM ZERO
0 of 5 · 0%
B · HEAD START
2 of 7 · 29%
B starts at 29%. People push harder when the end looks close.
whyPeople speed up near the finish, and an unfinished task keeps tugging at them.
U12
A menu of nine shows for 3 seconds. Then tick the ones you remember.
Most people keep the first and the last. So Home goes first and Contact goes last.
whyThe ends of a list stick best. And a design that looks good is judged easier to use, so polish is not decoration.
[VII] #states
A screen is never just its happy path. It is also loading, empty, broken and waiting for you. These are the checks I run on every state, starting with Nielsen’s ten heuristics: rules of thumb for spotting usability problems.
H1
ERR_0x3F: PURGE ENTITY?
See docs section 4.2.
SCORE 0/5
whyTen plain questions catch most problems before anyone tests the screen. Fix the dialog and watch the score.
H2
NOTHING
PRESS ONLY
PRESS + BUSY + DONE
Watch the press count. With no feedback people press again.
whyIf nothing moves, people press again. A pressed state, a busy state and a done state stop the double order.
H3
Tap the ones you think you could click. Then reveal.
Dashed border after reveal means a wrong guess.
whyAn affordance is a hint about what a thing does. If it looks clickable, it should click, and the other way round.
H4
The page has its shape already. The wait feels shorter.
whyA skeleton shows the shape of what's coming, so the page feels closer to done.
H5
No projects yet
Projects keep your files together. Make your first one in a minute.
The error says what to do, and your typing survives.
whyAn empty screen is the first thing new people see. An error should say what happened, what to do, and keep what they typed.
H6
It shows up now and saves behind the scenes. If it fails, I say so and give it back.
whyOptimistic means I show the result before the server confirms, then own up if it fails. Most saves succeed, so most waits vanish.
[✓] #checklist
Every rule on this page, plain. I run down it before I call something done. Copy it into a pull request or a note.
