Reserve · the spaceSkeletons · that matchState · survives interruptions
Module 1 fixed the frame in place. This one keeps everything inside it still. The fastest way to make an app feel cheap — buggy, untrustworthy, not-quite-finished — is to let content move on its own: an image that loads late and shoves a button, a skeleton that reshuffles, a rotation that forgets what you were doing.
Users rarely name this. They just tap the wrong thing, lose their place, and quietly trust the app less. The cure is one promise, kept everywhere: nothing moves unless the user moved it. This module makes each way that promise breaks — and holds — felt in the hands.
01 · The clause
The frame the hand can trust
Stability is the app-mode contract’s fourth clause, and the one users feel first. It has three faces: space is reserved before late content arrives, so nothing gets shoved; loading states are honest, shaped like the answer, so the fill causes no reflow; and state is preserved across interruptions, so a call or a rotation never erases the work.
The payoff is trust, and trust compounds. A frame that never betrays the hand lets the user stop watching the interface and start operating it — the same muscle-memory reward Module 1 chased, now defended against the one enemy muscle memory cannot survive: things that move.
The law
Nothing moves unless the user moved it.
02 · Feel the shove
The moving target
The commonest instability on earth: a late asset arrives and pushes the interface down. Below, a Confirm button sits under a poster that has not loaded. Press Load and watch what the poster does to Confirm — first with no reserved space, then with the room held in advance.
The moving target
Same screen, same poster. One reserves the space; one does not.
layout shifted 0px
03 · Loading, honestly
Skeletons that don’t lie
You felt the shove. Here is its quieter cousin — the instability that hides inside the wait itself.
Every app waits sometimes. The question is what the wait looks like. A generic placeholder that does not match the result just delays the reshuffle. A skeleton shaped like the final layout reserves every position, so content fills in with nothing moving. Press Reveal in each mode and count what jumps.
Honest skeletons
One placeholder matches the final card; one is three generic bars.
elements that moved –
The law
A skeleton that doesn’t match the answer is a second shift, not fewer.
04 · Through the interruption
Hold my place
Those two were about pixels moving. This last one is about your work vanishing — the instability that costs more than a mis-tap.
Phones interrupt constantly — a call, a notification, a rotation, the OS reclaiming memory. A fragile surface treats each as a reason to start over: input cleared, scene reset, place lost. A resilient one saves and restores, so the user returns mid-word. Type into both fields, then trigger the interruption.
Hold my place
Type something real, then interrupt. One surface forgets; one remembers.
kept your input –
The law
An interruption is a pause, never a reset.
0
pixels of shift the user didn’t cause
1:1
skeleton shape to final shape
100%
of state survives an interruption
05 · The craft
Reserve, match, remember
Three habits carry the whole clause. Reserve: give every not-yet-loaded element its final dimensions up front — an aspect-ratio box for media, a min-height for a list, a fixed slot for an embed. Match: make loading states the shape of their result, never a generic spinner. Remember: persist input, scroll, scene and focus so interruptions cost nothing.
None of this requires knowing every size in advance. It requires guaranteeing that the parts the hand and eye depend on — the primary action, the current row, the caret — never move. Anchor those, and let variability live inside reserved, clipped regions where it can change all it likes without touching the frame. Next module: now that the frame is fixed and still, where exactly the controls go — zones and reach.
The law
Anchor what the user is acting on; let variability live where it cannot shove them.
When people call an app polished, fast, premium, trustworthy, they are almost never praising its colours or its animations. They are praising something they never consciously noticed: nothing ever moved beneath their finger.
What people get wrong
Where stability dies
“A spinner means I handled loading”A spinner buys time but promises no shape — so the content still reflows into place when it lands.FixReplace the spinner with a skeleton shaped like the result. The wait should look like the answer.
“I’ll add the dimensions later”Space reserved as an afterthought misses exactly the cases — slow media, third-party embeds — that cause the worst shoves.FixReserve up front, by aspect ratio or min-height. A slot with no size is a shove waiting to happen.
“It only jumped a little”A few pixels are invisible — until they land at the instant of a tap, and turn Confirm into Delete.FixMeasure shift at the moment of interaction, not on average. The right threshold for a control’s movement is zero.
“The skeleton just needs to look busy”A placeholder whose shape differs from the final layout guarantees a reshuffle — a second shift dressed as a first.FixMatch the skeleton to the final structure 1:1. If it can’t match, reserve a clipped slot instead.
Where you feel this every day
Apps that hold still — and one that didn’t
You have met all three of these labs in software you use. Here is where.
📷 Instagram
Every photo slot reserves its aspect ratio before the image arrives, so the feed never jumps as you scroll into loading posts.
reserved space
▶️ YouTube
The player, title and the first comments hold their space while everything streams in — the video you are reaching for never slides away.
stable frame
💬 WhatsApp
The “typing…” indicator lives on a reserved line, so an incoming reply doesn’t shove the message you’re about to tap.
anchored
🛒 The checkout that charged you
A late promo banner drops in above the pay button just as your thumb commits — and you have bought the upsell you never wanted. The Lab-1 trap, shipped for real.
Five face-offs. The same screen, two builds — one shoves as it loads, one holds every position. Pick the one that stays still, then see why.
Round 1 of 5Score 0
The vocabulary
The Stability glossary
Six words for a frame that stays still. Tap a card to flip it.
The nuance
Questions you actually ask
Train the eye
Run the numbers
Ten questions in mixed formats — multiple choice, multi-correct, fill-in, match, order, read-think-connect and write-your-own — each with layered hints: a nudge, the reasoning, then a deeper connection. Served from the question bank, never hardcoded.