How do you handle empty states?

I'm a bit torn between just using simple copy for empty states vs wireframes or images.

I'm curious on how others handle this?

  1. 3

    I currently use simple copy because I'm at an early stage with my product.

    However, now that I've settled a bit on a lot of the user flows, I want to move towards making my empty states part of the onboarding experience. One of the common themeseof useronboard.com's teardowns is you want to take advantage of the empty states to introduce users to the product. It's more effective than having those pop up tours.

    These can be images that point to buttons (e.g. an arrow pointing to the button and not an image of a screenshot). I'm probably going to experiment with special buttons that only exist in the empty state.

    1. 2

      Currently I use videos of product demo and explain how product works. Just looking not good enough but it is better than empty page :)

      1. 2

        Yeah something is certainly better than nothing - I think I'm going to stick with some simple copy for now until I get more user feedback.

    2. 1

      I really like the idea of using empty states to guide the onboarding (I find the popup tours really overwhelming). I should do another deep dive of useronboard.com - such great tips in there.

      Thanks for the info!

  2. 2

    Images can add personality to your empty state page / product, in the same way a 404 page does. It is also one of the best place to be witty.

    You should check these examples of 404 pages :

    And also these empty states examples :

    In my opinion, the most important is just to make sure that users are always led to another page / action with a button, or a link.

    1. 1

      Yeah having a button to take some action vs just abandoning them with emptiness seems to be a defining feature of a good empty state/404. Some great examples in the shared links. Thanks!

  3. 2

    I thought this was going to be a funny Zen post. Not Zen the helpdesk software, Zen the Buddhist philosophy. Massively disappointed.

    Anyway, I think a default image that won't be confused with an actual posted image is best. Ostensibly it will just lurk around in their cache once they download it once, so you don't have to make it low resolution.to save bandwidth. I use a picture of Alfred E Neuman in Uncle Sam's clothes, but my site has questionably appropriate content and only 1 user. (Me, obviously.)

  4. 1

    Hey @drie, UX designer and developer here!

    It depends what you want to achieve UX wise! There is no rule on what medium to use. The idea is that "Every pixel should have a purpose and you should only show content in your UI that creates value for users and is easy to interpret."

    Therefore everything works. Videos, icons, illustrations etc.

    I also made a livestream on YouTube some weeks ago about the basics of onboarding that could be helpful https://www.youtube.com/watch?v=qFzfjIoiTqk

    My question at this point is:

    "What is this empty state about? Also what is the overall user journey (before and after steps) that users will experience?"

    Once I have these insights I can throw some more ideas and help you :)

    1. 1

      Ya, I think I need to think more about the overall user journey. At this point I am just building out some component features that I know are needed before addressing the onboarding/First-Time User Experience. Once I'm a bit further along maybe I'll post again for some feedback.

      Also, I watched your videos on youtube. I must say, they were excellent. A lot of really good content and insights. I especially liked seeing the prototyping video with the follow up of the user testing. It was super interesting to see the feedback after watching the first video of the prototyping phase. You gained a sub :)

      1. 1

        Aha got it! In general my advice is keep it simple in your design system with an icon, text and call to action (example: https://assets.justinmind.com/wp-content/uploads/2018/07/empty-state-friends-facebook.png)

        The goal of empty states are to guide the users to the next step, that's why call to action is so important. On top of this, the icon makes it visually pleasant and easier to scan, and the text provides more clarity.

        Thanks so much for checking them out and super happy that you like them!

        I will start live-streaming from this week where I will design thinkoutloud.io (my micro saas product) in public!
        On top of this I am doing free 1-1 UX coaching sessions (design feedback and help) like the ones you watched on YouTube, so if you want to join me and do some sessions together, I am more than happy to help!

Trending on Indie Hackers
Hit 🎉 40K users 🎉 ahead of the launch 13 comments The one where writing books is not really a good idea 13 comments I build an awesome white-label product but I don't know who could need it. 8 comments 99 Designs and 2 Dribbble Designers Later I Have a Logo! 7 comments I got 3 offers to buy my product for $100k, $125k and $150k, rejected them and here's why it was the correct call 6 comments How To: Pitch Your Startup 6 comments