Bits Kingdom

Empty state

Back to glossary

Empty state is the UI when a list, cart, inbox, or dashboard has no items yet: first login, a new folder, zero search hits. It is not an error. Nothing broke — there is simply nothing here. (When something did break, that is an error state.) The job is to say why it’s empty and what to do next.

UX writing does the talking; a CTA or microinteraction does the next tap. A gray void trains people to bounce — that is a usability miss. Onboarding often is a sequence of empty states with a guide. In prototyping, design this screen on purpose; don’t wait until production to notice the blank.

A real-life example of an empty state

An Atlanta gym app’s “My classes” tab is empty on day one. A good empty state: illustration, “You haven’t booked yet,” button Browse this week. A bad one: a white list and a spinner that never ends. Same idea as an empty checkout cart that says “Your bag is empty — shop the new drop” instead of a silent table.

Explain, invite, then get out of the way. Visual dos and don’ts: UI Do’s and Don’ts. Test them in a prototype: What Is a Prototype?.