Start with the reason the screen is empty
An empty state is what someone sees when an area that normally contains content has nothing to show. A new project workspace, a search with no matches, and an inbox with no messages may look similar at first glance. They call for different responses, though. Before designing the screen, identify why it is empty and what the person is likely trying to do.
A first-use empty state should help someone begin. A cleared inbox might simply confirm that there is nothing requiring attention. A search with no results should help someone adjust the query or filters. If content has failed to load, treat that as a problem to explain and recover from, not as an ordinary empty state. This distinction prevents a cheerful “Nothing here yet” message from concealing a task the person cannot complete.
Give the screen one clear job
Write down the main action a person should take after seeing the empty area. In a project workspace, that might be creating a project. In a saved-items view, it might be browsing items to save. If the empty screen represents a completed task, the best response may be no action at all. A short confirmation can be more helpful than a button that sends someone somewhere unrelated.
Keep the primary action close to the explanation and name it for what it does. “Create a project” is clearer than “Get started” when that is the actual next step. If there is a useful secondary route, such as importing existing work, include it without giving it equal visual weight. Too many options can turn a simple moment of guidance into another decision to solve.
Write copy that explains, then guides
A useful empty-state message usually answers two questions: What is happening here, and what can I do next? A heading such as “No projects yet” establishes the situation. A supporting sentence can explain what will appear in this space once a project exists. The action label can then tell the person how to begin. You do not need a long introduction if the surrounding interface already provides context.
Match the wording to the cause. For an unsuccessful search, “No matches for this search” is more precise than “Your list is empty.” Suggest a change the person can make, such as checking the spelling or removing a filter, but only if that option is available. Avoid wording that blames the person for an outcome the interface may have contributed to. Also avoid promising that content will appear later unless the product can reasonably make that promise.
Use visuals to support the message
An illustration or icon can make an empty area feel intentional, but it should not carry essential instructions on its own. The text and action need to remain understandable without the image. Choose a visual that fits the situation rather than adding decoration simply to fill space. A celebratory image may suit a completed task; it may feel misplaced when a search has failed.
Consider the space available on different screens. A large illustration that looks balanced on a wide layout can push the action out of view on a narrow one. Check the empty state within the actual page, including its navigation, headings, and controls. The message should be easy to notice without overpowering the rest of the interface.
Check the transition in and out
An empty state is one point in a larger flow. Check what happens immediately before it appears and after someone uses its action. If a person removes the last saved item, will the resulting message make sense? If they create their first project, does the new content appear where the empty state was? These transitions reveal confusing copy and dead-end buttons that a static mockup can hide.
Test a few realistic variations before finishing: a new account, an unsuccessful search, a cleared list, and a temporary loading problem if the interface can encounter one. Check that each has an accurate message and an appropriate next step. A well-designed empty state does not need to entertain people. It should make the situation understandable and help them continue when there is somewhere useful to go.
