Designing for different states in the UI

I originally published this article on the UX Design Collective.

A common trap for designers is to only focus on creating designs that represent the perfect state of a user interface. It is easy to design for when everything is full of beautifully formatted content. But there is a problem with this. A large percentage of users experience completely different states. Ones that are missing data or full of errors. And as designers, we need to focus on these states too!

This is a list of UI states that I design for. For each state, I ask myself questions that help me focus on improving the user experience.

‍

The Ideal State

This state should describe what the screen looks like when it displays the content perfectly and with the ideal data. Unfortunately, for a lot of designers, this is the only state that they design for.

‍

The Blank State

This state should describe what does the screen look like when there is no content to be displayed. This might be because its the first time the user has viewed the screen, or the user has performed an action that resulted in no content getting returned to them. Here are some questions to help you design this state:

1. What does the screen look like when a user views it for the first time?
2. What does the screen look like when a search returns no content and how does the screen communicate this to the user?
3. What does the screen look like when the user performs an action that clears the content?

‍

The Loading State

This state should describe what does the screen look like when retrieving content or some action is been performed. There are many ways to let the user know that content is loading from progress bars to spinners to skeleton screens that gradually load content. Ask these questions to help you design this state:

1. Is it clear to the user that the system is responding?
2. Will users perceive this loading indicator as a slow system?

‍

The Partial State

This state should describe what happens when only a fraction of the content is displayed. This might be because the user has only begun interacting with it so we’ve got to think about how will this look and how can get to the ideal state from it. Here are some questions to help you design this state:

1. What does the screen look like if the user has only begun interacting with it?
2. What does the screen look like after the user has added only a single item to it?
3. How can we encourage the user to interact more?

‍

The Imperfect State

This state should describe what the screen looks like when the content returned is not optimal. This could be caused by either very long or short text, imagery that is not in the correct format or missing, or content that is in the wrong format. Even if the content is imperfect, it should still be easily consumable and not confuse the user. Ask these questions to help you design this state:

1. What does the screen look like if text-based content is either very long or very short?
2. What does the screen look like if any imagery is missing?
3. What does the screen look like if some of the content is missing?
4. Is it clear to the user that content is poor? Rather than them thinking the system is broken.

‍

The Interactive State

This state should describe what the screen looks like when the user is interacting with the content. This might be caused by a user click, hover, focus, or some other form of interaction with the content. Ask these questions to help you design this state:

1. What will happen when a user clicks on this element?
2. What will happen when a user focusses on this element?
3. What will happen when a user toggles this element?
4. Is it clear to the user that the element has changed because they interacted with it?

The Error State

This state should describe what the screen looks like when the user encounters a system error. This could be an error caused by the user or by the system such as the loss of an internet connection. Here are some questions to help you design this state:

1. What happens if there is a connectivity error?
2. What happens if the user has caused the error?
3. Is the error clearly defined and easily understood by the user?
4. How can the user easily recover from the error?
5. Can we design to prevent this error from happening in the future?

‍

The Success States

This state should describe what the screen looks like when the user has successfully completed a certain task. The user shouldn’t be left wondering if they’ve completed a task. Here are some questions to help you design this state:

1. Is the message clear enough to the user the action was completed successfully?
2. How does performing a certain action impact the screen?
3. Does the screen allow the user to perform their next task?

‍

Further reading

Do you want to read more about designing for UI states? Then, I’d highly recommend the following articles which influenced this article and describe UI states far better than me.

The Nine States of Design

Designing for Various UI States

How to fix a bad user interface

‍