E6.06.2first-use empty statedesign

An empty state is the best place for first-use guidance

Aliases: onboarding empty · zero-data guidance · first-run blank

What it is

When a container still has none of the user’s content, that blank is one of the few moments when attention is not stolen by a list. A first-use empty state puts “what this place is for” and “how the first item appears” where the content will live, instead of opening a separate modal tour. It applies only to no-data emptiness, not to a failed search or an error. Spending first-use guidance on a chain of full-screen bubbles abandons a layout that is already empty and already in the business of teaching what will grow here.

Why it happens

People learning a new UI grab structure first, then fill it. An empty list that is only white has no structure, so it is unclear whether the place holds items, tasks, or files. A hint of structure (faded rows, the outline of a sample card) plus one sentence of purpose, placed on the coordinates content will occupy, puts learning where the object will appear; gaze does not have to leave for a help corner. A first empty state also has no competing information: no row to click, no filter to undo. Guidance does not interrupt a running task. Modal tours and corner badges fight the task for time; the empty state does not, because it is the current task—understand this place and start.

Where it stops holding

An experienced user who emptied the container (deleted every project, archived everything) is not first use; replaying “welcome, create your first…” treats fluency as novelty. Write “you cleared this,” not “get started.” In a multi-role product, empty can be correct for an observer (nothing to approve this week); creation guidance is the wrong job for them. Demo data can fill the blank but blurs which objects are theirs; if you use samples, they must be droppable in one step and marked as examples. After first creation already happened, a new device can show a short empty, not the full lesson every time.

Applying it

  • Use the first-use template only when this user has never had content in this container; emptiness after a clear-out gets different copy.
  • Draw structural hints where content will appear, and say in one sentence what the container holds; do not run the explanation as a header ad unrelated to the content region.
  • Do not overlay the empty state with a forced chain of bubbles; the empty state is the lesson.
  • Verify by showing only this screen to someone new and asking what will appear here and how to make it appear. No answer means the first-use slot was wasted.

Related

  • Within the group: E6.06.1 Empty states must separate no data, no results, and error · E6.06.3 An empty state must offer a next action
  • Adjacent: E4.14 Coach marks · E6.07 Skeleton screens · E4.02 List items
  • Search terms: first-use empty state · onboarding empty · zero-data guidance

Cards in the same group

Quick Actions

Share

Share this page

ios_share

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