Empty States

They cannot tell whether the product is broken, still loading, or waiting on something they were meant to do. So they open a support chat and ask whether the account works, and support answers that question for the fourth time that week. Two of the people who wrote in that month cancelled before anybody replied.

Nothing had gone wrong. There was no data because they had not connected anything yet, and the screen never said so.

This screen ships blank more often than any other, for one structural reason. It only appears when there is no content, which is exactly the state nobody is looking at while they design. So it gets whatever the component library says by default.

Types of Empty States

Three people are looking at the same blank panel.

The first signed up this morning and has no idea what belongs here. The second just cleared their last task and feels good about it. The third searched for a customer name, found nothing, and is starting to wonder whether the product lost their data.

All three see the same sentence: No items to display. It is accurate for all of them and useful to none, because it answers a question none of them asked. So the work starts by naming which kind of empty you are in.

Nothing yet, Because They Are New

There is no data because this person has not made any.

This is the highest-value empty state in any product, because it is doing onboarding whether you designed it to or not. Nobody here is frustrated. They are uncertain, and the question in their head is what this is and what they do now.

So orient them, then start them. Say what belongs here, show what a filled version looks like, and give one way to make the first thing. Notion opens a new page onto a template gallery rather than a blank sheet, and Trello puts an Add a list prompt where the first list will go. A ghosted row or a sample chart does more work than a paragraph, because it sets expectations about scale that a sentence cannot.

Nothing Left, Because They Finished

They had content and dealt with it. The inbox is at zero, every task is done, the queue is clear.

That is an achievement, and the screen should read like one. Gmail answers an emptied inbox with You're all caught up and an illustration, which is the whole pattern in one line. The common mistake is treating it as a void, so somebody who just cleared forty messages meets a grey line reading No messages, which lands like something went missing.

So acknowledge it and stop. This is the one case that often needs no action at all, and a button here invents work for a person who has just cleared their own.

Nothing Found, Because They Looked

They searched or filtered, and the result is nothing.

This one carries frustration, because they were after something specific and hit a wall. The job is recovery rather than encouragement, and an invitation to create their first item reads as a joke to somebody who knows the thing exists.

So confirm what they searched for, say what might fix it, and give a route onward: broader terms, fewer filters, a way back to browsing. Search UX covers this state in full.

Read the Cause, Then Answer It

The through-line is that the words follow from why the screen is empty.

New and empty means orient and start them. Finished and empty means acknowledge and leave them alone. Searched and empty means explain and recover. Those are three different jobs, and a screen doing one of them well will do the other two badly.

Pro tip: Walk your own product twice, once with a brand new account and once with a filter that matches nothing. Those two passes surface almost every empty state you own, and they take about ten minutes between them.