R2.09.1directional empty statedesign

An empty state must guide the next step, not only announce absence

Aliases: empty state as next-step · empty must point · guiding empty frame

What it is

If the empty screen in the package only says “nothing here,” implementation will build an announcement, and the person looking at it still will not know where to put their hands. A directional empty state is an empty frame whose job is to point: what to do, where to do it, and what will appear after — not to restate that the collection is zero. Zero is already visible as blankness. What has to be shipped is the path out of the blank.

This is about the duty of that empty frame as a shipped artifact, not about whether empty is the best surface for first-run teaching, and not about whether the component library has an Empty variant. A component missing its empty skin, and a page that does not send the person onward, are two different holes.

Why it happens

The empty frame is the only interface still lit for this task. Announcement copy stops cognition on a diagnosis: “none.” After the diagnosis the action channel is closed, so people leave, tap the sidebar at random, or treat empty as a fault. Directional copy uses the same board as a channel entrance: the primary sits on the coordinates where content will appear, and supporting text serves that control only. Implementation decides whether to wire create, import, or relax-filters by whether that control is on the frame. An announcement-only frame omits the entrance, or tucks it into a header that has nothing to do with the content.

Illustration does not substitute for pointing. A handsome empty drawing is still decoration on an announcement; implementation will treat it as a finished empty and stop asking for an action. Drawing the action into the empty frame rewrites “empty” from a status report into the task’s first screen. Without that first screen, the feature has not been handed off — only “don’t crash at count zero.”

Where it stops holding

When permission forbids create and the user cannot change that fact, pointing at create is a fake road. The empty frame should point at requesting access or leaving, not at a primary that will error. Read-only dashboards, compliance archives, and ended campaigns are empty because nothing new belongs here; the duty shrinks to explaining why it ended, not inventing a production path. Search-with-no-hits is not “content has never existed”; the point should be changing the query. Drawing create there teaches the wrong cause. On a monitoring wall that users never empty by hand, empty may last a few hundred milliseconds; shipping a guided empty with motion will flash as noise. That slot should be caught by loading, not forced to have a button because “empty must point.”

Applying it

  • Every empty frame must include: one line on why it is empty now, one primary action (or an explicit reason there is none), and one line on what appears after success. Missing any of the three means the empty was not shipped.
  • Put the primary in the region content will occupy. Do not leave it only in a distant top bar.
  • Do not ship “no data yet” plus an illustration as the whole empty. Illustration may only support the pointing.
  • Open the page with an account that is truly zero, block top navigation, and leave only the empty region. Ask someone new to the product where they would tap next. If they cannot find an action in the content region, or they think the system is broken, put the guidance back in the design source — do not add a toast in implementation.

Related

  • Same group: R2.09.2 First-use empty and emptied-after-use empty are different meanings · R2.09.3 Partial failure and total failure need separate expressions · R2.09.4 Skeleton shapes must correspond to the content they stand in for
  • Adjacent: R1.03 Completeness of component states · I2.08 Load failure
  • Search terms: directional empty state · empty next step · handoff empty frame

Cards in the same group

Quick Actions

Share

Share this page

ios_share

https://hci.top/en/handbook/R2.09.1