Product & Design

Empty States Are Not Edge Cases

Every user sees the empty state before they see the full one. Designing the zero-data, error and loading screens that decide whether people continue.

Purushottam Kumar Suman
Purushottam Kumar Suman
Founder & CEO, Drema AI
7 min read
Notebook with hand-drawn interface wireframes beside a phone

Design files show the product full of data. Every user experiences it empty first, and a meaningful number never get past that. The states omitted from the design are the ones a developer invents under deadline, which is why they are so often the weakest part of a product.

01

Five states, not one

Every view that loads data has at least five: empty because it is new, empty because a filter matched nothing, loading, error, and populated. Only the last is usually designed. The other four are where users get stuck, and they cost minutes to specify at design time versus hours to retrofit.

Every screen has five states. Design files usually contain one.

02

Empty-because-new is an opportunity

This state has the user's full attention and no competing content. It should explain what belongs here, show what it looks like when populated, and offer one obvious action. A blank area with 'No items' wastes the single best teaching moment in the product.

New and emptyExplain, illustrate, offer one action
Filtered to nothingSay which filter, offer to clear it
LoadingSkeletons that match the eventual layout
ErrorWhat happened, and what to do now
03

Filtered-empty is a different screen

Showing the new-user empty state when a search returned nothing is disorienting — the user knows there is data. This state should confirm the filter, show the count it excluded, and offer a single click to clear it. Conflating the two is one of the most common product bugs we see.

04

Skeletons over spinners

A spinner communicates only that something is happening. A skeleton matching the eventual layout communicates what is coming and makes the wait feel shorter, because the page stops shifting when content arrives. It also prevents the layout jump that makes people mis-click.

05

Errors need a next action

'Something went wrong' tells the user nothing and offers no recovery. State what failed, whether it is worth retrying, whether their work was saved, and give a route forward. Keep a reference identifier visible so support can find the trace rather than asking the user to describe it.

06

Write them into the design

The practical fix is a design review checklist: no screen ships without all five states specified. It takes minutes per screen and removes the situation where a developer invents an empty state at 6pm on the day of a release.

Empty statesSkeleton loadingError recoveryDesign reviewEdge cases
Purushottam Kumar Suman
Written by
Purushottam Kumar Suman
Founder & CEO, Drema AI

Founder and CEO of Drema AI. Builds AI systems, SaaS platforms and industry software — and writes about what actually survives production.

CTA Background

Got a problem like this one?

Bring it to a call with a founder.You will get a straight answer, including when the answer is no.

View Our Work
AI-First Engineering
Secure & Scalable
Built to Deliver Impact