How to design the "empty state" in the SaaS backend? Pages without data are actually the ones that need design the most

True empty state design is not about placing an illustration in the blank space, but rather accurately explaining why there is no content, what users can do next, and providing different paths based on first-time use, no search results, and system errors.

01 Why is an empty state more challenging for product capabilities than a "page with data"

The easiest way to present a design draft is in an ideal state: the chart has curves, the list has ten pieces of data, the avatar and tag lengths are just right, and all modules are filled up. But when real users first enter SaaS products, what they often encounter is precisely a blank: no projects, no customers, no data, and no automated rules.

In the updated Empty State pattern of IBM Carbon Design System in 2026, "Empty State" is defined as the moment when there is no data to display in an application, and it is explicitly pointed out that this not only occurs during the first use, but may also result from data deletion, unavailability, or system errors. This definition is very important because "no content on the screen" is merely a visual outcome, and the underlying reasons are completely different.

02 The biggest problem with "No Data yet" is that the user is not informed of the next step

Suppose a user enters the "Projects" page for the first time and only sees "No Projects for Now". The system is not wrong, but users still have to guess: Where was it created? What is a project? Do we need to invite members first? What can be done after creation?

Carbon's suggestion for the basic empty state is: briefly describe the current situation in the title, explain what will occur here in the future in the main text, and give a clear next step. If there are executable actions, the main buttons or links can be provided directly. The actual copy would be: "The project has not been created yet." After creating the first project, you can manage tasks and members uniformly here. Only one "Create Project" is placed below. This can drive users to get started more effectively than a large illustration.

03 First, type the empty state; otherwise, the design will definitely be distorted

Common empty states at least include: no data for the first use; There were no results after screening. No content found; The user voluntarily deletes the last piece of data. The current account has no permissions. The data exists but has failed to load temporarily. There were no anomalies in the business to begin with, such as "No alert currently".

These states all seem "empty", but the user tasks are completely different. If there are no search results, it is recommended to change the keywords or relax the screening. If the permissions are insufficient, it should be specified what permissions are needed and who to contact. A retry should be provided when an interface fails. "No alerts" is actually a good state; there's no need to force users to take action. Only by first distinguishing the causes can the empty state truly help users.

04 First use scenario: Prioritize helping users complete their first real task

Many complex SaaS services like to play a five-or six-step product guide during the first login, but users often click "Next" all the way without truly establishing operational memory. The empty state itself is a natural situational guidance.

For example, when the CRM customer list is empty, you can provide "manually add customers" as the active action and "Import from Excel" as the secondary action. If the product is complex, starter content can be further provided to allow users to explore with sample data first. Carbon also regards introductory instructions, Onboarding, and pre-installed content as supplementary solutions for more complex first-time usage scenarios. Their common goal is not to showcase functions, but to shorten the distance from "empty" to "first success" for users.

05 Do not insert five entries in an empty state

When the team finds that users don't know what to do, a common reaction is to put all possible actions out: "Create, import, connect to API, view tutorials, invite members, contact customer service." The result page has become complicated again.

Carbon's advice is very clear: If a user has multiple possible actions, they should still choose the most important one as the focus. Other actions can be used as secondary links or placed in subsequent paths. The reason why the empty state is effective is precisely because it temporarily has no data noise and is a good opportunity to establish clear priorities.

06 Illustrations are acceptable, but they should be the last element to be considered

Empty state illustrations can alleviate the sense of blankness and add personality to a brand, but they are not the core message. Especially in high-frequency enterprise software, users may encounter many empty lists every day. If large illustrations occupying half of the screen appear every time, it will significantly reduce efficiency.

More importantly, if illustrations only serve a decorative purpose, key information should not be drawn in the pictures. Carbon's accessibility guidelines also point out that decorative empty state illustrations should be ignored by screen readers, and the information needs to be clearly expressed through text and actionable controls.

07 For an error-type empty state, explain "why can't it be seen" and provide a recovery path

When the system has data but cannot display it due to network, permission, dependent services or other reasons, it is still not allowed to write "No data available for now". This will make users mistakenly believe that the business really has no records.

An error-type empty state should at least answer: What happened, whether it affected the data itself, whether the user can retry, and where to go if the problem cannot be solved. For important business, it is also necessary to distinguish between "data not loaded" and "data is 0". A vague blank page can easily lead users to make wrong judgments.

08 Search and filter have no results. Help the user revoke the condition

Searching for "a certain customer" yields no results, which is completely different from the fact that the system has never had any customers. At this point, the most effective action is usually not "adding new customers", but checking the spelling, clearing the search or removing the filter conditions.

If the product supports multi-condition filtering, the current condition can be directly displayed in the empty state, and "one-click clear filtering" is provided. This type of design may seem small, but it can significantly reduce the cost for users to repeatedly return to the filter to locate the problem in a complex background.

09 The empty state copy should be like a product assistant, not like a database return value

"No relevant records for now", "No data in the current module", and "No corresponding results found" all look very much like system logs. Better copywriting should directly state the target and action: "The contract has not been created yet." After adding a new contract, you can check the approval and expiration status here.

Product copywriting doesn't need to be deliberately cute, especially in financial, medical, and enterprise management software. Being clear, specific and actionable is more important than any personified expression.

10 Conclusion: The criterion for empty state design is whether the user still needs to guess

The Empty state is not a problem that can be solved throughout the entire site with just one "Empty Component". Components can unify the visual structure, but different reasons must have different contents and actions.

A truly mature product not only designs the interface when "everything is normal", but also designs the states when it is used for the first time, there are no results, insufficient permissions, system failure and business zero. Even when users are faced with a blank SLATE, they should know what is happening now and whether they need to do something next.

Frequently Asked Questions

Must there be illustrations in an empty state?

No need. Illustration is an optional visual element. High-frequency work pages are often sufficient with clear titles, descriptions and main actions.

Can "No data yet" and "No search results" be used interchangeably?

Not recommended. The reasons for the two are different from the next step. If there are no search results, usually the action of modifying keywords or clearing the filter should be provided.

Can multiple CTAs be placed in an empty state?

Secondary actions are allowed, but a primary action should be clearly defined. Too many choices will weaken the most important guiding value of the empty state.

Is it considered an empty state even if there is no abnormal data?

It's okay, but it might be a positive state. For example, "No alarm currently" does not require forcing the user to perform an action; it only needs to be clearly confirmed.

Does the empty state need to be added to the design system?

It is suggested that the structure, style, illustration norms and accessibility rules be componentized, but the specific copy and actions should still be designed separately according to the business scenarios.