Nine States of Design

Ensure that your UI elements reflect the nine states of existence.

1. Nothing
What happens before your component does anything? Maybe it’s the first time a user sees it. Maybe it’s not activated yet. Essentially, the component exists but hasn’t started.

2. Loading
The dreaded state. In a perfect world, no one would ever see this; Alas, here we find ourselves. There are plenty of ways to keep your loading state subtle and unobtrusive. Facebook does a pretty good job of this:

3. None
Your component has initialized, but it’s empty. No data. No Items. Now may be a good time to get the user to act (“Do this thing!”), or to reward them (“Good job, everything is taken care of”).

4. One
You have some data. On an input, this may be after the first keystroke. In a list, it might be when you have one item (or one left).

5. Some
This is usually what you think of first. What is the ideal state for this component? Your data is loaded, you have input, and the user is familiar with it.

6. Too many
Woah there! The user has overdone it in some way. Too many results (maybe you paginate them now), too many characters (maybe ellipses?), and so on.

7. Incorrect
Something is not right about the component. An error has occurred.

8. Correct
Good to go! This item has had its needs satisfied.

9. Done
The user’s correct input has been received by the application. They don’t have to worry about it anymore.

These states will repeat based on the page, user interaction, updated data, and pretty much any change of your application’s state. By thoughtfully designing for these changes, you can create a polished experience for users no matter which situation they find themselves in.