3 Good Practices for Displaying an Empty State

    #1 product adoption platform. Quick setup, lasting engagement.
    Start for free >
    See how UserGuiding can help you level up your product experience.
    Talk to an expert >
    #1 product adoption platform. Quick setup, lasting engagement.
    Join 20k+ product people >
    Ready to Boost
    Product Adoption?
    Meet With Our
    Onboarding Experts

    Home / UX / 3 Good Practices for Displaying an Empty State

    An “Empty state” or empty screen or zero-data state is the moment in which regular content of a page can’t be displayed to users.

    It is a great opportunity for UX designers to create a more consequential and satisfying experience. It is also a lucky chance for good design to prevent user disappointment or confusion.

    Empty states are significant screens that not only designers but also developers, and product managers should take into consideration. They have a remarkable potential to boost customer engagement, customer delight and retain users. Good choice of words and visual content are the passport to interacting with your users and helping them achieve their goals.

      Some examples where empty states occur:  

    • If there is no item in a list
    • When there are no results in a search
    • Occurrence of an error
    preloader Empty State 1
    from UserGuiding's dashboard

    As we look at the subject from a user’s perception, empty states appear:

    • At the moment first impressions occur
    • If users fail
    • When users succeed

    These moments have 2 possible outcomes:

    1. User can abandon the app temporarily or permanently.
    2. User can be engaged to be a loyal customer.

    This little but very important element of the design has a notable impact on a user’s decision whether to abandon or to keep using an app.

    Best Practices for Designing an Empty State

    If you have to design an empty state, there are some great practices to keep in mind. Below is a basic outlook of our "Hotspots" page's empty state which we will extend as an example. There is not only one certain method to display empty states, but we are going to demonstrate how we have made it on this page so that you perceive the mindset behind designing them.

    preloader Empty State 2
    from UserGuiding's dashboard

    1. Guide Users by Educating Them

    As we pointed out, empty states are great opportunities to interact with customers. We took the opportunity by describing verbally how to use the feature and shortly explained how to start and what is going to happen after creating a Hotspot. We also backlinked an article that clarifies the functionality of the feature to eliminate the questions users may have. Pushing users to go ahead is the main aim here.

    "Get started by creating a hotspot group! All of your hotspot groups will be displayed on this page. Learn more about hotspots here."

    preloader Empty State 3
    from UserGuiding's dashboard

    2. Use Visuality

    Visuality is the key to drawing a strong image or pattern in users' minds on how to use the feature. Well-Designed visual content is going to be deeply effective for encouraging users to move forward to the next step. What I mean well-designed is that a proper visual content must not be confusing or distractive, they rather need to be explaining, appropriate for the general appearance of the page, and simple. We created a catchy image that simply explains the function of the feature.

    preloader Empty State 4
    from UserGuiding's dashboard

    3. Push Users To Take Action with A Button

    Putting a relevant button in an empty state is a loud and clear call for users to retain on the page. It creates an opportunity for users to keep on the action.  

    preloader Empty State 5
    from UserGuiding's dashboard
    empty states webflow
    from Webflow's dashboard (mentioned in Adem's tweet)

    Even giants are displaying empty states by using the steps we mentioned above. Surely, there may be other creative ways to do it except these.

    3 Examples of Empty States

    We used our "Hotspots" page's empty state as a sample of the subject. Here are some other examples from several well-known applications.

    1. Snapchat

    Imagine there was no image and a button, a remarkable number of users would probably not go next step. However, It is now a good start for a user to see such an empty state.

    preloader Empty State 6

    2. Dropbox

    Dropbox's designer team certainly know how to do it. This exactly what you would like to see as an empty state. A great image, catchy phrase, and a button as it should be.

    preloader Empty State 7

    3. Facebook

    Beyond giving information, this empty state encourages the user to find new friends which are the principal dynamic of Facebook.

    preloader Empty State 8

    Frequently Asked Questions

    Join 1000+ teams
    driving product success at speed

    14-day free trial, no coding needed, 30-day