Briefle words · UI design
Empty state
What a screen shows when there is no content yet, designed on purpose to explain why and suggest a next step.
Say it to an AI
Files tab of a brand-new project, so design the first-run experience as a proper empty state with no table headers: a centered icon, the heading 'No files in this project yet', one line of microcopy on why files belong here, and a single 'Upload files' call to action with a drag-and-drop hint.
How an expert would brief the stronger version of “Project files”.
See it
Try it as a puzzle →Files tab of a brand-new client project in an agency workspace.
Why: A replaces the file table with an icon, heading and explanation; B shows the table headers with nothing underneath.
More ways experts use it
Spec the Order history screen as a state table: loading, empty, error and success, plus pagination past 20 orders. For each state give the trigger and exactly what the user sees, including the empty state's call to action and the error state's recovery.
Order history spec · Product & specs
Related words
Room 1 · Essentials
Learn “Empty state” in a five-minute lesson