Stop 06 · Interaction Design & Micro-interactionsTopics · 5/9

Error States & Empty States

In short

Designers love the perfect screen full of data. Real users meet blank lists, failed uploads and no internet. These 'unhappy' screens are where people decide whether to trust your app.

Designing deliberately for what happens when something goes wrong or when there's no content yet — often neglected, but a significant part of the real user experience of any product.

The jaadu, as a shopkeeper, points to an empty jar and offers a block of jaggery instead.

Think of it like this

The kirana uncle when sugar runs out

A good kirana uncle doesn't just say 'No'. He says 'Sugar's finished, new stock comes tomorrow, want jaggery instead?' A bad error state just says No. A good one says what happened and offers the next step.

Watch it happen

Every list screen has more than one state

Orders screen

Ideal

Empty

Error

First use

No results

Offline

Server failed

1/5The ideal state is the one in your portfolio: a full list of orders. It's only one of many.

The big ideas

What you need to know

Say what happened

Plain words like 'You're offline' beat codes like 'ERR_NETWORK'. People should understand it at a glance.

Offer the next step

Every error and empty state needs a way forward: retry, create, change filters or contact support.

Empty is an opportunity

A first-use empty screen is a great place to teach what the feature does.

Never lose their work

If a form fails to submit, keep everything they typed. Retyping is the fastest way to lose a user.

Save yourself the pain

Common mistakes

Oops

Leaving empty and error screens for developers to 'figure out'.

Do this instead

Design them yourself. Otherwise you'll get a blank white page or a raw error code in production.

Oops

Blaming the user: 'Invalid input!'

Do this instead

Be specific and kind: 'Phone number needs 10 digits.' Point to the exact field.

Your mission

Design the unhappy screens

~30 min

Quick check

A user searches 'red kurta size XXL' and gets zero results. What is the best empty state?

Go deeper

1Design an error state for a form submission failure with a clear, actionable message.
2Design an empty state (e.g. no search results, no items yet) that guides the user toward their next step.
3Learn why these states are just as much a design responsibility as the 'happy path' screens.