Where to notify someone of an empty list?

Question

Let's say that you have an app and the home page of the app has icons (with text) to link to various actions. One of the actions would typically show you a list of objects that you are subscribed to.

The problem comes in when you are new to the application and haven't subscribed to anything yet. When you tap on the icon to show a list of subscribed items (and don't have anything in that list), we need to show a message explaining that you haven't subscribed to anything yet instead of just showing an empty list.

We could:

1. Show the message where the list would normally be. This makes the context clearer but puts you in a navigation position where the only thing that you can do is navigate back.
2. Show a modal or dialog of some sort on the home page where you tapped the icon explaining that you aren't subscribed to anything. This keeps you on the page where you would need to perform the next action, but makes the context less clear.
3. Some other great idea that we haven't thought of yet - hint!

One indirect way to alleviate the problem is to show some sort of flow to help new custoemrs chose something to subscribe to (which we do), but that doesn't mean that you will definitely chose something, or that you will never have an empty list. The question is given that for some reason there is an empty list, where should we notify customers that the list is empty and how should we do it?

Answer 1

My favorite idea is to take users to the screen/dialog where they can subscribe to items. This can be done either automatically with a (modal) notification or by placing a big Subscribe to lists button in the empty screen of the subscription list. This way users stay engaged with the app.

My second best idea is similar to Marjan's: have a visual indicator of when the list is empty. It can be a Recycle Bin style or simply disabling/graying it out.

Answer 2

Why not have the icon show as "full" when the user has subscriptions and "empty" when there are non yet?

The difference between full/empty could be shown:

• analogous to the recycle bin
• empty piece of paper versus a piece of paper with some lines on it
• hollow circle versus filled out circle
• empty bird's nest versus nest with eggs in it
• lean versus fat [whatever]
• mutedly colored versus brightly colored [whatever]
• person without versus with a bunch of flowers - flowers could be the only brightly colored thing in the icon.
• I could go on, but you get the idea.

I would make tapping/clicking the icon take the user to the normal list and have a message there when it is empty. Using the full/empty difference of the icon on the list as well, will increase the learnability of the icon states.

When going for the difference using colors, just bear in mind that the difference needs to be distinct and easily spotted. I would refrain from totally greying out the icon unless you also disable it, but disabling is no longer considered good practice (I think).

Answer 3

I'm sure the answer lies somewhere within the way lists are recommended to users. Perhaps you could create a UI that adds recommendations to the list in a way that makes it clear they need to be confirmed as list items.

Depending on where the recommendations are made, it might be better to just disable the icon on the homepage to save people the disappointment of opening the empty list.