Empty states: the screen every app shows first
The first screen a new user sees is usually empty. How to design empty states that explain, point to the one next step, and do not look like something broke.
Every new user of your app sees the empty version first: no notes, no projects, no messages. It is the most viewed screen in the product and often the least designed, which is why so many apps greet new users with a blank white panel and a lonely button.
Three kinds, three messages
| State | What the user needs | Example |
|---|---|---|
| First use | What goes here, and how to start | No clips yet. Copy something and it appears here. |
| No results | Why nothing matched, and a way out | No clips match "invoice". Clear the search. |
| All done | Confirmation that this is good | Inbox clear. |
Reusing one generic "Nothing here" for all three is the most common mistake. A user who searched and found nothing reads a first-use message as the app forgetting their data.
The anatomy
- An icon or small illustration that matches the rest of the interface.
- One line, in plain words, saying what will appear.
- One action, if there is a natural one. Import, create, connect.
Match the platform
On the web, a friendly illustration and a large button can suit a consumer product. In a Mac app, the native pattern is quieter: a centred secondary-colour line of text in the content pane, sometimes a symbol above it, and the action in the toolbar where it always lives. A web-style empty state with a big coloured illustration is one of the quickest ways to make a desktop app feel like a web page, which we covered in a native macOS look in Tauri and Electron.
Do not fake content
Sample data can help a user understand the product, but only if it is clearly labelled as sample and easy to remove. Fake items mixed with real ones erode trust quickly.
macOS Native Dark UI gives Claude the Mac conventions these screens should follow in dark appearance: system colours with jobs, 13px text, the arrow cursor and a sidebar layout, so an empty pane looks like part of the app rather than a website inside it.
Questions
What should an empty state contain?
A short line saying what will appear here, one action that makes it appear, and, if it helps, a small illustration or icon. Nothing else.
Are there different kinds of empty state?
Yes. First use, where nothing has been created yet; no results, where a search or filter matched nothing; and cleared, where the user finished everything. Each needs different words.
Should an empty state use a big illustration?
Only if it fits the product. In a dense desktop app, a large illustration looks out of place; a quiet icon and a line of text in the system style reads as native.