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.
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.
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.

5 Tips For Better Empty States⁠ in UI Design

Dec 3, 2024

·

2 min read

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.

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)

A guide to 'Ideal empty state architecture' with four labeled elements: 1) Title, 2) Explanation, 3) Illustration, and 4) Call to action. Below the labels is an example design featuring a whimsical illustration of a person floating while holding a tablet, surrounded by coins. The example includes the title 'Follow the money,' an explanation, and a prominent purple button labeled 'Create your first bill.

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.

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.

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.

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. The left design, marked with a red 'X,' features an illustration of a person sitting with a laptop and a dog, accompanied by the text 'Keep track of the places you love' and a button labeled 'Start a search.' The right design, marked with a green checkmark, includes a cleaner illustration of a globe inside a box with heart icons around it. The same heading and button text are used, but the overall design is simpler and more focused.

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.

Conclusion

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.

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)

A guide to 'Ideal empty state architecture' with four labeled elements: 1) Title, 2) Explanation, 3) Illustration, and 4) Call to action. Below the labels is an example design featuring a whimsical illustration of a person floating while holding a tablet, surrounded by coins. The example includes the title 'Follow the money,' an explanation, and a prominent purple button labeled 'Create your first bill.

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.

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.

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.

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. The left design, marked with a red 'X,' features an illustration of a person sitting with a laptop and a dog, accompanied by the text 'Keep track of the places you love' and a button labeled 'Start a search.' The right design, marked with a green checkmark, includes a cleaner illustration of a globe inside a box with heart icons around it. The same heading and button text are used, but the overall design is simpler and more focused.

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.

Conclusion

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.

If you aren't following us on Instagram already, you're seriously missing out! Become a part of our ever-growing community and learn something new from the field of product design every. single. day.

Happy designing! 🥳

andrija & supercharge design team

If you aren't following us on Instagram already, you're seriously missing out! Become a part of our ever-growing community and learn something new from the field of product design every. single. day.

Happy designing! 🥳

andrija & supercharge design team

10,000+ designers

Stay up to date

Get valuable design tips, exclusive offers, and more—straight to your inbox. We don’t spam and you can unsubscribe at any time.

10,000+ designers

Stay up to date

Get valuable design tips, exclusive offers, and more—straight to your inbox. We don’t spam and you can unsubscribe at any time.

10,000+ designers

Stay up to date

Get valuable design tips, exclusive offers, and more—straight to your inbox. We don’t spam and you can unsubscribe at any time.

10,000+ designers

Stay up to date

Get valuable design tips, exclusive offers, and more—straight to your inbox. We don’t spam and you can unsubscribe at any time.