Image by author

Empty states are screens in your UI that are not yet full of information. That is to say, they are screens which will eventually have content on them when the user populates them.

If you’ve ever used an application that allows you to add favorites or items to a cart, for instance, you might be familiar with an empty state. Or maybe you’ve completed a search that returns no results.

Some Best practices for designing empty states:

Guide the users

Don’t leave users hanging. Help users to understand or get started with a new product.

You can put a call to action button on your empty state screen.

Image by author

A good call to action asking your user to add their own tasks can keep them engaged and in your app. Your call to action basically tells the user how to turn that empty screen into a filled screen.

Suggest Alternatives

If a user searches for something that does exist, provide close matches to what they are looking for.

We give users a chance to explore other sections when they encounter an empty state in one section.

Image by author

Provide Starter Content

Populate empty states with content to allow users the opportunity to learn and use your product immediately.

Image by author

Apps which store content like music or books, or use templated content like notes or documents can benefit from starter content. Giving your user the ability to change the starter content is a way to maintain engagement because the user is making the app their own.

Add Personality

Add personality by using friendly and sometimes humorous but keep the user goal and context in mind.

Image by author

But your empty state is a small instance where you can inject some personality into your product. Personality doesn’t automatically mean funny. When adding humor into your UI, use it with caution. That one line quip might be fresh today but tomorrow can leave a stale taste in the UI after it becomes exhausted.

Use Illustrations

Combining straight forward copy with fitting illustrations creates a better empty state.

Image by author

Empty states are a way to improve the user experience of your product and illustrations helps a lot. It encouraging users to interact with your app.

Good luck!