UI Design

5 Tips For Better Empty States⁠ in UI Design

Empty states are more than just a blank screen—they’re an opportunity to guide and engage your users. By designing them thoughtfully, you can provide clarity, reduce frustration, and even encourage action. Let’s look at how you can make the most of empty states with these simple tips.

A stylized desert landscape featuring various cacti with soft, rounded forms in shades of green. The background has a warm gradient of orange and brown tones, creating a serene and minimalist atmosphere. Sparse desert plants are scattered throughout the sandy terrain.

What Are Empty States?

Empty states are a part of a user flow when there is nothing to display. The ideal empty state consists of the following:

Title
Explanation
Illustration
CTA (Call to action)

Ideal empty state architecture

Tip 1: Explain Why The Screen Is Empty

When you’re designing empty states, it is important to explain why the screen is empty. It provides context and explains why there isn’t any data (yet).

A side-by-side comparison of two designs for an empty state screen. The left design, marked with a red 'X,' lists repetitive placeholders under a table titled 'My bills,' making the layout appear cluttered. The right design, marked with a green checkmark, features a simplified layout with an illustration of a magnifying glass and a bill. It includes the heading 'Start creating bills,' explanatory text, and a prominent purple button labeled 'Create your first bill.

Explained empty state

Tip 2: Use Positive Wording

Using positive wording while designing empty states is essential. You can do so by highlighting what users can do rather than what they can’t do. That way, you’re providing positive and empowering guidance to encourage action.

A side-by-side comparison of two empty state designs. The left design, marked with a red 'X,' features the text 'It's empty' with a minimalistic layout and no clear action. The right design, marked with a green checkmark, includes an illustration of a person sitting on an oversized purple wallet, accompanied by the heading 'Start creating bills,' a brief explanation, and a purple button labeled 'Create your first bill.

How to use positive wording

Tip 3: Suggest Next Action

By proposing an action while designing empty states, you will reduce frustration and improve UX. You will also prevent confusion, and guide the user forward. By doing so you’re making the user experience more enjoyable.

An empty state design featuring the text 'It's quiet here' with a subtext encouraging users to 'Start a chat with your friends or others in your event.' The design includes illustrations of two people and purple chat bubbles, along with a prominent purple button labeled 'Start chatting.

Example of proposing an action

Tip 4: Use Relevant Visuals

It’s important that you avoid using unrelated imagery when designing empty states, as it can mislead and confuse users. It’s better to use imagery that helps with information processing, enhances the message, and directs user attention.

A side-by-side comparison of two empty state designs

Tip 5: Use Empty States As Learning Opportunities

You can use empty states as learning opportunities by providing in-context help, which can often be applied right away. Hence, it’s often more successful than forced tutorials.

An interface design for a project management tool showing empty state guidance. On the left, there is a section titled 'Get started with the project' with instructions to create an issue or a document, accompanied by buttons labeled 'New issue' and 'New document.' On the right, a panel displays project properties such as status, members, and dates. A highlighted section labeled 'Documents' with a plus sign is emphasized with the annotation 'in-context help,' guiding users to add documents to the project.

Example of using empty states as learning opportunities

Empty states don’t have to feel like missed opportunities. By explaining why the screen is empty, using positive language, and suggesting actions, you can turn them into moments that improve the user experience. Use these tips to make your empty states clear, helpful, and engaging.

For other valuable educational resources, explore our Learn section. Here, we offer heaps of courses, workbooks, and other resources that will help you improve your skills in UX/UI.
Happy designing! 🤗