An empty state should explain why the space has no content and offer the next action that fits that cause. First use, zero search results, missing access, and failed loading require different messages. Determine the state first; then write the title, explanation, and action.
The same blank panel can mean different things
Imagine a project dashboard that displays “No projects” whenever its list is empty. A new workspace owner needs to create a first project. A returning member may have selected an overly narrow filter. Another person may lack access. A network failure may mean the system has not loaded any evidence at all. One message cannot describe all four correctly.
This worked redesign follows that dashboard from first use to recovery. The output is a set of copy and behavior specifications that a designer and engineer can implement together. An illustration can make an empty panel more approachable, but it cannot determine which state the application is actually in.
IBM Carbon’s public empty-state pattern provides useful real examples: a title explains the situation, supporting text points to a relevant next action, and imagery is optional. Its distinction between no-data, user-action, and error-management states is more transferable than copying an attractive drawing.
Choose the state from evidence
Do not derive “no projects exist” from an empty array while a request is pending. Wait for a successful response and use the correct scope. Zero projects visible to this member does not establish that the entire workspace is empty.
For the worked dashboard, a successful authorized response supplies the displayed records, active filters, and whether the user can create a project. The product does not expose hidden project counts to unauthorized members. A failed request has its own error state; loading has its own pending state. Use “your first project” only when the service has reliable first-use evidence for the stated scope; otherwise use the neutral “Create a project.”
The priority matters. If access is denied, clearing filters will not fix it. If loading fails, creating a new project is not a sensible recovery action. The table gives the state conditions before the copy, so the design cannot quietly turn unknown data into a confident claim.
| State | Evidence required | Useful next action |
|---|---|---|
| No visible projects; creation allowed | Successful unfiltered response; no visible projects; user can create | Create project |
| No accessible projects | Successful response; nothing visible; user cannot create | Explain how to obtain access |
| No matching results | Successful filtered response returns zero matches | Adjust or clear filters |
| Loading | Request still pending | Show progress without claiming emptiness |
| Load failure | Request failed; content unknown | Retry the read request |
| Everything completed | Successful task response shows no remaining tasks | Confirm completion; offer completed items if useful |
Write copy that explains the next move
The old “No data found” panel provides neither a cause nor a path forward. Replace it with copy specific to the task. For a creator, explain what a project will contain; for a filtered list, preserve the query and make it editable.
The action label should name the operation. “Get started” is less informative than “Create project,” especially when the page already contains other links. Keep secondary help quieter than the action that changes the state.
The following copy assumes the described behavior exists. “Request access” needs a real request route and a recipient; otherwise use an accurate contact instruction. “Your changes are saved” is appropriate only when persistence has been confirmed.
| Condition | Title and supporting copy | Action |
|---|---|---|
| Creator with no visible projects | Create a project. Keep the brief, tasks, and files for one piece of work together. | Create project |
| Filter: owner Maya; status Active | No projects match these filters. Try another owner or include completed projects. | Clear filters |
| No accessible records | No projects are available to you here. Ask the workspace owner to add you to a project. | View workspace contact |
| Read request failed | Projects could not load. Try loading this list again. | Retry |
| All assigned tasks completed | You have no remaining tasks. Completed work is still available in your history. | View completed tasks |
Design what happens after the button
Creating a project should open the project form, not a generic marketing tour. When the person cancels, return them to the same dashboard. When creation succeeds, show the new project and place focus or navigation predictably. If creation fails, retain their input and explain the error within that flow.
Clearing filters should remove the active constraints and refresh the list. If the unfiltered result is also empty, switch to the appropriate no-project state. Do not keep saying “no matches” after the query no longer exists.
For a retry, maintain the page context and show that loading is in progress. If the request fails again, keep the recovery action available. When previously loaded content remains visible, distinguish it as potentially stale rather than replacing it with a misleading first-use illustration.
| Action | Transition | Acceptance check |
|---|---|---|
| Create project | Empty → form → successful project | New project appears once; cancelled form returns to the dashboard |
| Clear filters | No matches → loading → results or no-visible-projects state | All displayed filter chips clear; copy matches the new response |
| Retry | Failure → loading → results or failure | No duplicate write occurs; read status is understandable |
| View workspace contact | No access → authorized contact information | No inaccessible project names or counts leak |
| View completed tasks | Completion → completed list | The action shows completed items, not the original empty view |
Use illustration and layout with a purpose
Carbon’s examples demonstrate that a compact panel can work with text and an action alone. Its guidance also considers smaller tiles and side panels, where large artwork can overwhelm the useful content. Apply that idea to the dashboard: keep the title, explanation, and button together where the project list would normally appear.
Use an illustration only when it contributes orientation or recognition. A folder illustration can support a first-project state; the same celebratory artwork would be inappropriate for a failed load. Avoid placing several equal primary buttons in adjacent empty cards, which makes the next step harder to choose.
On a narrow screen, the action should remain near its explanation. Check long project terms, text zoom, and translated copy if supported. Treat purely decorative images as decorative for assistive technology; the meaningful state and available action must remain in text.
Test state changes, not just screenshots
Prepare fixtures for each state and walk the transitions. A screenshot of an attractive zero-state cannot show whether the panel flashes incorrectly during loading, loses filters after retry, or sends a read-only member to an unusable creation form.
Observe a first-time user creating one project and a returning user recovering from zero search results. Ask what they think the page means before they act. If they interpret a filtered result as deleted data, the design still has a problem even when the button works.
Keep a compact specification with state condition, title, explanation, action, destination, and expected next state. That record prevents designers and engineers from using “empty state” as a catch-all for missing information.
| Fixture | What to verify |
|---|---|
| Slow initial response | Loading appears; no-project copy does not flash prematurely |
| Creator with zero records | Create action is available and completes the intended flow |
| Read-only member with zero records | No unusable create action; access guidance is accurate |
| Zero filtered results | Filters remain visible and can be cleared |
| Network failure then recovery | Retry preserves context and updates the state after success |
| Keyboard and text zoom | Action is reachable, focus visible, and message readable without clipped text |