Empty State

This entry has no runnable specimen; the illustration is an editorial sketch contrasting the wording for the three causes, not a verified implementation. Before shipping, confirm that failures are not worded as “no data” and check that every empty state has a reachable next step.

{
  "states": [
    "first-run",
    "no-results",
    "cleared",
    "error"
  ],
  "a11y": [
    "The explanation is real text a screen reader can announce, not only an illustration",
    "When filtering empties the list, the change in result count is announced through a status message"
  ],
  "motion": "No motion; the illustration is static"
}

{
  "id": "empty-state",
  "type": "micro",
  "name": {
    "zh": "空状态",
    "en": "Empty State"
  },
  "aliases": [
    "Blank Slate",
    "Zero State",
    "空白状态",
    "空页面"
  ],
  "granularity": "state",
  "intents": [
    "inform",
    "reduce-complexity"
  ],
  "tags": [
    "empty",
    "first run",
    "guidance",
    "no results",
    "placeholder"
  ],
  "definition": "The screen shown when a container holds no content: it says why it is empty, what would be here, and what one concrete next step would fill it — rather than leaving a blank.",
  "boundary": "Emptiness has at least three causes and they need different wording: nothing yet (first use), nothing found (a filter or search returned none), and nothing left or nothing allowed (deleted, insufficient permission, failed to load). Answering all three with one sentence leaves users without an answer to what should I do — especially when a failure is described as “no data”, which makes people think the fault is theirs. An empty state is not a loading state either: loading means content is on its way, empty means it is not coming. Nor is it a sales slot: turning a first-use screen into a plan promotion withholds guidance at the moment it is most needed.",
  "signature": [
    "It says why it is empty rather than only showing “no data”",
    "It says what would appear here",
    "It offers one concrete next step, within reach on the spot"
  ],
  "when": [
    "A user arrives for the first time and the container simply has nothing in it yet",
    "A filter or search returned nothing and the way to widen it needs saying",
    "Content is invisible because of permission, deletion, or failure and the reason needs stating"
  ],
  "when_not": [
    "Loading is presented as empty, so users think there is nothing when it has merely not arrived",
    "A failure is worded as “no data”, leaving users unable to tell that the system went wrong",
    "The blank screen becomes a promotion and the real next step disappears"
  ],
  "tradeoff": "Explaining and offering a way in at the emptiest moment turns a dead end into a start; the cost is one set of wording for each of the three kinds of emptiness, separately maintained — and these are exactly the screens most easily forgotten in a redesign.",
  "comparison": {
    "focus": "Explaining why there is nothing and what to do next",
    "mechanism": "Separate wording and entry points for nothing yet, nothing found, and nothing left",
    "cost": "Each cause needs its own copy, and these screens are easily forgotten later"
  },
  "sources": [
    {
      "id": "emptystate-carbon",
      "title": "Carbon Design System · Empty states",
      "url": "https://carbondesignsystem.com/patterns/empty-states-pattern/",
      "claim": "The pattern defines empty states as moments in an app where there is no data to display to the user, notes that they are most commonly seen the first time a user interacts with a product or page but can also occur when data has been deleted or is unavailable, and says that they keep the user informed and supported by communicating what the user would see if they had data while providing constructive guidance about next steps. This entry takes the definition and the three causes from it.",
      "checkedAt": "2026-09-16",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260916*/https://carbondesignsystem.com/patterns/empty-states-pattern/",
        "status": "pending",
        "checkedAt": "2026-09-16T17:37:14.637Z",
        "error": "status-request-failed",
        "jobId": "spn2-61a17eaa49727d3d997e1441af9b8a6d417084e0"
      }
    },
    {
      "id": "emptystate-ui-patterns",
      "title": "UI Patterns · Blank Slate design pattern",
      "url": "https://ui-patterns.com/patterns/BlankSlate",
      "claim": "The pattern states the problem as the user wanting to get started but needing guidance in the form of an example of how the application will look, feel, and behave when in full function and filled with data, and advises using it when the application feels lifeless and empty before data has been entered, to motivate the user to begin and help them get started. This entry takes the requirement to say what would appear here from it.",
      "checkedAt": "2026-09-16",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260916*/https://ui-patterns.com/patterns/BlankSlate",
        "status": "pending",
        "checkedAt": "2026-09-16T17:37:17.345Z",
        "error": "status-request-failed",
        "jobId": "spn2-49b3430aa5f022adb7178137533397e09382a47a"
      }
    }
  ],
  "relations": [
    {
      "target": "skeleton",
      "kind": "alternative",
      "condition": "The container currently has nothing to show",
      "reason": "A skeleton says content is on its way and an empty state says it is not coming; getting them the wrong way round leaves people waiting when they should act.",
      "basis": "editorial"
    },
    {
      "target": "status-message",
      "kind": "composes_with",
      "condition": "The emptiness is caused by a failure or by insufficient permission",
      "reason": "What the user needs then is a reason and a way to retry, not the words “no data”.",
      "basis": "editorial"
    },
    {
      "target": "search-and-filter",
      "kind": "composes_with",
      "condition": "The emptiness comes from filters that are too narrow",
      "reason": "The most useful next step then is widening or clearing the filters, and the empty state should put that action right there.",
      "basis": "editorial"
    },
    {
      "target": "disguised-ads",
      "kind": "conflicts_when",
      "condition": "A first-use blank screen is used to sell a plan or an add-on",
      "reason": "At that moment the user is looking for how to begin, and putting promotion there replaces the answer they came for.",
      "basis": "editorial"
    }
  ],
  "rules": [
    {
      "when": "A container is empty",
      "instruction": "Distinguish nothing yet, nothing found, and nothing left or not allowed, and word each separately; on failure, say the system went wrong and offer a retry.",
      "strength": "must",
      "basis": "editorial"
    },
    {
      "when": "The empty state offers a next step",
      "instruction": "Make that action completable on the same screen instead of sending the user elsewhere to find their way back.",
      "strength": "recommend",
      "basis": "editorial"
    }
  ],
  "behavior": {
    "states": [
      "first-run",
      "no-results",
      "cleared",
      "error"
    ],
    "a11y": [
      "The explanation is real text a screen reader can announce, not only an illustration",
      "When filtering empties the list, the change in result count is announced through a status message"
    ],
    "motion": "No motion; the illustration is static"
  },
  "demo": null,
  "version": "0.1.0",
  "editorialStatus": "drafted",
  "requirements": [],
  "demoCapabilities": [],
  "implementationNote": "This entry has no runnable specimen; the illustration is an editorial sketch contrasting the wording for the three causes, not a verified implementation. Before shipping, confirm that failures are not worded as “no data” and check that every empty state has a reachable next step.",
  "image": {
    "src": "/images/empty-state.webp",
    "alt": "A three-panel sketch: three fictional panels side by side, all without content, each carrying a different simple illustration, a run of grey placeholder explanation bars, and a button — standing for nothing yet, nothing found after filtering, and failed to load."
  },
  "searchTerms": [
    "空",
    "首次使用",
    "引导",
    "无结果",
    "占位"
  ]
}