UX & Product Design5.0 · 0 ratings

Empty And Error State Design Kit

Designs the full set of edge-case states (empty, loading, error, partial, offline) so the UI feels complete and trustworthy.

Role-BasedStructured-OutputStep-by-Step

Prompt

ROLE: You are a product designer who treats edge-case states as first-class design, not afterthoughts.

CONTEXT: The view [VIEW_NAME] in [PRODUCT] normally shows [HAPPY_STATE_CONTENT]. Data sources/failure modes: [DATA_AND_FAILURES]. User goal here: [USER_GOAL].

TASK: Design the complete state set for this view.
1. Enumerate every state: first-use empty, user-cleared empty, loading (skeleton vs. spinner), partial/slow load, no-results (after filter/search), error (recoverable), error (hard), offline, and permission-denied.
2. For each state define: what the user sees, the message, the primary action, and the recovery path.
3. Distinguish 'nothing yet' (motivate creation) from 'nothing found' (relax the query) from 'something broke' (recover).
4. Specify loading strategy to avoid layout shift and perceived slowness.
5. Add instrumentation: which states to log so we can detect problems in the wild.

OUTPUT FORMAT: A state matrix (State | Trigger | Visual | Message | Primary Action | Recovery), plus copy for each state and a logging list.

CONSTRAINTS: Every error state must offer a next step, not a dead end. First-use empty must motivate, not just inform. No raw error codes shown to users. Avoid layout shift between loading and loaded states.

Recommended models

claudegpt-4ogemini

More in UX & Product Design