Design Empty States

Write copy, add a single CTA, and use illustration or iconography to transform blank screens into helpful prompts that keep users oriented and moving forward.

Why This Is Best Practice

Adopted by: Google Material Design, Apple Human Interface Guidelines, IBM Carbon, Shopify Polaris, and Atlassian Design System all provide explicit empty state guidelines and components; Intercom, Slack, and Notion have each published case studies on how improved empty states increased feature activation rates Impact: NNG (2016) identifies empty states as among the top causes of user abandonment on first use — a blank screen with no context leaves users unsure whether the product is broken, the feature is loading, or action is required; Intercom reported a 17% increase in feature adoption after redesigning first-use empty states with action-oriented copy and a single CTA; Slack attributes part of its onboarding success to empty-state design that guides users to their first message Why best: A blank screen is an implicit error state — it gives users no information about what to do next; a loading spinner without completion feedback is equivalent; empty state design fills the information vacuum with the exact content users need at the moment of uncertainty

Sources: NNG "Empty States in Mobile UX" (Laubheimer, 2016); Google Material Design "Empty states" (material.io); Kleppmann "Designing for Empty States" (Intercom Design, 2017)

Steps

1. Classify the empty state type

Different types require different content: