E6.06.3empty-state next actiondesign

An empty state must offer a next action

Aliases: empty CTA · next step · zero-data action

What it is

After an empty state has said why it is empty, it still has to offer the step that can be taken now. No data maps to create or import; no results maps to clearing filters or changing the query; error maps to retry or another path. An empty state with no action stops people on the diagnosis: they know there is no mail, and not whether to write one or check a filter. The next step must be the action that can end this emptiness, not a leftover “learn more” into docs.

Why it happens

Blankness ends the current scan: there is no row to click, the task thread breaks. People then look for a control that would make the place not empty. If that action lives on a top-bar button unrelated to the empty illustration, empty state and action come apart in space: newcomers miss it, regulars go to the bar by habit, and the empty region becomes dead. Putting the action inside the empty state rethreads the broken line at the place content will appear. The action also has to follow the cause: the next step for no results is to change the query, not to create. Offering “new project” to someone who searched into a blank produces an object unrelated to the search intent. So the next step is not a generic primary; it is the remedy for this diagnosis.

Where it stops holding

A read-only observer looking at a legitimate empty (no alerts this week) should not be pushed to create; the next step is “change notification rules” or “go back,” or even no create at all. When the action needs a permission or an external condition (connect a repo, verify email), the empty state should point at that precondition, not at a primary that fails on tap. Several equally reasonable next steps (start from template / import / blank) may sit together, but they need a primary; three equal filled buttons are not a next step. On error, “contact support” with no retry treats a recoverable failure as terminal.

Applying it

  • Give each kind of empty one primary that can end that empty, placed beside the illustration and the copy, not only on a distant top bar.
  • Let the label follow the cause: create the first item, clear filters, retry the load. Do not leave “learn more” or “home” as the only exit.
  • When the primary is unavailable, switch it to the precondition and say why create cannot run now.
  • Verify by hiding the top bar and leaving only the empty region: can someone make content appear, or make results return. If not, the action is not attached.

Related

  • Within the group: E6.06.1 Empty states must separate no data, no results, and error · E6.06.2 An empty state is the best place for first-use guidance
  • Adjacent: E1.01 Button hierarchy · E6.10 Error and fallback pages · E6.13 Inline result presentation
  • Search terms: empty-state action · next step · zero-data CTA

Cards in the same group

Quick Actions

Share

Share this page

ios_share

https://hci.top/en/handbook/E6.06.3