How to Write a Good Empty State

What is the empty state?

The Empty State is your software in its initial state before the user has entered any data or set anything up. It’s what your new users are exposed to the first time they use your application. It’s a crucial phase; this is before your users have experienced what your application can do for them; before they have fallen in love with it and realised they can’t live without it. It’s where you are at your most vulnerable of losing a user because your software is “too hard”.

However, despite this importance it is it is often neglected. Developers have their test data and the software works great! Salesmen have sample data and run their demonstrations using that – it all works just fine! Nobody ever deletes it and sees what happens. So a new customer installs the product and is faced with a blank slate! In many cases they have to fumble their way through guessing what steps are needed to start being productive.

How do you do it right?

So how do you do it right? How do you help your user through this crucial phase?

First of all you need to recreate the problem: Perform a new install of the software, delete your sample data, create a new account. Do whatever you need to do to get your application in to the same state as it is received by the user. Once you are looking at the same thing as a new user would you can take stock of the situation:

  • Is it obvious what a user needs to do next? Do you tell them that or are you assuming it’s obvious?
  • Where ever there is an empty list of things are you explicitly saying that it is empty or are you just outputting nothing? (“Nothing to display”, “0 Records Found” or any other equally generic statements count as nothing!)
  • Are there any errors because your software assumes “there will always be at least one of those”

Ok, so you’ve had a quick look around, now to address the problem. You would know what needs to be done next if you were asked to set the software up. For example, you might know to start by creating some more user accounts; that a user needs to add a project before they can add any task items etc. Assume your user doesn’t know this. Take a pen and paper and make a list of what you would do to start using the software. Put the list in order. Now, ask yourself, how does my user know that this is what they need to do?

Make your interface reflect your list. Hold your user’s hand:

  • If a feature is unused or empty. Add text to explain what the feature does and how to set it up or create the first record
  • Provide a link to jump to the settings/creation page for that feature
  • Would a demonstration video be even better?
  • Are there a series of steps that the user must go through in order? Why not create a set-up Wizard dialogue to guide them through the process?
  • Sometimes an example works the best. Why not give the user the ability to pre-populate the application with sample data? WordPress does this to help you set up a Blog – it can be useful when you’re a new user. You could go further and provide sample data for different kinds of user/market so that they are presented with relevant data.

Make sure you never leave your users unsure as to what their next steps should be.

I want to take this further, so I’ll be writing a bonus 2nd post this week on a simple case study to illustrate the above. Make sure to check back here on Wednesday for the follow up post.

Share this post:
  • Add to favorites
  • email
  • Digg
  • Reddit
  • del.icio.us
  • Slashdot
  • Google Bookmarks
  • Technorati
  • HackerNews
  • StumbleUpon
  • Twitter
This entry was posted in Tutorials and tagged , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

4 Trackbacks

  1. [...] How to Write a Good Empty State – Usability Friction a-drag–, automatic-pause, crap–, fitts, headphone-disconnect, improve, make-your, [...]

  2. By Case Study: Empty State on November 10, 2010 at 2:19 pm

    [...] Usability Friction Usability shouldn’t be a drag Skip to content HomeAboutContactAdvertisingLinksPrivacyStore « How to Write a Good Empty State [...]

  3. By How to Write a Good Empty State | UXWeb.info on November 7, 2011 at 8:14 pm

    [...] has entered any data or setup. http://t.co/xxLqEbPr #ux #usability Usability shouldn’t be a drag Link – Trackbacks Posted in User experience (UX) | Permalink. ← Jakob Nielsen: #Mobile [...]

  4. By How to Write a Good Empty State | UXWeb.info on November 8, 2011 at 4:24 am

    [...] has entered any data or setup. http://t.co/xxLqEbPr #ux #usability Usability shouldn’t be a drag Link – Trackbacks Posted in User experience (UX) | Permalink. ← Giraffe Forum » The [...]

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*