How's it going, ! 

Today, we're diving into a topic that might sound a bit empty at first (pun intended), but trust me, it's full of helpful insights: "Empty states in UX design"

📖 Introduction to Empty States

Picture this - You're scrolling through your favorite app or website, and suddenly, you hit a dead end—a blank screen, a generic 404 message or maybe just crickets chirping. That is what we call an empty state. But empty states are not just dead ends; they're opportunities for designers to use their skills to inform users about the current state of the system.

Empty state example from Google Drive 

What I love about the above screen -

⭐ Contains a clear contextual heading "Nothing in Trash" and a subheading below describing the current state of the system

⭐ Provides an educational link to "learn more" about the current state if needed

⭐ A fun illustration relevant to the empty state

🎤 Story time

Before diving deep into the details of empty states, I have an interesting personal experience to share -

I'm back in my hometown after being away for a year and a half, and, it feels great to be here. I heard about this new beauty store so I thought I'd check it out. I had no clue what kind of brands they carried, so I walked in with an open mind.

As I strolled through the store, I was on the hunt for a specific skincare brand. Unfortunately, I couldn't find it anywhere on the shelves. Just when I was about to give up hope, I stumbled upon a little section in the store. There were posters with the name of the skincare brand I was looking for, teasing that it was "Coming soon!" and that they would soon have everything from that brand available in the store.

That discovery gave me a glimmer of hope and assurance. It made me think, "Hey, they might not have it now, but they'll definitely have it in the future!" It got me excited to come back and buy what I wanted. That poster acted as a "placeholder" of sorts, giving me context and a sneak peek into what was to come. Without it, I would have been completely clueless.

Designing Empty States in Digital Products 👩‍💻

Empty states are just blank slates waiting to be filled with creativity and purpose.

Blank State

Ever opened a new app or a feature for the first time and found yourself staring at an empty screen, wondering, "Now what?" That's the blank state in action. 

In Google Drive, when a new folder is created, it starts off empty but provides users context on to what to do next.

Blank state screen on Google Drive

No Results State

You know that sinking feeling when you search for something and come up empty-handed? That's the "No results found" state. 

Airbnb nails this with their search feature. If you can't find any listings matching your criteria, they offer suggestions to broaden your search or explore nearby areas.

No results screen on Airbnb

Placeholders

Placeholders are like little breadcrumbs guiding users through the wilderness of the app. 

Instagram uses placeholders such as "suggested for you" to fill empty sections. They have also started adding placeholder posts to boost engagement and followers, instead of just saying "You're all caught up!".

Suggested posts acting as placeholders in Instagram feed

Error State

Oops! Something went wrong. We've all been there, right? Error states pop up when things don't go as planned, but they don't have to be a dead end. 

Airbnb displays an effective error state explaining the error in action and also provides helpful guidance. The fun illustration adds to the whole experience.

Error state screen on Airbnb

Onboarding/Guiding Screens

Ah, the joy of welcoming new users into the fold! Onboarding screens are like tour guides showing users around your app or website for the first time. 

Beehiiv, a newsletter platform, effortlessly guides users through the platform's key features via effective onboarding.

Beehiiv's onboarding