UX/UI Guide: Empty States

Let’s learn How to Design a Great Empty State for App.

If you ask me which part I often forget to design, then I will say it without taking any time. Empty State. It’s the most underrated part of the design, but it’s useful as heck. In this article, I’ll share some of the key lessons I learned over time about designing the Empty States.

Empty states are the screens shown to the user when we don’t have anything to show.

For example, if you’re using a shopping app and you don’t have any items in your cart, then the screen will show nothing, but instead of displaying nothing, we can take advantage of it by showing a text saying your cart is empty but showing some products below (based on his recent purchases, searches, and product visits) that a user can add to his cart.

And the process of taking advantage of the empty states is called “designing the Empty States.”

You can show products, add a CTA button, and educate the user about the product or services on empty screens.

It comes under the “Error Prevention” Designing. Learn More

Let’s see some quick tips for designing a beautiful empty state that benefits both the user and the business. I learned these tips by designing empty screens for various different apps for different clients.

When a user sees the empty state, they psychologically feel that something is not good. A blank screen makes them confused and sad. And to cheer them up, we designers use illustrations.

There are many types of illustrations; some also use animated illustrations. I personally prefer fun and cartoonish illustrations (custom-made).

If something goes wrong or does not meet the user’s expectations, be prepared for it. Find where a user might find himself with a blank screen.

Second, provide them with the reason for the error as well as a solution that the user can do to resolve the problem. Another great thing you can add is CTA buttons.

CTA, or Call-To-Action buttons, can be very helpful in empty states. For example, if a user is seeing an empty contact list, showing a button that can ask the user for content permission is a great example of it.

Of course, you can use the call to action button in any way inside the empty state. By CTA, I basically mean adding any action that a user can take if he is seeing an error or empty state.

Thanks for reading, guys. You people are helping me grow both in terms of design and finance. So, if you haven’t already, follow us and sign up for our newsletter to never miss an article.

Subscribe here to get new articles delivered right to your inbox!

Follow me on Twitter for quick and insightful design tweets.

Keep designing. Keep learning.