Empty State Design¶
The UI practice of deliberately designing the zero-content view — treating it as a first-class state with a fixed four-slot template (message, intentionality cue, call-to-action, optional sample) rather than whatever the populated layout degrades to.
Core Idea¶
Empty state design is the user-interface practice of deliberately designing the screen, view, or component that appears when a feature or container holds no content yet — a freshly opened inbox with no messages, a workspace with no projects, a dashboard with no data, a search returning no results. The discipline treats the zero-content condition as a designed state in its own right rather than a degenerate or ignored case of the populated state, and it prescribes a specific intervention structure: an explanatory message naming the absent thing and why it is absent, a visual cue (illustration, icon, or graphic) that signals the emptiness is intentional rather than a broken load, a call-to-action prompting the specific first step that will populate the state, and optionally a lightweight sample or walkthrough showing what the populated state looks like. Done well, the empty state converts a potentially disorienting absence into a moment of orientation that explains the screen's purpose, reduces blank-screen anxiety, and lowers the activation cost of first use. Done badly or omitted, the user encounters an uncontextualized blank and either disengages, concludes the feature is broken, or wastes effort searching for content that does not exist. The discipline emerged from UX and onboarding-as-design practice and is codified in Google's Material Design guidelines, Apple's Human Interface Guidelines, and Nielsen Norman Group documentation. The pattern is substrate-specific to screen-based interfaces: its characteristic components — copy, illustration, CTA button — are UI artifacts, and the "transition condition" (the empty state is replaced when the first user-generated content arrives) is a property of a persistent-state application with a data-populated view. The structural contribution of the discipline is to make the zero-content state a first-class design concern, subject to the same intentionality as populated states, rather than leaving it as an accidental by-product of the rendering logic when the content array is empty.
Structural Signature¶
Sig role-phrases:
- the zero-content state — the screen, view, or component that appears when a feature or container holds no content yet (empty inbox, workspace, dashboard, search result), treated as a designed state in its own right rather than a degenerate populated layout
- the explanatory message — copy naming the absent thing and why it is absent, so the user knows what belongs here
- the intentionality cue — an illustration, icon, or graphic signaling the emptiness is deliberate, distinguishing designed emptiness from a broken or pending load
- the call-to-action — a prompt for the specific first step that will populate the state, giving the user a path forward
- the optional sample — a lightweight walkthrough or sample data showing what the populated state will look like
- the legibility guarantee — the state announces itself as one of three distinct conditions (empty vs. loading vs. error), claiming the blank as intentional
- the activation-cost lever — the four slots as the controls on whether a new user crosses from empty to populated or abandons at the blank
- the exit transition — the empty state is transient, replaced by the populated state when the first user-generated content arrives
What It Is Not¶
- Not a degenerate by-product of the populated layout. The whole point is to treat the zero-content view as a first-class designed state, authored deliberately with its own copy, visual, and call-to-action — not whatever the populated layout happens to render with the content array empty. Left to the rendering logic, the empty view is an un-authored accident; the discipline insists it be drawn on purpose.
- Not a loading or error state. Empty, loading, and failing are three distinct conditions that must each announce themselves, and the empty state's specific job is to claim the blank as intentional so the user does not misread it as still loading or broken. A blank that does not declare which condition it is invites the worst assumption; distinguishing designed emptiness from a pending or failed load is the load-bearing requirement.
- Not a blank screen or mere placeholder. It has a fixed four-slot structure — an explanatory message, an intentionality cue, a first-action call, and an optional sample — and performs orientation work: telling the user what belongs here and what to do next. Absence is exactly what it is designed to replace, so equating it with an empty placeholder misses its content.
- Not a cosmetic concern. The empty state is the lever on the activation cost of first use; a missing or poor one can cause disengagement, the conclusion that the feature is broken, or wasted hunting for content that does not exist. Its failure is a functional onboarding failure localizable to a specific missing slot, not a question of how the screen looks.
- Not a substrate-spanning pattern under its own name. "Onboarding a new hire is empty-state design for an organization" is metaphor: the UI-specific components (illustration, copy, CTA button, walkthrough) do not port, and a classroom intro or kickoff meeting uses structurally different mechanisms. The portable content is the parent
scaffoldingpattern — supply orientation cues and a first move at a system's zero-state — of which this is one screen-based instance.
Scope of Application¶
Empty state design lives within software UI/UX — one substrate (a persistent-state, screen-based application with data-populated views) across many view types; its reach is bounded to screen-based interfaces, and the cross-domain "zero-state orientation" analogues (onboarding a hire, opening a class) belong to the parent scaffolding prime, not to this UI-specific discipline.
- Mobile and web apps — empty inbox, contacts, history, notifications, and search-result views, the canonical home of the four-slot template.
- Productivity software — empty kanban boards, calendar views, and document folders, each authored as a designed zero-content state.
- Marketplaces and social platforms — empty feeds, profiles, carts, and wishlists, where the first-action call-to-action drives initial population.
- Analytics and data tools — empty dashboards before data ingestion and empty filter result sets, where the cue must distinguish "no data yet" from a broken or pending load.
- Onboarding and first-run design — the activation-cost surface where well-instantiated empty states lower the cost of crossing from empty to populated at first use.
Clarity¶
Naming empty state design promotes the zero-content view from an afterthought of the rendering logic to a first-class object of design. Without the concept, the screen shown when the content array is empty is whatever falls out of the populated layout with nothing in it — a degenerate, un-authored case that the team never deliberately drew. With it, the designer recognizes the empty state as a distinct state deserving the same intentionality as the populated one, with its own copy, visual, and call-to-action. That reframing is what lets onboarding cost — the activation effort of first use — become a thing the interface is designed around rather than an accident a new user stumbles into.
The concept also sharpens a distinction the blank screen otherwise collapses: intentional emptiness versus a broken or pending load. A user facing an uncontextualized blank cannot tell whether the container is legitimately empty, still loading, or failing — and tends to assume the worst, concluding the feature is broken or hunting for content that does not exist. By prescribing an explicit visual cue and an explanatory message, the discipline makes the emptiness legible as designed, so the sharper question for the practitioner shifts from "how does this look with data?" to "what should the user understand, and do, when there is no data yet?" That question, asked at design time, is what separates an empty state that orients from a blank that disengages.
Manages Complexity¶
An application surface is, from a design standpoint, an open-ended set of screens-times-conditions: every inbox, workspace, dashboard, feed, search, cart, and folder can be in any of several content conditions, and the populated condition alone already absorbs nearly all the team's drawing effort. The zero-content condition multiplies that surface — there is an empty version of every view — and left to the rendering logic each empty version is whatever the populated layout happens to degrade to with nothing in it, so the team would have to reason about an unbounded grid of view-by-emptiness cases individually. Naming empty state design collapses that grid by recognizing one regularity that holds across all of them: the zero-content view is a single recurring state type with a fixed four-part structure — an explanatory message, an intentionality cue, a first-action call, an optional sample. Whatever the view, the designer reads its empty version off the same small template rather than re-authoring it from the populated layout, so the question "how do all these screens behave with no data?" reduces to instantiating four slots per container. The compression also fixes the qualitative outcome from a small parameter set. What the team tracks at each empty view is not the open-ended look-and-feel but three things: does the user know what belongs here, does the user know the emptiness is intentional (not a broken or pending load), and does the user know the next step that populates it. Those determine the branch the user falls into — oriented and acting, or disengaged and assuming breakage — and they read directly off whether the message, the cue, and the call-to-action are present. The activation cost of first use, which would otherwise be an emergent and unmeasured property of however the blank happened to render, becomes a designed quantity the template controls. And the state's lifecycle is bounded by one transition condition — the empty state is replaced when the first content arrives — so the team need not track the empty view as a standing concern but only as the state that holds until that trigger fires. A potentially unbounded design surface of views-times-content-conditions is thereby reduced to one reusable state type with four slots and one exit condition, from which both the user's orientation and the onboarding cost are read rather than rediscovered screen by screen.
Abstract Reasoning¶
Empty state design licenses reasoning moves a UI designer runs on any content container, all flowing from treating the zero-content condition as a designed state with a fixed four-slot structure and one exit transition.
The constructive move is instantiate-the-template: confronting any view that can hold content, the designer reasons that its empty version is not whatever the populated layout degrades to but a distinct state to be authored from four slots — an explanatory message naming the absent thing and why it is absent, an intentionality cue (illustration or icon) signaling the emptiness is deliberate, a call-to-action prompting the first populating step, and an optional sample of the populated state. The reasoning runs from "this container can be empty" to "draw these four elements," so the designer derives the empty view by filling slots rather than re-inventing it per screen. This is the move that converts an unbounded grid of views-times-content-conditions into a single reusable state type, applied uniformly across inbox, dashboard, feed, cart, and search.
The diagnostic move runs from a user's blank-screen behavior back to which of three understandings the empty state failed to deliver. The designer reasons that a user who disengages, concludes the feature is broken, or hunts for nonexistent content is missing one of exactly three things — what belongs in this container, whether the emptiness is intentional versus a broken or pending load, or the next step that populates it — and each gap maps to a missing slot: an absent message leaves the user not knowing what belongs, an absent cue leaves them unable to distinguish designed emptiness from breakage, an absent call-to-action leaves them without a path forward. So an observed activation failure is localized to a specific missing element rather than attributed vaguely to "bad UX," and the remedy is read off the gap.
The boundary-drawing move separates intentional emptiness from a broken or pending load, a distinction the bare blank screen collapses and which the designer reasons about explicitly. Because a user facing an uncontextualized blank cannot tell whether the container is legitimately empty, still loading, or failing — and tends to assume the worst — the designer treats "make the emptiness legible as designed" as the load-bearing requirement, and reframes the design question from "how does this look with data?" to "what should the user understand, and do, when there is no data yet?" This is a state-classification move: the empty state, the loading state, and the error state are three distinct conditions that must each announce themselves, and the empty state's job is specifically to claim the blank as intentional so it is not misread as either of the other two.
The lifecycle move bounds the empty state as transient rather than standing, and reasons about it through its exit condition. The designer treats the empty state as the view that holds only until the first user-generated content arrives, at which point it is replaced by the populated state, so it need not be carried as a permanent concern but only as the state governing the gap between feature-open and first-content. This order-of-events framing tells the designer when the empty state matters — at first use, before the activation step succeeds — and lets onboarding cost, which would otherwise be an emergent and unmeasured property of however the blank rendered, become a designed quantity the template controls: the designer predicts that a well-instantiated empty state lowers the activation cost of first use and that an omitted one raises it, reasoning about the four slots as the levers on whether a new user crosses from empty to populated or abandons at the blank.
Knowledge Transfer¶
Within software UI/UX the discipline transfers as mechanism, and what carries is the whole apparatus: the four-slot template (message, intentionality cue, call-to-action, optional sample), the diagnostic that maps a blank-screen behavior to a specific missing slot, the boundary between intentional emptiness and a broken-or-pending load, and the transient lifecycle bounded by the first-content exit transition. The precondition is a persistent-state, screen-based application with data-populated views, and across the application surface each is a genuine instance of the same designed-zero-content state rather than a likeness — an empty inbox, an empty workspace or kanban board, an empty dashboard before ingestion, an empty feed or profile, an empty cart or wishlist, an empty search result. The very cross-product consistency of the "no items yet — create one" pattern across these views is the signature of a mature UI discipline whose template applies uniformly; the transfer is mechanism-preserving because the components (copy, illustration, CTA button) are the same UI artifacts in every case.
Beyond screen-based interfaces the report is twofold, and the boundary is sharp because the discipline's components are substrate-bound. (1) The cross-domain analogies the design discourse reaches for — onboarding a new hire, the opening minutes of a class, an organizational kickoff meeting — are metaphor: they share the aim of zero-state orientation but the empty-state interventions (illustration, copy, CTA, walkthrough) are UI-screen-specific and do not port with structural force, so a teacher introducing the day or a charter meeting employs structurally different mechanisms and the "onboarding is empty-state design for an organization" claim, while evocative, carries no intervention family with it. Such uses should be marked as analogy. (2) The genuinely portable content is one level up: stripped of the UI-screen substrate, the residual is "when a system is at a low-information, low-engagement zero-state, supply orientation cues and a first-action prompt" — which is the scaffolding prime in its starting-state specialization (kin to onboarding and signaling). That parent really does travel across domains, and it is the level at which the cross-domain lesson lives; empty state design is one substrate-specific instance of it. So the discipline is exact: the cross-domain lesson should carry the parent scaffolding (zero-state orientation plus a first move), while empty state design's distinctive cargo (the four-slot UI template, the message/cue/CTA artifacts, the loading-vs-error-vs-empty state classification, the Material/HIG/NNG codification) is user-interface-design furniture that does not and should not travel. Mechanism within software UI (one substrate at many view types); metaphor beyond, with the genuine portable lesson resident in the parent scaffolding prime rather than in this named discipline. This is exactly the boundary Structural Core vs. Domain Accent draws.
Examples¶
Canonical¶
A task-manager's first-run inbox is the discipline made concrete. A user who signs up and opens their task list has, by definition, no tasks — the populated layout has nothing to render. Rather than show a bare white pane (which reads as broken or still loading), a well-designed app fills the four slots: an explanatory message ("You have no tasks yet — this is where your to-dos will live"), a friendly illustration signaling the emptiness is intentional, a prominent call-to-action button ("Add your first task"), and optionally a faded sample task showing what a populated row looks like. The screen thus converts a disorienting blank into an orientation moment that names the container's purpose and hands the user their first step. Google's Material Design, Apple's Human Interface Guidelines, and the Nielsen Norman Group all codify this template.
Mapped back: The task-free list is the zero-content state, authored deliberately rather than left as a degenerate populated layout. The four elements are exactly the explanatory message, intentionality cue, call-to-action, and optional sample; the illustration provides the legibility guarantee (this is empty-by-design, not loading or error). The "Add your first task" button is the activation-cost lever, and it vanishes at the exit transition when the first real task appears.
Applied / In Practice¶
Analytics and BI dashboards deploy empty states to solve a specific real hazard: a data view with no data looks identical to a broken pipeline. Tools like a metrics dashboard or a newly created chart show, before any data is ingested, a designed empty state that says explicitly "No data yet — connect a source" with a connect button, precisely so an operator does not misdiagnose an un-configured dashboard as a failed query or a downed ingestion job. This distinction is load-bearing in production monitoring, where mistaking "nothing has happened yet" for "the system is broken" wastes on-call effort; the empty state claims the blank as intentional and routes the user to the configuration step instead.
Mapped back: The pre-ingestion dashboard is the zero-content state; its intentionality cue and explanatory message provide the legibility guarantee that distinguishes empty from loading from error — the concept's core boundary. The "connect a source" prompt is the call-to-action / activation-cost lever moving the operator toward populating the view, and the state ends at the exit transition when the first data arrives, exactly the transient lifecycle the discipline specifies.
Structural Tensions¶
T1: A reusable four-slot template versus semantically distinct kinds of emptiness. The template's power is uniformity: every empty view reads off the same four slots, collapsing an unbounded grid of views-times-conditions into one reusable state type. But "no content" is not one situation. A first-run inbox (nothing exists yet) wants an onboarding CTA to create; a no-results search (the user acted, expected content, got none) wants "refine your query," not "add your first item"; a cleared or completed list (the user emptied it) is a success state that should celebrate, not prompt activation. Applying the same "add your first X" template across these flattens genuinely different meanings, and a create-CTA is simply wrong for a no-results search or an inbox-zero achievement. The tension is that the compression which makes the discipline scalable — one template for all empty views — misfits the distinct semantics of emptiness it lumps together. Diagnostic: Is this container empty because nothing has been created yet, because a query returned nothing, or because the user finished — and does the instantiated template match that specific kind of emptiness?
T2: Orientation for the novice versus friction for the returning user (empty-by-success is not empty-by-not-started). The empty state lowers the activation cost of first use by welcoming a disoriented new user with copy, illustration, and a first step. But that same elaborated state is noise to a returning or expert user, and actively wrong for a container that is empty as a normal or desirable condition — a cleared queue, an empty flagged folder, inbox zero as an accomplishment. Dressing a routine or celebrated emptiness as an onboarding moment, complete with a nudge to populate it, patronizes the experienced user and misreads success as a gap to be closed. The tension is that the intervention calibrated to reassure and activate the first-timer imposes weight and a prompt on everyone who reaches the same blank for a different, legitimate reason. Diagnostic: Is the audience for this empty state a disoriented first-time user, or a returning user for whom the elaborated onboarding treatment is friction — or who has emptied the container on purpose?
T3: User orientation versus growth funnel (the activation-cost lever serves two masters). Framed as helping the user understand and act, the call-to-action is also, unavoidably, a conversion surface: the empty state is precisely where products push first content creation, invitations, and source connections — the activation metric the business wants to move. So "reduce blank-screen anxiety" and "drive the funnel" are bundled in the same four slots, and the CTA can be tuned to what the product owner needs (sign-ups, content, connected accounts) rather than to what the disoriented user needs to understand. The orientation rationale can then serve as cover for a persuasion surface. The tension is that the same lever framed as user-serving onboarding is simultaneously a growth instrument, and the two aims diverge whenever the metric-optimal prompt is not the genuinely clarifying one. Diagnostic: Is the call-to-action here the step the user actually needs to make sense of the screen, or the action the product's activation metric wants — and do those coincide?
T4: Claiming the blank as intentional versus honest uncertainty (declaring "empty by design" can hide a failure). The discipline's load-bearing move is to claim the blank as intentional, distinct from loading or error, so the user does not assume breakage. But that confident declaration presumes the emptiness is legitimate — and a container can be empty because of a silent failure: a wrong filter, a failed sync, hidden permissions, a query that errored quietly. In those cases a reassuring "No data yet — connect a source" actively camouflages a real problem, asserting normalcy over exactly the state that warranted alarm. Worse, the app often cannot tell at render time why the content array is empty, so the empty/loading/error boundary the concept relies on is not always determinable. The tension is that the move which prevents false alarms (claim the blank as designed) can manufacture false reassurance, suppressing the signal a genuinely broken state needed to send. Diagnostic: Does the code actually know this container is legitimately empty, or is an "empty by design" state being asserted over a possible silent failure it cannot distinguish?
T5: Autonomy versus reduction (a UI discipline or the scaffolding parent it instantiates). Within software UI the discipline transfers as full mechanism — the four-slot template, the missing-slot diagnostic, the empty/loading/error boundary, and the transient lifecycle carry uniformly across inbox, dashboard, cart, and search, because the components (copy, illustration, CTA) are the same UI artifacts everywhere. But beyond screen-based interfaces its cargo does not port: "onboarding a new hire is empty-state design for an organization" is metaphor — it shares the aim of zero-state orientation while a classroom intro or kickoff meeting uses structurally different mechanisms, and no intervention family travels with the phrase. What genuinely lifts is one level up: supply orientation cues and a first move at a system's zero-state, which is the scaffolding prime in its starting-state specialization (kin to onboarding and signaling). The tension is between a genuinely codified UI discipline and the recognition that its cross-domain lesson belongs to the scaffolding parent, its four-slot UI template being interface-design furniture. Diagnostic: Resolve toward scaffolding (zero-state orientation plus a first action) when the "empty state" is not a screen-based data view; toward empty state design when authoring the zero-content view of an actual UI container.
Structural–Framed Character¶
Empty state design sits at the framed pole of the structural–framed spectrum. It is not a regularity nature runs but a codified design discipline — a set of prescriptions about how a practitioner ought to author a screen — and it fails every structural test in the same direction. On evaluative weight it scores high: the entry is saturated with normative verdict ("done well," "done badly or omitted," a four-slot template one is supposed to instantiate), so calling a screen "a good empty state" or "a missing empty state" convicts or credits the design rather than neutrally naming a mechanism the way feedback does. Human-practice-bound is high in the strong sense: the concept is constituted by the practice of interface design and dissolves the instant that practice is removed — with no designer authoring intent, no user to be oriented or disengaged, and no rendering logic to be improved upon, "the zero-content view" is just a container that happens to hold nothing, with nothing to design and no activation cost to lower. Institutional origin is pronounced: the discipline is the codified furniture of a specific tradition — Google's Material Design, Apple's Human Interface Guidelines, and Nielsen Norman Group documentation — and its distinctions (empty-vs-loading-vs-error, the message/cue/CTA/sample slots) are conventions drawn inside UX practice, not substrate-neutral form. Vocab-travels scores low: the operative vocabulary — copy, illustration, CTA button, walkthrough, the populated-vs-zero-content view, the first-content exit transition — is pinned to screen-based, persistent-state applications and renames every component the moment it leaves that substrate. And on import-vs-recognize it patterns as import-by-analogy: the entry is explicit that "onboarding a new hire is empty-state design for an organization" is metaphor carrying no intervention family, not recognition of one mechanism across domains.
The portable structural skeleton is zero-state orientation: supply orientation cues and a first move at the point where a system sits at a low-information, low-engagement starting state. That skeleton genuinely travels, but it is precisely what empty state design instantiates from its umbrella scaffolding (in the starting-state specialization the entry names), not what makes "empty state design" itself portable — the cross-domain reach belongs to scaffolding, while the four-slot UI template, the message/cue/CTA/sample artifacts, the loading-vs-error-vs-empty classification, and the Material/HIG/NNG codification are user-interface-design specifics that stay home. Its character: a normatively charged, practice-constituted design discipline that is structural only in the zero-state-orientation skeleton it borrows from scaffolding and frames as an authoring prescription.
Structural Core vs. Domain Accent¶
This section decides why empty state design is a domain-specific abstraction and not a prime, by separating the thin zero-state-orientation skeleton it instantiates from the interface-design apparatus that constitutes the named discipline.
What is skeletal (could lift toward a cross-domain prime). Strip the screen away and a thin relational structure survives: when an agent first encounters a system at a low-information, low-engagement starting state, supply orientation cues that name what belongs there and why, and a prompt for the first move that carries the agent out of the zero-state. The portable pieces are abstract — a system at its starting point, an agent who needs orienting, a cue that the emptiness is intentional rather than broken, and a first-action nudge toward engagement. That structure is genuinely substrate-portable: it recurs wherever something must be helped across a zero-state — a new hire's first day, the opening minutes of a class, a kickoff meeting. Precisely because it recurs, it is carried by the parent the entry instantiates, scaffolding in its starting-state specialization (kin to onboarding and signaling). But this is the core empty state design shares, not what makes it distinctive.
What is domain-bound. Almost everything that makes the discipline empty state design in particular is user-interface furniture that does not survive extraction. The state is specifically the zero-content view of a screen-based container — an empty inbox, workspace, dashboard, feed, cart, or search result. The intervention is a fixed four-slot template built from UI artifacts: an explanatory message (copy), an intentionality cue (illustration or icon), a call-to-action (button), and an optional sample or walkthrough. The load-bearing distinction is a state classification internal to rendering logic — empty versus loading versus error — that only exists where a persistent-state application renders a data-populated view. The lifecycle is specific: the empty state is transient, replaced at the first-content exit transition. And the whole discipline is codified furniture of a tradition — Material Design, Apple's Human Interface Guidelines, Nielsen Norman Group documentation. These are the worked vocabulary, the instruments, and the empirical cases the practice actually operates. The decisive test: remove the designer, the user, and the rendering logic, and there is no empty state to design — just a container that happens to hold nothing, with no activation cost to lower and no blank to make legible. Off the screen substrate the four-slot template renames every component and loses its referents.
Why this does not clear the prime bar. A prime's vocabulary travels and its cross-domain transfer is recognition of the same mechanism, not analogy. Empty state design's transfer is bimodal. Within software UI/UX it travels intact as mechanism — inbox, kanban board, dashboard, feed, cart, and search are all the same substrate (a persistent-state, data-populated view), so the four-slot template, the missing-slot diagnostic, the empty/loading/error boundary, and the transient lifecycle port uniformly, because the components (copy, illustration, CTA) are the same UI artifacts in every case; the cross-product consistency of "no items yet — create one" is itself the signature of a mature single-substrate discipline. Beyond screen-based interfaces it travels only by metaphor: "onboarding a new hire is empty-state design for an organization" borrows the aim of zero-state orientation while a classroom intro or a kickoff meeting uses structurally different mechanisms, and no intervention family (illustration, copy, CTA, walkthrough) rides along with the phrase. And when the bare structural lesson is needed cross-domain — orient the agent and hand them a first move at a system's zero-state — it is already carried, in more general form, by the prime empty state design instantiates: scaffolding. The cross-domain reach belongs to that parent; "empty state design," as named — the four-slot template, the message/cue/CTA/sample artifacts, the state classification, the Material/HIG/NNG codification — carries interface-design baggage that should stay home, which is why it clears the domain-specific bar for UI design but not the prime bar.
Relationships to Other Abstractions¶
Current abstraction Empty State Design Domain-specific
Parents (1) — more general patterns this builds on
-
Empty State Design is part of Visibility of System Status Domain-specific
Empty State Design contains timely status visibility that identifies the view as intentionally empty rather than loading, filtered, gated, or failed.The intentionality cue and explanatory message externalize the system's hidden content-state at the moment the user must choose whether to wait, retry, change a filter, request access, or create the first item. CTA, sample, and state-exit machinery remain the design's additional cargo.
Children (1) — more specific cases that build on this
-
Empty-State Failure Domain-specific presupposes Empty State Design
Empty-State Failure presupposes the Empty State Design standard whose explanatory, disambiguating, and next-action slots are absent.The negative and positive entries concern the same view-by-zero-content design object. The failure is not a poorly executed species of successful design; it is diagnosable only relative to the authored first-class-state standard and its required cause, intentionality, and action information.
Hierarchy path (1) — routes to 1 parentless root
- Empty State Design → Visibility of System Status → Observability
Not to Be Confused With¶
- Empty-state failure. The negative of this discipline: the interface condition in which a view is correctly empty but supplies no scaffolding — no explanation, no cause disambiguation, no next action — so the user infers breakage. Empty state design is the authored, four-slot solution; empty-state failure is what ships when the discipline is skipped. Tell: is the zero-content view deliberately drawn with message, cue, and CTA (empty state design), or an unscaffolded blank the user must interpret from nothing (empty-state failure)?
- Loading state. The transient view shown while content is being fetched. It is one of the three render states an empty state must announce itself against — its job is precisely to not be mistaken for a still-loading view. Tell: is the container waiting on data in flight (loading), or legitimately holding no content with a first-populating action offered (empty state)?
- Error state. The view shown when something has actually failed — a broken load, a failed request. Empty state design claims the blank as intentional, the opposite of an error; conflating the two invites engineering fixes for a state functioning as intended. Tell: has an operation failed and needs recovery (error), or is the container correctly empty and needs orientation (empty state)?
- Placeholder / skeleton screen. A content-shaped stand-in (greyed rows, shimmer) shown during load to suggest structure. It mimics the populated layout to reduce perceived wait; the empty state does orientation work — naming what belongs and offering a first action. Tell: is the blank a temporary stand-in for imminent content (skeleton), or an authored state explaining a genuine absence (empty state)?
- Onboarding flow. The multi-step guided introduction (tours, tooltips, setup wizards) for a new user across a product. The empty state is a single view's zero-content treatment; it contributes to onboarding but is not the whole flow. Tell: is it a product-spanning guided sequence (onboarding), or one container's designed empty view (empty state design)?
- Scaffolding (the parent prime). The substrate-neutral pattern empty state design instantiates — supply orientation cues and a first move at a system's zero-state — which carries cross-domain to onboarding a hire, opening a class, a kickoff meeting. Empty state design is the screen-based instance with UI-specific artifacts. Tell: strip the copy, illustration, and CTA button and what remains is generic zero-state orientation — the parent, not this UI discipline. (Treated more fully in Structural Core vs. Domain Accent.)
Neighborhood in Abstraction Space¶
Empty State Design sits in a sparse region of the domain-specific corpus (83rd percentile for distinctiveness): few abstractions share its structure, so a faithful description tends to retrieve it precisely.
Family — Interface Legibility & Navigability (12 abstractions)
Nearest neighbors
- Empty-State Failure — 0.87
- Visibility of System Status — 0.82
- Discoverability — 0.82
- Responsive-Layout Breakage — 0.81
- Hidden Label — 0.81
Computed from structural-signature embeddings · 2026-07-12