H2.02.3empty-state outcome previewdesign

Empty states must show what filling them yields

Aliases: filled-state preview · empty-state value · outcome sketch

What it is

Besides “nothing is here” and “click this next,” an empty state still has to show what filling it yields: a structure that will appear, a job that will become possible, a result that will remain. Without that preview the next step is blind—people do not know whether the first item becomes a list, a calendar, or a stack of cards. This entry is about outcome expectation, not about putting the lesson on the empty surface, and not about having only one button. A preview can be a faded skeleton, a still frame marked as sample, or a sentence specific to an object; it cannot be a brand slogan.

Why it happens

Action needs a result representation: before pressing, people mentally rehearse what the screen will become. An empty work area rehearses “still empty,” so motive is thin. Showing a sliver of the filled shape gives the rehearsal an endpoint, and the cost of the first step can be matched to a payoff. The preview also constrains kind: if the empty view draws board columns, people will not parse the coming object as a document, and later UI can connect. A slogan (“make work flow”) supplies no structure and cannot be rehearsed. Live sample rows can show shape, but they invite people to treat those rows as their own; this entry only needs shape visible. Once the shape can be taken as a record, that is a different problem. Preview strength should be just enough to answer “what will I see when this is filled”; more becomes decoration that crowds out the next step.

Where it stops holding

Error and no-result empties must not preview a rosy filled future—the honest result is retry or loosen filters. Highly personal canvases cannot be represented by one still; preview should say “you will get a place to arrange things,” not fake a standard finished piece. People who have already seen the filled state and returned to empty (deleted all, changed filters) do not need the value ad again. Regulated empties (charts, ledgers) can have a fictional filled preview misread as a real record; use a contentless structural outline only.

Applying it

  • On first-use zero-data, supply the outcome piece: a skeleton or still of the filled structure, or one sentence naming the object type that will appear.
  • Mark the preview “not yet there / sample”; never let it look like clickable existing rows.
  • A slogan plus a button is not a structural preview; if only one sentence fits, write a testable claim such as “after you create, tasks will appear here by date.”
  • Verify by covering the button, leaving copy and preview, and asking what the screen will gain if they fill it now. A brand sentence or “I don’t know” is failure; naming an object type or structure means the outcome was told.

Related

  • Within the group: H2.02.1 The empty view is the natural surface for first-use teaching · H2.02.2 An empty state should offer one unambiguous next step
  • Adjacent: H2.06 Sample Data · E6.07 Skeleton screens · H2.08 Sample Data and Starter Content
  • Search terms: outcome preview · empty-state value · filled-state sketch

Cards in the same group

Quick Actions

Share

Share this page

ios_share

https://hci.top/en/handbook/H2.02.3