Empty State Design: Examples, Best Practices and Copy That Helps Users

Empty states are the screens nobody designs until the end, and every new user sees first. A new account is mostly empty states. Search with no results is an empty state. A finished to-do list is an empty state. Designed well, they explain the product and guide the next action. Designed badly, they look broken.

The four types of empty state

1. First use. Nothing has been created yet. This is onboarding in disguise. Explain what goes here, and give one clear way to add the first item, or show sample content.

2. No results. A search or filter returned nothing. Say what was searched, suggest alternatives, and offer to clear filters. Never show a blank list.

3. User cleared. The user finished their tasks or emptied a folder. Confirm the success. A little warmth is welcome here.

4. Error or unavailable. Content could not load, or the user has no permission. Say what happened, whether it is temporary, and what to do.

What a good empty state contains

• A heading that names the situation: "No references yet", "No results for 'pricing toggle'".
• One sentence of explanation: what will appear here, or why it is empty.
• One primary action: Create, Import, Clear filters, Retry.
• Optional: a light illustration or icon, a secondary help link, or sample content.

Copy examples

• First use: "No collections yet. Group references by project or client. New collection"
• No results: "Nothing matched 'dark pricing toggle'. Try fewer words or describe it differently. Clear search"
• Filters: "No references match these filters. Clear filters"
• Cleared: "All caught up. New items will show up here."
• Error: "We couldn't load your library. Check your connection and try again. Retry"

Write in plain words, say what the user can do, and avoid blaming them.

Common mistakes

• Blank screens. An empty table with headers and nothing else looks like a bug.
• No action. Explaining without a button leaves users stuck.
• Too many actions. Three equal buttons create a decision instead of guidance.
• Huge illustrations in dense tools. They push the action down and feel out of place.
• The same message for every case. "No data" means something different on first use and after a search.

Empty states in onboarding

First-use empty states do much of the work of onboarding. Combined with a short checklist and helpful defaults, they guide new users without a tour. See onboarding UX best practices.

A checklist for every screen

• What does this screen show with zero items?
• With zero search results?
• With filters that exclude everything?
• When loading fails?
• Is there always one clear next action?

Where to find good examples

Empty states are a great thing to collect, because each product handles them differently and many handle them badly. Capture them when you meet them in products you use and in real-product libraries such as Mobbin and Refero; see the best Mobbin alternatives. Save each with a note on which type it is and what it does well. In GetRef, the copy inside each screenshot is searchable, so you can search "no results" and see every example you have saved. See also UI design patterns.