Empty state UI examples: 7 patterns that turn blank screens into activation

July 27, 2026 · 8 min read

1. Name what belongs here

The weakest empty state says “No items.” The strongest tells the user exactly what this screen will hold once they act: “Your logged symptoms will show up here” beats a blank card every time. In a tracker like Bearable, the content areas exist to be filled daily, so the zero state has to teach the loop before the data exists. Study the home and tracking screens in the home gallery and you will see the pattern: describe the future contents, not the current absence.

2. One primary action, nothing else

A first-run empty state should offer exactly one obvious next step. Two competing buttons split attention; zero buttons strand the user. The job is to make the first action unmissable, an “Add your first entry” that sits where the content will eventually be. When you browse the content management screens across the library, the apps that activate well almost always resolve their empty list into a single primary call to action.

3. Preview the populated screen

Instead of an empty container, some apps render a faded or sample version of what a filled screen looks like, so the user can see the payoff before doing the work. A ghosted example entry or a dimmed chart communicates value faster than any illustration. It answers the user’s real question, what will I get if I fill this in, with a picture instead of a promise.

4. Design the no-results state separately

A search or discovery screen with no matches is a different animal from a first-run empty state, and it deserves its own design. The rules: keep the query visible, never blame the user, and always offer an escape such as clearing filters or browsing everything. Apps with rich browse surfaces like Find Me Gluten Free live and die on their discovery flow, and you can compare how apps handle sparse results in the discovery and search gallery.

5. Make the cleared state feel like a reward

When a user empties a list on purpose, inbox zero, all tasks done, the empty state should celebrate rather than look broken. A checkmark and a “You’re all caught up” message turns absence into accomplishment. The distinction matters: a first-run zero state motivates action, a cleared state rewards it, and using the same generic blank for both wastes the better moment.

6. Keep errors honest and recoverable

Failed loads and offline states are empty states too, and they are where trust is won or lost. The reliable pattern is a plain description of what went wrong, no jargon, plus a retry control and, where possible, any cached content so the screen is not fully dead. An error state that only says “Something went wrong” with no way forward is the worst blank screen in the app.

7. Match the empty state to your brand voice

Empty states are one of the few places where a little personality reads as care rather than noise. A tracker can be warm, a finance app should stay calm and precise, a game can be playful. The tone should match the rest of the product, which is easiest to judge when you see the empty screen next to the onboarding and home flow it belongs to, exactly how the library presents each app.

How to use these patterns

Audit every screen in your app that can be empty, then sort each into first-run, cleared, or no-results, because they need different copy and different actions. The empty state is continuous with onboarding, not separate from it; if you have designed your onboarding flow but left the first real screen blank, you have handed the user off at the worst possible moment. Browse how real apps solve it in the library and copy the structure, not the illustration.

A note on the numbers: revenue and download figures across the library are third-party estimates, useful for comparing magnitude, not audited financials.

Frequently asked questions