Design empty states that lead to the first action

An empty state is what a screen shows when it has nothing in it yet. New users meet empty states everywhere: an empty project list, a dashboard with no data, a contact list with no contacts. Many products show a blank page or a grey “No items” message. That wastes the moment when a new user is most open to direction. A designed empty state explains the screen, shows what it will look like when full and offers one clear next action. It fits any SaaS product or app where users create or connect content.

Why it works

A blank screen gives users no signal about what to do. They have to work out the product’s model from scratch, and many decide it is not worth the effort. An empty state with a single, obvious button removes that decision. It turns “what now?” into “click here”.

Empty states also appear exactly where the user already is. Help docs and product tours ask people to stop and read. An empty state teaches in context, on the screen the user chose to open, which makes the guidance feel relevant instead of interrupting.

How to do it

1. Find every empty screen. Create a fresh test account and click through the product. Screenshot every screen that shows no content. Include lists, dashboards, reports, search results and settings pages.
2. Sort them by type. Separate first-use empty states from those caused by filters, searches or completed work. Each type needs a different message.
3. Write one line of purpose. Explain what the screen does in plain words: “Your clients appear here. Add one to start sending invoices.” Avoid jargon and feature names.
4. Show the filled version. Use a faded preview, a small screenshot or a sample row so users can picture the result.
5. Offer one primary action. Add one button that creates the first item or opens the relevant setup step. Make it the most visible element on the screen.
6. Add a shortcut for heavy users. Below the main button, offer an import option, a template or a link to connect another tool. People moving from a competitor want to bring their data.
7. Handle the other empty states. For a search with no results, suggest spelling fixes or related items. For a cleared inbox or finished task list, confirm success and suggest what to do next.
8. Measure clicks on each empty state. Track how often each empty-state button is clicked and whether those users go on to activate.

Example

A hypothetical CRM for small agencies notices many trials never add a contact. The contacts page for new users says only “No contacts”. The team redesigns it with one line (“Keep every client and lead in one place”), a faded preview of a filled contact list, a button labelled “Add your first contact” and a smaller link to import a CSV or connect Gmail. The dashboard’s empty charts get the same treatment, with a note that charts fill in once the first deal is added. After launch, more trial users add a contact on day one, and the import link turns out to be popular with agencies switching from spreadsheets.

A mobile example: a hypothetical recipe app shows an empty “Saved” tab with a short line, three popular recipes and a heart icon showing how to save one. New users learn the save gesture without a tutorial.

Metrics to track

• Empty-state click-through rate. The share of users who see an empty state and click its main button. Compare across screens to find weak ones.
• Time to first item created. How long it takes a new user to add their first project, contact or item. This should fall after a redesign.
• Activation rate. The share of new users who reach your activation action. Good empty states on key screens should move it.
• Import and template usage. How often users choose the secondary option. High use tells you many arrive with existing data.

When it backfires

• Too many choices. An empty state with five buttons recreates the confusion it was meant to solve. Keep one primary action.
• Decoration over direction. A large illustration with a joke and no button looks nice and tells users nothing.
• Wrong message for the situation. Telling a long-time user to “create your first project” after they filter a list to zero results feels broken.
• Hiding the real product. Fake preview data that looks like real content can confuse users. Make previews clearly labelled or faded.

Questions people ask

What is an empty state?

It is any screen that has no content to show yet, such as an empty project list, inbox, dashboard or search result. New users see many of them in their first session.

Should every empty state have a button?

First-use empty states should, because the user needs to create something. Empty states caused by a filter or a cleared inbox need different treatment, such as a "clear filters" link or a short confirmation that everything is done.

Can I use illustrations?

Yes, if they help explain the screen or show the end result. A preview of a filled screen usually teaches more than a decorative picture.