LLOS.ai
App Layout
👁 App Layout · Module 4 of 6

One Glance

A screen should answer three questions before you read a word: where am I, what’s happening, and what do I do next.

1 Stage2 Stability3 Zones4 Glance5 Density6 Contract
The eye · scans, never readsState · colour, size, placeOne glance · or it’s not done

Modules one to three fixed the frame, kept it still, and placed the controls. This one is about the instant before you touch anything — the half-second your eye lands and asks three questions: Where am I? What’s happening? What do I do next?

A finished screen answers all three before you read a word — through colour, size and position, not paragraphs. A screen that makes you hunt for its state isn’t done, however pretty it looks. This module trains your eye to feel the difference — and it punishes designs that hide.

First · test your own eye

The One-Second Glance

A screen flashes for less than a second, then vanishes. Your only job: name the state it was in. Play it first with the state buried the way most apps ship it — then with it made loud. Watch your own accuracy jump.

Press Flash a screen. It shows for under a second — then tell me the state.
round 0correct 0accuracy
The law

State lives in colour, size and position — the things the eye reads before the mind reads words.

Second · the designer’s trick

The Squint Test

Real designers blur their own screens on purpose. If the state still reads once the detail is gone, the hierarchy is doing its job. If it dissolves into grey mush, it was leaning on words the eye never had time for. Drag the blur and watch which screen survives.

Done ✓
State made loud
done · tab 2
State buried in text
sharpsquint →blurred
Both are perfectly readable now. Push the blur and see which one still tells you its state.
The law

If the state dies when you blur the screen, it was never glanceable — only readable.

The craft

Design the states, then the screen

Engineers start from state: list every condition a thing can be in — loading, empty, error, offline, success — and handle each. Glanceable design is that same move made visible. Before placing a single element, name the states this surface can hold, and decide how each will announce itself to a passing eye.

Three almost always matter: where am I (the active tab, the section, the account), what’s happening (loading, syncing, recording, done, failed), and what do I do next (the one primary action, unmistakable). Give each a preattentive cue — colour, size or position — and the screen answers before it is read.

The test is not “is it visible?” but “is it obvious?” Everything important can sit on screen and still be invisible, because the eye had nothing to grab in the half-second it looked.

Now you fix one

Make It Obvious

Here is a screen that hides everything. You can’t tell which tab is active, whether anything is happening, or what to press. Switch on the three answers — and watch a mute screen start to speak.

Syncing…
Publish
Where am I? mark the active tab
What’s happening? surface the status
What next? make the action pop
Zero of three answered. At a glance, this screen says nothing.
What people get wrong

Where glance dies

“State means colour”Colour helps, but a colour-blind user, a sunlit screen or a grayscale mode strips it away. State that survives lives in structure too — position, size, an icon, a shape.InsteadEncode state in at least two channels, never colour alone.
“People read the label”Not first. The eye catches the pattern — a lit tab, a red banner, a big number — long before it parses a word. Labels confirm; they don’t announce.InsteadLet a preattentive cue carry the state; use the label to confirm it.
“Everything important must be visible”Visible isn’t the bar. A screen where everything shouts is one where nothing does. The bar is obvious — the one thing that matters winning the glance.InsteadMake the primary state loud and hold everything else quiet.
“Loading means a spinner”A spinner says only ‘something is happening’. Not how far, how long, or whether it froze. Glanceable progress gives confidence, not just motion.InsteadShow progress and a state word, not a lonely spinner.
Where you feel this every day

Apps that answer at a glance

You read these states a hundred times a day without a single word — colour, position, one icon, and you know.

Spotify playing
A filled pause glyph and a moving green bar — it’s playing. A green downward arrow — downloaded. You see the state; you never read it.
Maps navigating
A blue route and a big turn arrow say ‘guiding you’; a grey, redrawing line says ‘recalculating’. Position and colour — no sentence needed.
WhatsApp status
Two blue ticks — read. ‘typing…’ under the name — a reply is coming. A green dot — online. Micro-cues, instant meaning.
Camera recording
A red dot and a running timer — you’re recording, and for how long. Strip the red and it becomes a screen you can’t trust.
Cast your vote

Which reads its state faster?

Five face-offs. The same moment, two designs — one makes you hunt, one tells you at a glance. Pick the clearer, then see why.

Round 1 of 5Score 0
The vocabulary

The Glance glossary

Six words for building screens the eye can read in a second. Tap a card to flip it.

The nuance

Questions you actually ask

Train the eye

Name the state

Ten questions in seven 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.

Loading the question bank…
Question 1 of 10
Multiple choice
Before you go

The one-second test

Take your own phone. Open the five apps you use most and give each exactly one second — no touching. For each, can you answer all three: where am I, what’s happening, what do I do next? These five start as clear; tap any that leaves you hunting.

5of five answer all three in a single glance
Tap a phone to flip it between clear-at-a-glance and makes-you-hunt.

Whatever your count — you just did the one thing you can never undo. You looked. From today, every screen you meet, you’ll ask the three questions without meaning to — and you’ll never unsee the ones that can’t answer.

Keep going

Where this connects