Design Principle
An empty state is not illustration filler; it is the first step into the workflow.
Principle
An empty state is not illustration filler; it is the first step into the workflow.
Design action
Preserve the real list or panel structure; provide a reason, one primary action, and one secondary action or learning link, avoiding pure decorative art.
Examples
Positive example: Projects, resources, search results, notifications, or dashboards are empty. Counterexample: Only 'No data' is shown.
Apply when
Projects, resources, search results, notifications, or dashboards are empty. Users need to judge state, scope, risk, or next action quickly.
Source notes
Source note: Synthesized from Apple HIG, Material Design, NN/g usability principles, and layout/hierarchy practices in mature design systems. Apple HIG Layout: https://developer.apple.com/design/human-interface-guidelines/layout Material Design Layout: https://m3.material.io/foundations/layout/applying-layout NN/g Visual Design Principles: https://www.nngroup.com/articles/principles-visual-design/
Agent Directive
Preserve the real list or panel structure; provide a reason, one primary action, and one secondary action or learning link, avoiding pure decorative art.