Case Study: Empty State

Earlier this week I wrote about Empty State. I wanted to follow this up with a case study on how this might work on an example.


I’m going to base this example around an imaginary website. I’ve called it Fotolio, it’s a portfolio site for photographers to upload their photos. Imaginative names aside, I want to stress the below isn’t really how I’d design this kind of site, it’s a forced example to help illustrate the point. However, it is fairly representative of 100s of web applications out there:

So, Fotolio has 2 features:

  • You can create albums to organise your photos
  • You can upload photos to albums. Photos must live in an album

That’s all it does (well there’s some user profile stuff too – but it’s completely imaginary so it can do what ever you want!)

So, let’s look at a mock-up of how it would look fully populated:

There’s albums, a list of photos – once a user has got to this point they will have a good grasp of how to use the software. By this time it will be obvious that they go to the manage albums tab to create a new album; it will be obvious that they then go to the upload pictures tab, select the album then start uploading.

This is the state that the developer and other internal people will likely have the software. There is already content in there, they have context. If you can see other content in context you can link things all up in your head – it’s pretty powerful stuff. Without this you are left guessing. So, how might this app look to a new user in its empty state?:

Here we’ve just got empty lists, the system is outputting something meaningful e.g. “You have 0 Albums” so that’s a good start, but where do we go from here? Is it obvious what to do next? Let’s use the process I outlined on Monday. What does the user need to do to start using the software:

  1. Create an album – this involves:
    1. Switch to the Manage Albums Tab
    2. Click the New Album Button
    3. Complete the details and click save
  2. Start uploading photos – this involves:
    1. Switch to the upload pictures tab
    2. Select the album they want to upload against
    3. Upload their photos

So, we expect the user to know that’s the steps. However, is that obvious? No not really – there is nothing to stop the user blindly going and straight to the upload pictures tab to be stopped in their tracks when there isn’t an album for them to select. Granted, this is hardly the end of the world, but you’ve just slowed them down. They’ve now got to back track and create an album. Grrr.

So what can we do to improve things?

A small improvement

You don’t have to make major changes to your application in order to have a big difference on its usability. All we want to do is give the user a hint to suggest what to do next. A simple quick fix could be the following:

Here we’ve added 2 buttons to the front page. The button for creating a new album is shown immediately below the empty list – this creates a visual grouping between the empty list and the means to add items to it. We’ve also introduced the dependency between the albums and the pictures – the upload pictures button is disabled and re-labelled to instruct them to create an album first.

This isn’t a major change, a few minutes work. But we are giving the user a crucial pointer as to what they need to do to next.

A bigger improvement

But let’s go further. This is our first impression – let’s make it a good one. Let’s hold the user’s hand, guide them through the process. We’ll do away with the empty list altogether and replace it with some instructions. They can’t upload photos until they’ve created an album so let’s remove all mention of it. We’ll even include a screencast showing them how to do it:

Great, the user is left in no uncertain terms as to what they need to do next. We can now go even further; we can progressively introduce the interface – the user now has an album so we’ll show that control; but they haven’t got any photos yet – at the position where their photos would be we can show them some further instructions:

The above approach progressively replaces instructions on how to create content with the actual content itself. The user sees one of two things 1) Their content or 2) Instructions on how to create it. This makes it easy for them to get up and running.

Granted this is a fairly trivial example, but it should be evident that as applications get more and more features it becomes harder and harder to join up the dots. You don’t need to go to the extent suggested above, but you should take steps to ensure that a user always knows what they need to do next.

Share this post:
  • Add to favorites
  • email
  • Digg
  • Reddit
  • 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.

Post a Comment

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