Uno Platform
.NET MAUI
Grial KIT
UXDivers
Design
Design

The role of empty states in mobile app UX design

How empty states can make your mobile app more engaging?

The role of empty states in mobile app UX design

Post by Flowbase
January 28, 2021
Post by
UXDivers
Nov 18, 2022
The role of empty states in mobile app UX design

Of all the apps users try, only a few pass the first-day test, and even fewer become part of users' everyday lives. Hooking up your users during this early critical phase is key to creating long term usage.  

A really interesting article by Andrew Chen shows how fast mobile apps lose their daily active users. The numbers are sobering:  within the first 3 days post installation, an app loses on average 77% of its daily active users, and by day 30 that number rose to 90%. 

For sure these are sobering numbers. Is there anything we can do to avoid these trends?

First Impressions Matter

We tend to design screens that are content rich, and we thrive to make everything look good. On the contrary, we usually tend to forget to design those screens empty states, i.e. when the screen doesn't yet have any content. By not designing the empty states, we’re missing out on a good opportunity to drive engagement, even if those states are temporary. 

These are some of the most common empty states encountered by users:

  • First use: App first launch.
  • Error: User faces some problem (e.g. not showing data from source).
  • Delete content: All content is gone.

By designing our empty states, we can accomplish three very important goals:

  • Educate and help users.
  • Delight users.
  • Prompt action.

Educate and Help Users

Teach people how to use the app, help them get comfortable by setting expectations for what will happen. 

Empty states become critical when users face unexpected situations, problems, or failures, because they can help them overcome them by explaining what went wrong. 

An example of a missed opportunity to guide and help users is Spotify’s error screen, which simply displays a puzzling “An error occurred” message.

On the other hand, Target has a very good example of how to use empty states to help users know why they don’t see any content in their app and what they can do to solve this situation.

Empty states

Delight Your User

A good impression isn't just about usability, it's also about personality. Empty states allow you to play around with cool new stuff and varied graphic assets. Leverage empty states to differentiate your product from your competitors and delight your users in the process.

Delight Your User

Research the onboarding and empty states of other apps, and stand out from the crowd. 

Delight users by:

  • Introducing brand elements
  • Showing a sense of humor - positive or fun emotions make the experience memorable)

Prompt action

Improve your user experience with your app by using empty states not just to show them what's happening, but to also prompt them to take action to move forward. Below a nice example:

Prompt action

Takeaways

User interfaces require a delicate balance of information and action. Empty states are as important to design as any other design component.

  • Invest time in empty states, they matter in creating a positive user experience.
  • Keep it simple. Simple and short copy, clear icons or illustrations, and a CTA button if needed.
  • Consider context. If the empty state is triggered by positive action, reward the user with a fun or beautiful screen. If the empty state is related to an error, make sure the screen explains how to overcome that error and how to move forward.

Join our 4K+ .NET
developers community.
Stay tunned! Get pro design tips and updates.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Don’t worry we hate spam too ;)
Subscribe-Blog-Image

© 2015–2023 UXDivers | Grial