Design Empty States That Explain What to Do Next

A practical approach

Step 1

List the reasons the current surface can be empty. Separate first use, filtering, deletion, access restrictions and request failures.

Step 2

Write one direct sentence for each situation. Use the user’s terminology and preserve useful context, such as their search phrase.

Step 3

Offer the smallest helpful action: clear filters, create a first item, retry the request or contact the relevant owner.

Worked example

A blog search for ‘vector permissions’ returns no posts. The page can show the phrase, suggest fewer keywords and provide a clear-filters control. It should not display the first-use message ‘Your blog is waiting for its first post’, because the collection already contains articles.

A mistake to avoid

Decorative artwork cannot replace a useful explanation. Also avoid making the recovery button repeat the same failed request indefinitely without exposing a persistent error.

Try it yourself

Write the empty-state copy for three versions of a resource library: no uploaded resources, no search matches and a failed server request. Check whether each proposed action can actually improve that state.

Your implementation checklist

• No data and failed loading are distinguished.
• The current query remains visible.
• Recovery actions are specific.
• Messages do not claim more than the system knows.