The empty state and its importance

I started thinking about empty states more while testing components with real product examples.
It’s easy to think a component is working when everything is filled in. The right content is there, the buttons make sense, and the layout looks fine.

Then I removed the content and realised I hadn’t really designed with the next steps in mind.

An empty state isn’t always just “nothing here yet”. Maybe the user hasn’t added anything. Maybe their search found nothing or maybe there simply isn’t anything worth showing.

They can all leave you with an empty screen, but the reason why that screen is empty matters a lot.
This realisation made me look at reusable components a little differently too. I don’t think every version needs to behave exactly the same just because it uses the same component. Sometimes the structure can stay the same while the message or action changes.
I also caught myself wanting to add illustrations just because the space felt too empty. Sometimes this approach does works but sometimes it becomes just decoration.
So I’ve started asking myself a simpler question first: what would actually be useful here for the user?
What surprised me most is how much removing content can reveal about the rest of the design. Things that seemed obvious when the component was full suddenly weren’t so very obvious.
I’ve started including empty states much earlier now, rather than treating them as something to tidy up at the end.
They tend to show me where I haven’t thought something through yet.

今後も学んだことを少しずつ共有していきます。