Designing Empty States and Error Screens — Where Edge Cases Shape the Experience

A designer’s artboard usually depicts the ideal: dashboards brimming with data, a network that never lags, users who never mistype. Yet the first thing a real user encounters in a new product is often an empty state — a screen with nothing in it — and the moment their emotions run highest is when they hit an error state. These edge cases are the real stage on which a product’s impression is made.

1. Why Edge Cases Shape the Experience

A user fresh out of onboarding has no attachment to your product yet. If the empty screen that greets them is nothing but white space, they are left to answer the question “what am I supposed to do here?” entirely on their own. Error screens work the other way around: they appear precisely when the user is already frustrated. Recall the peak-end rule from psychology — our memory of an experience is dominated by its most intense moment and its final moment. An error is a prime candidate for that negative peak. In short, empty states form the first impression, and error states form the most vivid memory.

Delivering a pleasant experience when everything works is not particularly hard. It is when things do not go according to plan that a brand’s character and care become visible. That is why mature design organizations spend more review time on edge-case scenarios than on the happy path.

2. Principles of Good Empty States and Error Screens

An empty state is not a void — it is a starting point

A well-designed empty state carries three things. First, a short explanation of what this space is for. Second, an illustration or example that helps the user picture the screen once it is filled. Third, a clear call to action they can tap right now. There is a world of difference between a screen that merely announces “No items yet” and one that opens a door with “Create your first project.” One reports a condition; the other invites the next move.

An error screen is the design of recovery

The basic grammar of an error message is a three-sentence structure: what went wrong, why it happened, and what to do next. Avoid language that blames the user, and never present a bare error code as the whole message. Every error needs an exit — retry, go back, or contact support — offered alongside the explanation. Humor can defuse tension in lightweight situations, but in serious ones such as a failed payment or lost data, a joke does more harm than good.

The screen that merely reports

“This list is empty.” “An error occurred (code 500).” The user learns neither the cause nor the next step — and simply leaves.

The screen that opens an action

It explains what the space is for, shows an example, and offers an exit — a retry or a first-action button. A dead end becomes a starting point.

3. How Brands Handle Their Edge Cases

Google Chrome hides a tiny running-dinosaur game inside its offline error screen, the one you see when your connection drops. It is a canonical example of error-state design: the single most irritating moment of browsing, transformed into a small gesture of brand charm. GitHub’s 404 page is famous for its Star Wars-flavored illustration — even when you are lost, the identity of a developer community stays intact.

Slack treats the empty state of a newly created channel as an extension of onboarding: alongside the note that this is the very beginning of the channel, it immediately suggests next actions such as inviting people or adding a description. Airbnb is likewise known for using an empty wishlist to explain how saving works and to nudge the user back into exploring listings. The common thread is unmistakable — these products treat emptiness not as a state to report but as an opportunity to seize.

4. Putting It into Practice — and the Mistake to Avoid

Build a state inventory for every key flow. Beyond the ideal state, map at least a minimal matrix: first use, no search results, loading, offline, no permission, and server error.

Give each state a purpose. Every empty state must define one next action; every error state must define one explanation of cause and one exit.

Refine the copy with UX-writing principles: the what-why-how three-sentence structure, a tone that never blames the user, and a brand voice dialed to the severity of the situation.

Register the pattern in your design system. A shared component of illustration, title, description, and button lets the whole team reuse the same quality everywhere.

Validate with real conditions. Kill the network, create a brand-new account, misspell a search query — and walk through every state yourself.

The most common mistake is filling in empty and error screens all at once, right before launch. Screens produced this way tend to read like stiff system messages and become dead ends severed from the flow around them. Edge cases are not finishing work to be squeezed in at the deadline; they belong to the main story and should be sketched from the wireframe stage onward.

Closing thoughts

A product reveals its class not when everything runs smoothly, but in the moments when the screen is empty or something has gone wrong. An empty state is a map that guides the user’s first step; an error state is a recovery mechanism that converts frustration into trust. On your next project, before you draw the ideal screen, try drawing the screen with nothing on it and the screen where something has failed. The polish of the whole experience begins right there.