An empty screen is often the first thing a new user sees. It should say why it is empty and what to do next. Test each list, feed or data screen in your app with these states.
The checklist
- First use, brand-new account. - Why: this is the very first impression after sign-up. - How to check: create a fresh account and open every main tab. Each shows an explanation and a next step, not a blank area.
- A clear next action. - Why: "Nothing here" without a button is a dead end. - How to check: each empty state has one obvious action (add, import, browse) and it works.
- No results from search. - Why: the user must tell "no match" from "broken". - How to check: search for a nonsense string. The screen names the query and suggests a change, such as checking spelling or clearing filters.
- Filtered-out results. - Why: users forget filters are on and think data is gone. - How to check: set filters that match nothing. The screen says filters are active and offers "clear filters".
- Everything deleted. - Why: the last item removed must not leave a broken list. - How to check: delete every item one by one. The empty state appears, with no stale header, count or leftover row.
- Counts and badges at zero. - Why: "0 items" next to a populated-looking layout confuses. - How to check: with no data, check tab badges, totals and summary cards. They read zero or hide, consistently.
- Empty state vs loading vs error. - Why: showing "empty" while data is still loading, or after a failed load, misleads. - How to check: slow the network and fail a request. Empty appears only after a successful load with zero items. See the error states checklist.
- Permission-dependent emptiness. - Why: an empty photo list may just mean access was denied. - How to check: deny the permission. The screen explains that and links to settings rather than saying "no photos".
- Content appears when data arrives. - Why: the screen can get stuck showing the empty state. - How to check: from the empty state, add or sync an item. The list updates without a restart.
- Layout and visuals.
- Why: oversized illustrations push the action off-screen on small devices.
- How to check: view empty states on a small phone, a large phone, landscape and with large text. The action stays visible.
- Wording and language.
- Why: sad or blaming text feels off, and untranslated strings are common here.
- How to check: read every empty state in each supported language.
- Accessibility.
- Why: decorative art must not hide the message.
- How to check: with a screen reader, the text and action are read in a sensible order and the image is skipped or described.
Related
Back to all checklists · Loading states checklist · Search and filter checklist
New users meet your empty screens first. Start here to see them through someone else's eyes: private, structured feedback, 1 feedback = 1 credit.