Product UI/Category

๐Ÿคทโ€โ™€๏ธ Empty State

Turn dead ends into opportunities with creative SaaS Empty State designs. Discover how to use illustrations, 'Get Started' CTAs, and helpful tips to guide users when they haven't added data or encountered an empty results page.

SaaSFrame Pro

Unlock 111 more Empty State examples

Free accounts see three examples per page. Pro unlocks all 114, plus every flow, filter and Copy in Figma.

Index of all 114 Empty State examples
Guide ยท 5 min read

๐Ÿคทโ€โ™€๏ธ Empty State: design guide

A SaaS empty state explains why a normally populated area has no content and helps users take the appropriate next action. It may appear in a new account, a filtered search, a quiet activity log, or a collection where every item was removed. Those situations should not share one generic illustration and button.

The SaaSFrame references show application setup, date-scoped logs, and an empty card inventory. They demonstrate how the reason for absence determines the message. An empty state is useful when it is truthful about the product state, not merely attractive.

Identify the reason for absence

No records yet, no matching records, and unavailable data are different conditions. The interface should establish which one the system can confirm. A failed request should not become a cheerful empty collection.

Keep the relevant scope visible. A log with no events in the last seven days may contain older activity. A workspace with no objects may be different from an account with no access to them.

Use the reason to choose the action. Create an object for a new collection, revise criteria for no matches, or recover a connection for unavailable data. The button should follow the state rather than a default commercial objective.

Turn a first-use state into a meaningful beginning

Evervault Create app design reference captured in SaaSFrame
Evervault Create app. View the SaaSFrame reference.

The Evervault application capture explains that an app must be created before resources can be provisioned. It presents a create-app action within the Apps area and keeps the surrounding team context visible.

This connects absence to a dependency. Users can understand why the area is empty and what the first object enables. The explanation is more useful than simply saying there is nothing here.

When adapting the structure, make the first action concrete. Creating an object should lead to a valid next state, and any further setup should be explained rather than hidden behind the initial creation success.

Distinguish filters from an empty account

Evervault Empty activity log design reference captured in SaaSFrame
Evervault Empty activity log. View the SaaSFrame reference.

The Evervault activity-log capture retains search and a last-seven-days selector. Its message says no logs were found for that period and suggests choosing a different one.

This correctly connects the absence to a visible time scope. The user does not need to create a new object to solve a search boundary. Keeping the controls available supports the relevant recovery.

Use similarly specific language for other filters. If several criteria are active, show them and provide an understandable clear or broaden action. Do not erase the query before users can inspect why it produced no matches.

Keep object creation tied to the inventory

Lightspark Cards Empty State design reference captured in SaaSFrame
Lightspark Cards Empty State. View the SaaSFrame reference.

The Lightspark card capture identifies an empty card collection and offers an issue-card route within a sandbox account. The message connects the first card to a cardholder.

This establishes both object type and account context. The action is a specific beginning, not a generic get-started button. The sandbox label also prevents the shown inventory from being mistaken for a live account example.

When adapting a creation route, identify any prerequisite. If users need an existing cardholder, project, or administrator permission, explain it before sending them into a blocked form.

Preserve the surrounding product structure

An empty state should not remove the navigation and controls users need to understand the area. Search, filters, view choices, and relevant settings can remain useful even when there are no rows.

Keep the visual hierarchy proportionate. A large illustration may be appropriate in a new collection but excessive in a small filtered panel. The explanation and action should remain easy to find.

Use the same section identity as the populated state where practical. Users should recognize that they are still in the same product area, rather than feel redirected into a separate onboarding page.

Use sample content deliberately

Samples can demonstrate the kind of objects a collection will contain. They can also blur the boundary between user data and product examples. Label them clearly and explain whether they can be edited or removed.

Do not fill an empty area with realistic records merely to avoid blank space. Users may interpret them as their own account activity. The demonstration should serve learning without compromising trust.

If a template creates real objects, explain that commitment. Previewing a template and adding it to the workspace are different stages.

Make permission-limited states honest

A person may see no records because their role lacks access. Do not claim the workspace contains nothing when the system is only withholding content from that viewer.

Explain the relevant restriction without exposing confidential object names. Provide an appropriate administrator or access-request route where supported. A creation button should not be offered as the solution if the person cannot create the object.

Keep this state distinct from ordinary zero content. The user needs to understand whether they can proceed independently or need someone with different permissions.

Account for cleared and completed collections

A collection can become empty after deletion, archiving, or completion. The resulting message should fit that history. A new-user onboarding prompt can feel misplaced after a person finishes a queue.

For work queues, an empty state may communicate that no action is currently needed. A next recommendation can be useful, but it should not invent urgency merely to fill the screen.

Where accidental removal is possible, provide recovery according to the product's actual behavior. Do not show undo if the operation cannot be reversed, and do not hide a useful recently deleted route.

Separate loading from confirmed emptiness

Wait until the relevant data state is known before presenting an empty result. A brief empty message that flashes during every refresh can make users question whether their records disappeared.

If old content remains while refreshing, communicate the update. If a request fails, show the error or unavailable state rather than replacing the area with a zero-content explanation.

Partial data also needs careful wording. A source that is unavailable cannot support an account-wide claim that nothing exists. Identify the scope the system can confirm.

Keep the route forward accessible

Use meaningful text, visible focus, and clear action labels. Important state information should not depend only on an illustration or color. A no-results explanation needs the same accessibility as a form error.

On small screens, preserve relevant filters and the next action. Avoid oversized artwork pushing the corrective controls far below the message.

If the action opens a modal or navigates to setup, preserve the collection context on return. A user should be able to recognize the result of the first successful action.

Test the states separately

Test a new account, a date-filtered log, a no-match search, a restricted viewer, a completed queue, and a failed request. Confirm that each produces the correct explanation and action.

Ask users why the area is empty and what they should do next. Their answers reveal whether the message is specific enough to support recovery.

Measure successful continuation rather than clicks on the empty-state button alone. A high click rate can conceal a route that leads to missing prerequisites or another empty screen.

Frequently asked questions about empty states

Should all empty states have a creation button?

No. The correct action depends on the reason for absence. A filtered result may need broader criteria, while a completed queue may need no action.

Is an empty state an error?

Sometimes absence is normal. Loading failure and unavailable data are different conditions and should be labeled separately.

Should sample records fill a new account?

Only when they support learning and are unmistakably examples. Do not let them appear to be real account data.