Chapter 03

The voice of emptiness

An interface with nothing to show isn't mute — it's the moment its voice is heard most clearly. 404s, empty lists, fruitless searches: small voids that weigh a lot, and that care distinguishes from abandonment.

8 min read

Most interfaces are designed for the happy path: data is there, the user scrolls, the action succeeds. But between one full screen and the next there are the empty moments — when the page has nothing to show. And it’s right there that an interface speaks about itself more than anywhere else: it tells you how much it respects the people using it, how much it trusts its own future, how much thought went into the less glorious case.

Emptiness isn’t absence. It’s a moment of speech. A 404 page can be the worst or the most cordial corner of the house; a list with no items can look like a glitch or an invitation. What changes everything is the voice — not just the words, but the tone, the rhythm, and the next gesture offered.

In this chapter we open six different voids, each with its own small voice: ironic, inviting, informative, gentle, honest, instructive.

A 404 is a page like any other

The 404 is the first void anyone meets. For most sites it’s a shortcut: a sterile line, a giant number, a “back to home” link. The user is already suspicious — they think they did something wrong. A cordial 404 receives them, explains what happened in plain language, and offers a direction before asking to be judged.

03.a
altrove/finestra-che-non-c-era
404

Questa pagina è andata altrove

Resto io a tenerti compagnia mentre torniamo da qualche parte di sensato.

Honest 404 · a page that doesn't run away

The “warm” version treats the 404 as a conversation: a sentence that acknowledges the situation (“This page has gone elsewhere. I’ll keep you company while we find our way back.”), an honest primary action, and a useful secondary one (nearby suggestions via fuzzy match on existing titles). The toggle “show me how not to do it” flips to the sterile version — same page, different voice, and you feel the difference in your chest, not just your eyes.

The honest detail is the fake URL in the browser bar: replaying a small fragment of the context the user just left — not for nostalgia, but because it confirms what they didn’t find. It’s an act of transparency: “we understood what you were looking for.” No magic, no generic screens. Just honesty about the error.

The list that hasn’t seen anything yet

The first-run empty state is a delicate moment: there’s nothing yet because nothing has happened yet, not because something broke. The difference between “your move” and “looks like a glitch” is all in the tone. Empty lists that work are the ones that explain what will go here, why it matters, and where to click to begin.

03.b

I miei segnalibri

Nessun segnalibro, per ora

Qui appariranno i capitoli che tieni a portata di mano. Comincia salvandone uno.

    Nothing here yet · the first move is yours

    A minimal SVG illustration — a line tracing a bookmark — draws itself only on first appearance in the viewport, once, and then doesn’t re-stage the scene. It’s a small sign of life: “this state was thought about, not forgotten.” Re-animating it on every revisit would be nervousness.

    The microcopy is the real craftsman’s piece: “No bookmarks, for now.” “For now” is the little word that changes everything — it promises a future without imposing one. The primary CTA reuses the staggered pattern from the previous chapter: the new item enters with a calibrated delay, the existing ones stay put. Visual memory is built, not interrupted.

    When the search finds nothing, the interface offers something

    A search with no results is an interface failure, not a user failure. Yet most sites return a cold “No results found” — as if the responsibility lay with whoever is searching. An honest void offers alternatives: maybe a misspelled word, maybe a synonym, maybe a lateral tag that redirects the search onto an adjacent track.

    03.c

    Nessun risultato per tipogrfia

    • La micro-tipografia

      cap. 08 · in roadmap

    • Anatomia di un bottone

      cap. 01 · tipografia inclusa

    • Le pause del lede

      appunto · tipografia editoriale

    Did you mean… · a void that proposes

    The input is pre-filled with typgraphy — a plausible typo. Below, the empty state is composed: an honest title (“No results for typgraphy”), a single strong suggestion (“Did you mean: typography” — a pressable chip that rewrites the query and shows three results), and three lateral routes (“Try without accents”, “Browse the tags”, “Open the index”). Three concrete actions, no apologies.

    The “did you mean” isn’t magic — it’s a simplified Levenshtein distance over a small dictionary of probable words. Thirty lines of JavaScript. The value isn’t in the algorithm; it’s in the expectation that there is one. A void that proposes spares the reader the “start over” step: that’s exactly the friction care saves them.

    The error that explains instead of shouting

    Blocking errors are the most uncomfortable void: the page was there, the action fails, and we’re usually shouted at with a red icon and a technical phrase. The kind error does the opposite: it explains what happened in plain language, says whether it’s temporary or permanent, and offers the next action — without blaming the next click.

    03.d

    Sincronizzazione note

    12 voci · ultimo aggiornamento alle 14:31

    Non riesco a parlare con il server

    È probabile un problema di connessione temporaneo. Le note locali sono al sicuro.

    Ultimo tentativo:

    Dettagli tecnici
    NetworkError: fetch failed
      at sync.ts:42:12
      at handleSyncTick
      status: 0 (offline?)

    Error without panic · explain, don't shout

    The pattern is “error inside the card, not over the user”: no destructive toast, no emergency modal. The “Notes sync” card changes its visual state — discreet amber border, small icon, a title that names the problem in plain language (“I can’t reach the server right now”), a timestamp, and two CTAs: Retry (primary) and Technical details (a native <details> that opens the stack trace only for those who actually want it).

    The title uses role=“alert” with aria-live=“assertive” — screen-reader users hear the error immediately, but in a single sentence, not a flood. The technical details live in aria-live=“polite”: they arrive when the user asks for them, not before. It’s the same register difference as shouting versus explaining.

    The permission that explains itself before asking

    System prompts (location, notifications, photos, microphone) are dialogs that are brutal by design: two buttons, no context, a decision that weighs. The difference between 60% “accept” and 90% isn’t in the pixels of the system dialog — it’s in what the interface says before triggering the prompt. The pre-prompt pattern: explain the why, then ask.

    03.e

    Negozi vicini

    Vediamo dove siete tu e i negozi.

    Per mostrarti le botteghe entro 2 km, ci serve la tua posizione approssimativa. Niente tracking, niente storia: la usiamo una volta sola.

    Trovati 3 negozi entro 2 km.

    D'accordo, niente posizione.

    Puoi sempre cercare per città o tornare quando vuoi. Niente offeso, promesso.

    Location · the why first, the request second

    The “Nearby shops” card doesn’t start by asking. It starts by motivating: “To show you shops within 2 km, we need your approximate location. No tracking, no history.” Two CTAs — “OK, show me” (primary) and “Not now” (secondary, without a guilt-tripping tone). Press the primary and a fake handshake starts (a 1200 ms map skeleton) and the card transitions to a final state — granted, refused, or error. Each state has its own voice, never accusatory.

    The “Not now” is the real signal of respect: it isn’t “I never want to hear from you again,” it’s “not in this moment.” The user knows they can come back, and the refusal costs them nothing socially. The machine that explains before asking gets more — not because it manipulates, but because it shows itself to be collaborative. It’s the exact opposite of a dark pattern.

    Zero data, a thousand directions

    The empty dashboard is the subtlest test. Four widgets, all without data: easy to make a grey field that reads “Connect a source.” Hard to make it an implicit onboarding, in which each widget shows what shape your data will take once it arrives, and proposes the minimal action to begin. A good zero-data state doesn’t look empty: it looks like a probable future.

    03.f

    Riepilogo · maggio

    Visitatori unici

    Letture per giorno

    Attività recenti

    Obiettivi settimanali

    Zero data · a dashboard that teaches itself

    Four widgets — a chart, a counter, an activity list, progress rings. Each one shows a ghost imprint of its final form (dashed chart, ”—” numerals, list with labelled placeholder rows, rings at 0%), accompanied by a contextual micro-action (“Connect a source”, “Import CSV”, “Add manually”). The toggle at the top, “Preview with sample data”, populates every widget with fake numbers — typographic count-ups, rings that fill, the list staggers in.

    The number count-up uses the expressive spring preset from our motion library — a small overshoot, because a number revealing itself is a tiny celebration. No Apple Watch ring, though: no ring closes beyond 100%. The rule: even sample animations tell the truth. If the example shows 84% completion, it’s 84%, not 99 “for show”.

    What we take away

    Emptiness isn’t a hole to hide: it’s a shape the interface draws when it has nothing to show. And like every shape, it has a voice. The six demos above explore six possible voices:

    1. The 404 that welcomes, instead of accusing.
    2. The list that invites the first move, instead of looking broken.
    3. The empty search that proposes, instead of apologising.
    4. The error that explains, instead of shouting.
    5. The permission that motivates itself, instead of asking cold.
    6. The zero-data dashboard that teaches itself, instead of staying grey.

    Six voids, six ways to say something when there’s nothing to show. The next chapter opens an adjacent territory — the silent dialogue — because an interface, when it really must speak, has to do it well: with the keyboard in hand, focus where it belongs, and the humility to know when to be quiet.