Designing Effective Empty States & Examples

An empty state is more than just empty. It’s a way to engage and delight your users. It’s the thing that somehow always gets left out or overlooked. Most empty states will tell you what it’s for and why you’re seeing it. But effective empty states will take you even further and tell you what you can do next.

Engage!

You want your users to stick around and not to quit whenever they see an empty screen and don’t know what to do. That’s why the empty state should engage your users and help them get to where they want to be.

A good example is that of Instacart’s list view. Not only are they telling you what it’s for, but they’re also giving you the option to show you how it works if you’re new to their app or lists feature and give you the option to create a new list. Target’s iOS app shows you top selling items to add to your empty cart.

New vs. Returning

Another effective way to engage your users is by taking in account whether they are new or they are returning. In the example of Best Buy, the cart shows best sellers to new users that haven’t used the app before and once you start browsing and discovering items, the cart shows recently viewed products. This is a smart way to fill this otherwise empty screens with products you are actually interested in and might add to your cart.

Design for Delight

Adding to this is a layer of delightfulness. Bringing in some personality, keeps things light and fun which contributes to keeping the experience optimal. Delighting your users with a positive message, instead of just showing an atrocious error, will make your app more memorable and a pleasure to use.