The role of empty states in mobile app UX design
January 28, 2021
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.
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.
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)
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:
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.