II · Relationship

Where Does My Attention Belong?

A screen's first promise

Primitive, cell, surface

The issue tile is what Brad Frost would call a molecule. His atomic design names the pieces of an interface by what they're built from: atoms, molecules, organisms, templates, pages (Frost, 2016). It's a vocabulary for building, and a good one. I use the same kind of scale, with the lines drawn somewhere else: around contracts, not construction.

A primitive is part of a promise that isn't a whole job yet. A label, a field, a button, a title. Even a field with its label is still a primitive: it can hold an email address, but nobody has signed up for anything.

A cell is one complete, predictable contract with the person: a job. Put a button under that field and it becomes a newsletter signup, one job, recognizable before it's read. The issue tile is a cell too; its job is this one issue. A cell asks itself one question: how can the person do this job as effortlessly as possible? On the issue tile, the answer starts with the title. That's its payload.

A surface is where cells live, and it serves something bigger than a job: a journey, or part of one. The section of a page that holds nothing but the newsletter signup is a surface, and so is the screen with forty rows and a filter. Its focus is different, and so are its questions. Where did the person come from? What do they want to do here? What else might they want to do next, two steps ahead?

The same signup can sit on a surface of its own, or beside other cells on a surface that's about something else. The cell doesn't change. The journey around it does.

<figure style="margin:1.6rem 0;text-align:center"><svg width="400" height="180" viewBox="0 0 400 180" role="img" aria-label="a button, the row it lives in, and the screen the row lives on, each labeled with what it owes"><rect x="14" y="64" width="56" height="22" rx="11" fill="#7a1f1f"/><text x="42" y="78.5" font-family="Inter, system-ui, sans-serif" font-size="9" font-weight="500" fill="#fff" text-anchor="middle">Open</text><rect x="102" y="56" width="120" height="38" rx="5" fill="#fff" stroke="#d8d2c8" stroke-width="1"/><rect x="112" y="66" width="62" height="7" rx="3.5" fill="#c9c2b6"/><rect x="112" y="79" width="40" height="4" rx="2.0" fill="#e0dad0"/><rect x="182" y="65" width="32" height="20" rx="10" fill="#7a1f1f"/><rect x="252" y="8" width="140" height="132" rx="6" fill="none" stroke="#d8d2c8" stroke-width="1"/><rect x="262" y="20" width="60" height="8" rx="4.0" fill="#c9c2b6"/><rect x="262" y="40" width="120" height="20" rx="4" fill="#f2e4e1" stroke="#7a1f1f" stroke-width="1"/><rect x="270" y="47" width="50" height="5" rx="2.5" fill="#c9c2b6"/><rect x="358" y="45" width="18" height="10" rx="5" fill="#7a1f1f"/><rect x="262" y="64" width="120" height="20" rx="4" fill="#fff" stroke="#d8d2c8" stroke-width="1"/><rect x="270" y="71" width="50" height="5" rx="2.5" fill="#e0dad0"/><rect x="358" y="69" width="18" height="10" rx="5" fill="#eeeae3"/><rect x="262" y="88" width="120" height="20" rx="4" fill="#fff" stroke="#d8d2c8" stroke-width="1"/><rect x="270" y="95" width="50" height="5" rx="2.5" fill="#e0dad0"/><rect x="358" y="93" width="18" height="10" rx="5" fill="#eeeae3"/><rect x="262" y="112" width="120" height="20" rx="4" fill="#fff" stroke="#d8d2c8" stroke-width="1"/><rect x="270" y="119" width="50" height="5" rx="2.5" fill="#e0dad0"/><rect x="358" y="117" width="18" height="10" rx="5" fill="#eeeae3"/><path d="M78 75 h16" stroke="#8f887d" stroke-width="1" fill="none"/><path d="M90 71 l4 4 l-4 4" stroke="#8f887d" stroke-width="1" fill="none"/><path d="M230 75 h16" stroke="#8f887d" stroke-width="1" fill="none"/><path d="M242 71 l4 4 l-4 4" stroke="#8f887d" stroke-width="1" fill="none"/><text x="42" y="160" font-family="Inter, system-ui, sans-serif" font-size="9" font-weight="500" fill="#3a3631" text-anchor="middle">primitive</text><text x="42" y="173" font-family="Inter, system-ui, sans-serif" font-size="8" font-weight="400" fill="#8f887d" text-anchor="middle" font-style="italic">owes you the press</text><text x="162" y="160" font-family="Inter, system-ui, sans-serif" font-size="9" font-weight="500" fill="#3a3631" text-anchor="middle">cell</text><text x="162" y="173" font-family="Inter, system-ui, sans-serif" font-size="8" font-weight="400" fill="#8f887d" text-anchor="middle" font-style="italic">owes you its title</text><text x="322" y="160" font-family="Inter, system-ui, sans-serif" font-size="9" font-weight="500" fill="#3a3631" text-anchor="middle">surface</text><text x="322" y="173" font-family="Inter, system-ui, sans-serif" font-size="8" font-weight="400" fill="#8f887d" text-anchor="middle" font-style="italic">owes you where to look first</text></svg><figcaption style="font-size:.8rem;color:#a8a298;font-style:italic;margin-top:.4rem">One promise at three sizes.</figcaption></figure>

Where should I look?

The same question works one size up. A row exists to show its title. A screen exists to tell the person where their attention belongs, and that's where state matters most. It's a dashboard problem in particular.

Picture twenty pieces of information on one screen. One needs action now. Three are unfinished but not urgent. Five report that something completed. Eleven are simply useful to know. If all twenty are equally weighted cards, the person has to read the dashboard to find out what matters. The hierarchy was there, in the data. It just never made it into the design.

<figure style="margin:1.6rem 0;text-align:center"><svg width="400" height="234" viewBox="0 0 400 234" role="img" aria-label="twenty identical cards next to the same twenty items weighted: one prominent, three cards, five checked lines, eleven quiet lines"><rect x="8" y="8" width="40" height="32" rx="4" fill="#fff" stroke="#d8d2c8" stroke-width="1"/><rect x="14" y="16" width="22" height="5" rx="2.5" fill="#e0dad0"/><rect x="14" y="26" width="14" height="4" rx="2.0" fill="#eeeae3"/><rect x="54" y="8" width="40" height="32" rx="4" fill="#fff" stroke="#d8d2c8" stroke-width="1"/><rect x="60" y="16" width="22" height="5" rx="2.5" fill="#e0dad0"/><rect x="60" y="26" width="14" height="4" rx="2.0" fill="#eeeae3"/><rect x="100" y="8" width="40" height="32" rx="4" fill="#fff" stroke="#d8d2c8" stroke-width="1"/><rect x="106" y="16" width="22" height="5" rx="2.5" fill="#e0dad0"/><rect x="106" y="26" width="14" height="4" rx="2.0" fill="#eeeae3"/><rect x="146" y="8" width="40" height="32" rx="4" fill="#fff" stroke="#d8d2c8" stroke-width="1"/><rect x="152" y="16" width="22" height="5" rx="2.5" fill="#e0dad0"/><rect x="152" y="26" width="14" height="4" rx="2.0" fill="#eeeae3"/><rect x="8" y="46" width="40" height="32" rx="4" fill="#fff" stroke="#d8d2c8" stroke-width="1"/><rect x="14" y="54" width="22" height="5" rx="2.5" fill="#e0dad0"/><rect x="14" y="64" width="14" height="4" rx="2.0" fill="#eeeae3"/><rect x="54" y="46" width="40" height="32" rx="4" fill="#fff" stroke="#d8d2c8" stroke-width="1"/><rect x="60" y="54" width="22" height="5" rx="2.5" fill="#e0dad0"/><rect x="60" y="64" width="14" height="4" rx="2.0" fill="#eeeae3"/><rect x="100" y="46" width="40" height="32" rx="4" fill="#fff" stroke="#d8d2c8" stroke-width="1"/><rect x="106" y="54" width="22" height="5" rx="2.5" fill="#e0dad0"/><rect x="106" y="64" width="14" height="4" rx="2.0" fill="#eeeae3"/><rect x="146" y="46" width="40" height="32" rx="4" fill="#fff" stroke="#d8d2c8" stroke-width="1"/><rect x="152" y="54" width="22" height="5" rx="2.5" fill="#e0dad0"/><rect x="152" y="64" width="14" height="4" rx="2.0" fill="#eeeae3"/><rect x="8" y="84" width="40" height="32" rx="4" fill="#fff" stroke="#d8d2c8" stroke-width="1"/><rect x="14" y="92" width="22" height="5" rx="2.5" fill="#e0dad0"/><rect x="14" y="102" width="14" height="4" rx="2.0" fill="#eeeae3"/><rect x="54" y="84" width="40" height="32" rx="4" fill="#fff" stroke="#d8d2c8" stroke-width="1"/><rect x="60" y="92" width="22" height="5" rx="2.5" fill="#e0dad0"/><rect x="60" y="102" width="14" height="4" rx="2.0" fill="#eeeae3"/><rect x="100" y="84" width="40" height="32" rx="4" fill="#fff" stroke="#d8d2c8" stroke-width="1"/><rect x="106" y="92" width="22" height="5" rx="2.5" fill="#e0dad0"/><rect x="106" y="102" width="14" height="4" rx="2.0" fill="#eeeae3"/><rect x="146" y="84" width="40" height="32" rx="4" fill="#fff" stroke="#d8d2c8" stroke-width="1"/><rect x="152" y="92" width="22" height="5" rx="2.5" fill="#e0dad0"/><rect x="152" y="102" width="14" height="4" rx="2.0" fill="#eeeae3"/><rect x="8" y="122" width="40" height="32" rx="4" fill="#fff" stroke="#d8d2c8" stroke-width="1"/><rect x="14" y="130" width="22" height="5" rx="2.5" fill="#e0dad0"/><rect x="14" y="140" width="14" height="4" rx="2.0" fill="#eeeae3"/><rect x="54" y="122" width="40" height="32" rx="4" fill="#fff" stroke="#d8d2c8" stroke-width="1"/><rect x="60" y="130" width="22" height="5" rx="2.5" fill="#e0dad0"/><rect x="60" y="140" width="14" height="4" rx="2.0" fill="#eeeae3"/><rect x="100" y="122" width="40" height="32" rx="4" fill="#fff" stroke="#d8d2c8" stroke-width="1"/><rect x="106" y="130" width="22" height="5" rx="2.5" fill="#e0dad0"/><rect x="106" y="140" width="14" height="4" rx="2.0" fill="#eeeae3"/><rect x="146" y="122" width="40" height="32" rx="4" fill="#fff" stroke="#d8d2c8" stroke-width="1"/><rect x="152" y="130" width="22" height="5" rx="2.5" fill="#e0dad0"/><rect x="152" y="140" width="14" height="4" rx="2.0" fill="#eeeae3"/><rect x="8" y="160" width="40" height="32" rx="4" fill="#fff" stroke="#d8d2c8" stroke-width="1"/><rect x="14" y="168" width="22" height="5" rx="2.5" fill="#e0dad0"/><rect x="14" y="178" width="14" height="4" rx="2.0" fill="#eeeae3"/><rect x="54" y="160" width="40" height="32" rx="4" fill="#fff" stroke="#d8d2c8" stroke-width="1"/><rect x="60" y="168" width="22" height="5" rx="2.5" fill="#e0dad0"/><rect x="60" y="178" width="14" height="4" rx="2.0" fill="#eeeae3"/><rect x="100" y="160" width="40" height="32" rx="4" fill="#fff" stroke="#d8d2c8" stroke-width="1"/><rect x="106" y="168" width="22" height="5" rx="2.5" fill="#e0dad0"/><rect x="106" y="178" width="14" height="4" rx="2.0" fill="#eeeae3"/><rect x="146" y="160" width="40" height="32" rx="4" fill="#fff" stroke="#d8d2c8" stroke-width="1"/><rect x="152" y="168" width="22" height="5" rx="2.5" fill="#e0dad0"/><rect x="152" y="178" width="14" height="4" rx="2.0" fill="#eeeae3"/><rect x="212" y="8" width="180" height="40" rx="5" fill="#f2e4e1" stroke="#7a1f1f" stroke-width="1.2"/><circle cx="226" cy="28" r="4" fill="#7a1f1f"/><rect x="238" y="21" width="90" height="7" rx="3.5" fill="#7a1f1f"/><rect x="238" y="33" width="60" height="4" rx="2.0" fill="#d9b8b3"/><rect x="212" y="58" width="56" height="34" rx="4" fill="#fff" stroke="#d8d2c8" stroke-width="1"/><rect x="220" y="68" width="32" height="5" rx="2.5" fill="#c9c2b6"/><rect x="220" y="79" width="20" height="4" rx="2.0" fill="#e0dad0"/><rect x="273" y="58" width="56" height="34" rx="4" fill="#fff" stroke="#d8d2c8" stroke-width="1"/><rect x="281" y="68" width="32" height="5" rx="2.5" fill="#c9c2b6"/><rect x="281" y="79" width="20" height="4" rx="2.0" fill="#e0dad0"/><rect x="334" y="58" width="56" height="34" rx="4" fill="#fff" stroke="#d8d2c8" stroke-width="1"/><rect x="342" y="68" width="32" height="5" rx="2.5" fill="#c9c2b6"/><rect x="342" y="79" width="20" height="4" rx="2.0" fill="#e0dad0"/><path d="M214 107 l3 3 l6 -6" stroke="#8f887d" stroke-width="1" fill="none"/><rect x="228" y="105" width="70" height="4" rx="2.0" fill="#e0dad0"/><path d="M214 120 l3 3 l6 -6" stroke="#8f887d" stroke-width="1" fill="none"/><rect x="228" y="118" width="56" height="4" rx="2.0" fill="#e0dad0"/><path d="M214 133 l3 3 l6 -6" stroke="#8f887d" stroke-width="1" fill="none"/><rect x="228" y="131" width="80" height="4" rx="2.0" fill="#e0dad0"/><path d="M214 146 l3 3 l6 -6" stroke="#8f887d" stroke-width="1" fill="none"/><rect x="228" y="144" width="48" height="4" rx="2.0" fill="#e0dad0"/><path d="M214 159 l3 3 l6 -6" stroke="#8f887d" stroke-width="1" fill="none"/><rect x="228" y="157" width="64" height="4" rx="2.0" fill="#e0dad0"/><rect x="212" y="172" width="60" height="3" rx="1.5" fill="#eeeae3"/><rect x="212" y="179" width="44" height="3" rx="1.5" fill="#eeeae3"/><rect x="212" y="186" width="70" height="3" rx="1.5" fill="#eeeae3"/><rect x="212" y="193" width="52" height="3" rx="1.5" fill="#eeeae3"/><rect x="212" y="200" width="38" height="3" rx="1.5" fill="#eeeae3"/><rect x="212" y="207" width="64" height="3" rx="1.5" fill="#eeeae3"/><rect x="304" y="172" width="60" height="3" rx="1.5" fill="#eeeae3"/><rect x="304" y="179" width="44" height="3" rx="1.5" fill="#eeeae3"/><rect x="304" y="186" width="70" height="3" rx="1.5" fill="#eeeae3"/><rect x="304" y="193" width="52" height="3" rx="1.5" fill="#eeeae3"/><rect x="304" y="200" width="38" height="3" rx="1.5" fill="#eeeae3"/><text x="100" y="226" font-family="Inter, system-ui, sans-serif" font-size="9" font-weight="400" fill="#8f887d" text-anchor="middle" font-style="italic">twenty equal cards</text><text x="302" y="226" font-family="Inter, system-ui, sans-serif" font-size="8.5" font-weight="400" fill="#8f887d" text-anchor="middle" font-style="italic">one loud, three waiting, five done, eleven quiet</text></svg><figcaption style="font-size:.8rem;color:#a8a298;font-style:italic;margin-top:.4rem">The hierarchy was in the data. On the right it made it into the design.</figcaption></figure>

The good screen answers where does my attention belong? before a word is read. And it does that with less, not more. Normal should feel normal. Information can be quiet. Completed work can feel resolved. What needs action can become prominent, and a genuine problem can interrupt the rhythm, because the rest of the screen left it room to. Quiet is part of hierarchy.

The Blur Test

Take the dashboard from Design What It Is: three columns, tasks, people and dates, one well-made List component used three times, nothing wrong with it. Stand back from it until the words stop being readable. Three identical stacks of gray rows. You can't tell which column is the people.

<figure style="margin:1.6rem 0;text-align:center"><svg width="400" height="202" viewBox="0 0 400 202" role="img" aria-label="a three-column dashboard with every word blurred, twice: identical gray rows, then tasks with checkboxes, people with faces and dates as calendar blocks with one overdue"><rect x="8" y="8" width="186" height="170" rx="6" fill="none" stroke="#d8d2c8" stroke-width="1"/><rect x="16" y="18" width="36" height="6" rx="3.0" fill="#c9c2b6"/><rect x="16" y="34" width="52" height="22" rx="3" fill="#fff" stroke="#d8d2c8" stroke-width="1"/><rect x="21" y="40" width="34" height="4" rx="2.0" fill="#e0dad0"/><rect x="21" y="47" width="22" height="3" rx="1.5" fill="#eeeae3"/><rect x="16" y="61" width="52" height="22" rx="3" fill="#fff" stroke="#d8d2c8" stroke-width="1"/><rect x="21" y="67" width="34" height="4" rx="2.0" fill="#e0dad0"/><rect x="21" y="74" width="22" height="3" rx="1.5" fill="#eeeae3"/><rect x="16" y="88" width="52" height="22" rx="3" fill="#fff" stroke="#d8d2c8" stroke-width="1"/><rect x="21" y="94" width="34" height="4" rx="2.0" fill="#e0dad0"/><rect x="21" y="101" width="22" height="3" rx="1.5" fill="#eeeae3"/><rect x="16" y="115" width="52" height="22" rx="3" fill="#fff" stroke="#d8d2c8" stroke-width="1"/><rect x="21" y="121" width="34" height="4" rx="2.0" fill="#e0dad0"/><rect x="21" y="128" width="22" height="3" rx="1.5" fill="#eeeae3"/><rect x="16" y="142" width="52" height="22" rx="3" fill="#fff" stroke="#d8d2c8" stroke-width="1"/><rect x="21" y="148" width="34" height="4" rx="2.0" fill="#e0dad0"/><rect x="21" y="155" width="22" height="3" rx="1.5" fill="#eeeae3"/><rect x="75" y="18" width="36" height="6" rx="3.0" fill="#c9c2b6"/><rect x="75" y="34" width="52" height="22" rx="3" fill="#fff" stroke="#d8d2c8" stroke-width="1"/><rect x="80" y="40" width="34" height="4" rx="2.0" fill="#e0dad0"/><rect x="80" y="47" width="22" height="3" rx="1.5" fill="#eeeae3"/><rect x="75" y="61" width="52" height="22" rx="3" fill="#fff" stroke="#d8d2c8" stroke-width="1"/><rect x="80" y="67" width="34" height="4" rx="2.0" fill="#e0dad0"/><rect x="80" y="74" width="22" height="3" rx="1.5" fill="#eeeae3"/><rect x="75" y="88" width="52" height="22" rx="3" fill="#fff" stroke="#d8d2c8" stroke-width="1"/><rect x="80" y="94" width="34" height="4" rx="2.0" fill="#e0dad0"/><rect x="80" y="101" width="22" height="3" rx="1.5" fill="#eeeae3"/><rect x="75" y="115" width="52" height="22" rx="3" fill="#fff" stroke="#d8d2c8" stroke-width="1"/><rect x="80" y="121" width="34" height="4" rx="2.0" fill="#e0dad0"/><rect x="80" y="128" width="22" height="3" rx="1.5" fill="#eeeae3"/><rect x="75" y="142" width="52" height="22" rx="3" fill="#fff" stroke="#d8d2c8" stroke-width="1"/><rect x="80" y="148" width="34" height="4" rx="2.0" fill="#e0dad0"/><rect x="80" y="155" width="22" height="3" rx="1.5" fill="#eeeae3"/><rect x="134" y="18" width="36" height="6" rx="3.0" fill="#c9c2b6"/><rect x="134" y="34" width="52" height="22" rx="3" fill="#fff" stroke="#d8d2c8" stroke-width="1"/><rect x="139" y="40" width="34" height="4" rx="2.0" fill="#e0dad0"/><rect x="139" y="47" width="22" height="3" rx="1.5" fill="#eeeae3"/><rect x="134" y="61" width="52" height="22" rx="3" fill="#fff" stroke="#d8d2c8" stroke-width="1"/><rect x="139" y="67" width="34" height="4" rx="2.0" fill="#e0dad0"/><rect x="139" y="74" width="22" height="3" rx="1.5" fill="#eeeae3"/><rect x="134" y="88" width="52" height="22" rx="3" fill="#fff" stroke="#d8d2c8" stroke-width="1"/><rect x="139" y="94" width="34" height="4" rx="2.0" fill="#e0dad0"/><rect x="139" y="101" width="22" height="3" rx="1.5" fill="#eeeae3"/><rect x="134" y="115" width="52" height="22" rx="3" fill="#fff" stroke="#d8d2c8" stroke-width="1"/><rect x="139" y="121" width="34" height="4" rx="2.0" fill="#e0dad0"/><rect x="139" y="128" width="22" height="3" rx="1.5" fill="#eeeae3"/><rect x="134" y="142" width="52" height="22" rx="3" fill="#fff" stroke="#d8d2c8" stroke-width="1"/><rect x="139" y="148" width="34" height="4" rx="2.0" fill="#e0dad0"/><rect x="139" y="155" width="22" height="3" rx="1.5" fill="#eeeae3"/><rect x="206" y="8" width="186" height="170" rx="6" fill="none" stroke="#d8d2c8" stroke-width="1"/><rect x="214" y="18" width="36" height="6" rx="3.0" fill="#c9c2b6"/><rect x="214" y="40" width="9" height="9" rx="2" fill="#e0dad0" stroke="#e0dad0" stroke-width="1"/><rect x="228" y="42" width="34" height="4" rx="2.0" fill="#eeeae3"/><rect x="214" y="67" width="9" height="9" rx="2" fill="#e0dad0" stroke="#e0dad0" stroke-width="1"/><rect x="228" y="69" width="34" height="4" rx="2.0" fill="#eeeae3"/><rect x="214" y="94" width="9" height="9" rx="2" fill="#fff" stroke="#8f887d" stroke-width="1"/><rect x="228" y="96" width="34" height="4" rx="2.0" fill="#c9c2b6"/><rect x="214" y="121" width="9" height="9" rx="2" fill="#fff" stroke="#8f887d" stroke-width="1"/><rect x="228" y="123" width="34" height="4" rx="2.0" fill="#c9c2b6"/><rect x="214" y="148" width="9" height="9" rx="2" fill="#fff" stroke="#8f887d" stroke-width="1"/><rect x="228" y="150" width="34" height="4" rx="2.0" fill="#c9c2b6"/><rect x="273" y="18" width="36" height="6" rx="3.0" fill="#c9c2b6"/><circle cx="281" cy="44" r="7" fill="#e0dad0"/><circle cx="286" cy="49" r="2.2" fill="#5b8a5a"/><rect x="293" y="40" width="28" height="5" rx="2.5" fill="#c9c2b6"/><rect x="293" y="48" width="18" height="3" rx="1.5" fill="#eeeae3"/><circle cx="281" cy="71" r="7" fill="#e0dad0"/><circle cx="286" cy="76" r="2.2" fill="#eeeae3"/><rect x="293" y="67" width="28" height="5" rx="2.5" fill="#c9c2b6"/><rect x="293" y="75" width="18" height="3" rx="1.5" fill="#eeeae3"/><circle cx="281" cy="98" r="7" fill="#e0dad0"/><circle cx="286" cy="103" r="2.2" fill="#eeeae3"/><rect x="293" y="94" width="28" height="5" rx="2.5" fill="#c9c2b6"/><rect x="293" y="102" width="18" height="3" rx="1.5" fill="#eeeae3"/><circle cx="281" cy="125" r="7" fill="#e0dad0"/><circle cx="286" cy="130" r="2.2" fill="#5b8a5a"/><rect x="293" y="121" width="28" height="5" rx="2.5" fill="#c9c2b6"/><rect x="293" y="129" width="18" height="3" rx="1.5" fill="#eeeae3"/><circle cx="281" cy="152" r="7" fill="#e0dad0"/><circle cx="286" cy="157" r="2.2" fill="#eeeae3"/><rect x="293" y="148" width="28" height="5" rx="2.5" fill="#c9c2b6"/><rect x="293" y="156" width="18" height="3" rx="1.5" fill="#eeeae3"/><rect x="332" y="18" width="36" height="6" rx="3.0" fill="#c9c2b6"/><rect x="332" y="35" width="20" height="20" rx="3" fill="#fff" stroke="#7a1f1f" stroke-width="1.2"/><rect x="332" y="35" width="20" height="5" rx="0" fill="#7a1f1f"/><rect x="358" y="42" width="24" height="4" rx="2.0" fill="#e0dad0"/><rect x="332" y="62" width="20" height="20" rx="3" fill="#fff" stroke="#d8d2c8" stroke-width="1"/><rect x="332" y="62" width="20" height="5" rx="0" fill="#e0dad0"/><rect x="358" y="69" width="22" height="4" rx="2.0" fill="#e0dad0"/><rect x="332" y="89" width="20" height="20" rx="3" fill="#fff" stroke="#d8d2c8" stroke-width="1"/><rect x="332" y="89" width="20" height="5" rx="0" fill="#e0dad0"/><rect x="358" y="96" width="20" height="4" rx="2.0" fill="#e0dad0"/><rect x="332" y="116" width="20" height="20" rx="3" fill="#fff" stroke="#d8d2c8" stroke-width="1"/><rect x="332" y="116" width="20" height="5" rx="0" fill="#e0dad0"/><rect x="358" y="123" width="18" height="4" rx="2.0" fill="#e0dad0"/><rect x="332" y="143" width="20" height="20" rx="3" fill="#fff" stroke="#d8d2c8" stroke-width="1"/><rect x="332" y="143" width="20" height="5" rx="0" fill="#e0dad0"/><rect x="358" y="150" width="16" height="4" rx="2.0" fill="#e0dad0"/><rect x="214" y="27" width="52" height="3" rx="1.5" fill="#eeeae3"/><rect x="214" y="27" width="22" height="3" rx="1.5" fill="#8f887d"/><text x="101" y="194" font-family="Inter, system-ui, sans-serif" font-size="9" font-weight="400" fill="#8f887d" text-anchor="middle" font-style="italic">three stacks of gray rows</text><text x="299" y="194" font-family="Inter, system-ui, sans-serif" font-size="8.5" font-weight="400" fill="#8f887d" text-anchor="middle" font-style="italic">tasks, people, dates; done, here, overdue</text></svg><figcaption style="font-size:.8rem;color:#a8a298;font-style:italic;margin-top:.4rem">The Blur Test. Every word gone. On the right you still know what is there, and what needs you.</figcaption></figure>

That's the test, and it's worth running on purpose. Blur the text, every heading, label, name and number, and ask the first question: can I still see the nature of what's here? You shouldn't know what the person is called, or that the task says "Verify your email", or that the release is due on October 12. That's what text is for. But you should still see each column's nature: things to do, people, dates.

Then the second question: can I see their state? Can I see what's done and what's waiting? Whether anything needs me? Whether one of those dates has already passed? If the nature survives the blur and the state doesn't, the screen knows what it holds but not how it's going.

If nothing survives, the words were doing all the work.

I like this test enough that I built it into my own tools: a small button floating in the corner of the apps I'm working on, which blurs every word on the screen. One press, and I see what the layout says without them.