Introduction

No, empty states aren’t the result of UX designers being lazy or conservative with their talents. They actually represent the exact opposite of that. Empty states are a modern, well-calculated type of UI design that’s intended to keep app users engaged when there’s no relevant data to display. They’re most commonly shown when a user opens an app for the first time, clears their data, or encounters an error.

While most app users might not put much active thought into what happens when they come across a largely blank screen, the impact that a carefully crafted empty state can have on their subconscious decisions and on their user engagement is enormous.

This is because empty states have the power to keep users happy and engaged, or they can frustrate users and encourage quick abandonment. Empty states can ultimately make or break your app’s UX, so it’s in your best interest to become familiar with them using this quick guide.

Examples of Empty States in Mobile Apps

To fully understand the importance of empty states, it’s best to think of them from the user’s perspective. So, try to imagine the following situations through the eyes of the casual app user…

  • You install a file sharing app like Dropbox, and you’re taken to a mostly blank screen where you don’t have any files stored yet

dropbox empty state

 

  • You’ve taken the initiative to empty your entire Trash folder in an email app like Gmail

gmail empty state

  • You attempt to view a picture on an image sharing app like Imgur, but you encounter an unexpected error

imgur empty state

 

In each of these situations, the user has the option to continue using the app after reaching an empty state, or feel confused on whether their session is ‘over,’ and leave the app indefinitely.

Do you see how potent empty states can be? When empty states are executed well and placed correctly, they provide app owners with strictly positive benefits for their business. And, while you can be sure that the teams behind Dropbox, Gmail, and Imgur are constantly tweaking their empty states to maximize user engagement, creating a simple yet solid foundation of empty states within your app will almost certainly boost any team’s long-term profitability.

However, you must ensure that your app’s empty states encourage strong user engagement and habituation – this is certainly not an UI element that can just be implemented and then fall between the cracks in terms of assessment and optimization. If your empty states prompt your users to feel even a little bit confused or uninterested, you are at a high risk of losing those users.

But, there’s still no need to feel intimidated about any of this. With time and testing, anyone can discover the tremendous upside of designing effective empty states. By giving users a clear direction, call-to-action, and/or entertaining message each time they encounter an empty state, you’ll likely notice less users abandoning your product, and more people enjoying the continuous funnel of your UX. Yes, effective empty states have the potential to noticeably increase user retention and engagement.

 

Specific Case: Empty States in the SoundCloud App

The SoundCloud app uses highly-effective empty states, and provides a great mini case-study to learn from. Upon first glance, most people would probably consider the SoundCloud app to have a ‘minimalist’ style that was put together as a result of some trend. But, as you probably realize, SoundCloud’s simple UX is actually the result of tons of research, testing, and optimization. Here are the key takeaways from the app.

soundcloud 1
SoundCloud’s Stream screen (Home menu)
  • SoundCloud’s home screen makes it clear that you will be able to hear new music in a matter of seconds without telling you specifically what to do
  • But, with only a few menu items available, your journey towards hearing new music is an obvious one (this is the ‘heart of the empty state)
  • This empty state provides direction almost entirely through design and standard icon recognition

 

soundcloud 2
SoundCloud’s Search screen
  • By visiting SoundCloud’s Search screen, users know that they can easily type in music-related keywords and find the music they want to hear
  • The search menu icon is universally recognized as a path to find what you want – it doesn’t require much explaining, and that’s a big reason why the SoundCloud app works so well
  • This empty state ultimately guides users by using a combination of design, copywriting, and icon recognition

 

soundcloud 3
SoundCloud’s Collection screen
  • The copy that reads ‘Your liked or created playlists will show up here’ offers a nice way of showing users exactly what to expect once real user data is available
  • The “emptiness” of these categories can also prompt users to begin “filling” them through certain actions

 

soundcloud recent stations

 

  • Users are naturally tempted to tap on each section to understand what they mean
  • This empty state uses design as a CTA which encourages tapping through. For example when users tap on the “Recent Stations” section they are taken to another empty state that cleanly explains the function of stations within SoundCloud.
  • SoundCloud does a great job of encouraging users to take immediate action so that ‘investment’ and interest in the product can begin right away
  • Liking a song populates the Likes section and favoriting a playlist automatically populates the Playlists section; all selections include album covers and relevant information
  • This process marks the end of SoundCloud’s unpopulated empty states, as users become more acquainted with the app and provide the relevant data

 

Onboarding with Empty States

To encourage action and spark interest from your user, you can consider implementing an empty state in your user onboarding process (like SoundCloud has). The overall goal of onboarding new users is to…

1.) Inform

2.) Entertain

3.) Encourage action

And because freshly-installed mobile apps aren’t typically populated with real user data, the intial user experience with an app actually justifies empty states in a way. Empty states are designed to make users aware of this “emptiness” yet at the same time push users to further interact and enegage with the functions of one’s app, ultimately completing their understanding of the app and its value.

 

Ensuring That Your Empty States Are Effective

While it’s common for appreneurs to think they know what users want, it’s almost always easier, less costly, and more efficient to test and track your empty states by analyzing how your users respond to them. The most important steps you can take towards building effective empty states involve designing them, and then testing their effectiveness using the right tools.

For example, testing your empty states and other UX design elements with tools such as Appsee’s Touch Heatmaps and User Recordings is one of the most powerful methods for forming winning empty states.

By using Touch Heatmaps, you’ll know if your users are responding to the design of your empty states and the copy that you’re testing. You’ll be able to see exactly where users are tapping, swiping, and pinching within empty states, so that you can instantly determine if adjustments need to be made regarding design intuitiveness, user preferences etc..

User Recordings are the new way of managing user testing and research. This tool allows you to watch exactly what your users are doing inside of your app, just as if you’re experiencing empty states from their POV. This enables you to watch every session that your users experience, and take note of how they’re reacting to your blank states. Are they tapping on the right menu items, hitting the proper buttons, and staying immersed in your UX?

With User Recordings, you’ll know almost automatically if your empty states need to be overhauled, slightly tweaked, or solidified to keep your audience fully engaged.

 

Conclusion

Unfortunately, empty states are often overlooked when it comes to UX Design, but as revealed they can actually function as a powerful asset of your app’s UX, particularly in prompting engagement from your users.

In all honesty, you won’t know exactly what kind of impact empty states will have on your app’s UX until you begin creating them, analyzing them, and adjusting them accordingly.

However, once you’re able to find the best empty states that keep users interested and moving forward inside of your mobile app, your team should be able to achieve even more awesome levels of user engagement and retention.