Designing different states of the mobile interface

A common mistake many designers make is to focus solely on creating designs that represent the ideal state of the interface. It s easy to be tempted when the interface is filled with beautifully formatted content. But this approach poses a problem. A large percentage of users are faced with completely different interface states. Conditions with no data or full of errors. And we designers should focus on these states too!

Below is a list of the interface states that I am designing. For each state, I ask myself questions that help me focus on improving the user experience.

Ideal condition

This state should indicate what the screen looks like when it perfectly renders content with perfect data. Unfortunately, this is the only state that many designers design.

Empty state

This state should indicate what the screen looks like when there is no content to display. This could be because the user is viewing the screen for the first time, or the user performed an action that did not cause the content to appear. Here are some questions to help you design this state:

1. What does the screen look like when the user views it for the first time?
2. What does the screen look like when the search does not find suitable content, and how does the screen inform the user about it?
3. What does the screen look like when the user takes an action that removes content?

Boot status

This state should indicate how the screen looks when receiving content or performing some action. There are many ways to tell the user that content is loading, from status indicators and spinners to wireframe screens that gradually load content. Ask yourself the following questions to better design this state:

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

Partial fullness

This state should indicate what happens when only a portion of the content is displayed. It can arise because the user has just started to interact with the content. Therefore, we need to think about how it will look and how to get the perfect condition. Here are some questions to help you design this state:

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

Not perfect condition

This state should indicate what the screen looks like when the received content is not optimal. This can be because the text is too long or short, images are not formatted or not present at all, or all content is presented in the wrong format. Even if the content isn t perfect, it should still be easy to consume and not mislead the user. Ask yourself these questions to better design this state:

1. What does the screen look like if the text content is very long or very short?
2. What does the screen look like if any images are missing?
3. What does the screen look like if some of the content is missing?
4. Is it clear to the user that the content is poor? He shouldn t think that the system is broken.

Interactive state

This state should indicate what the screen looks like when the user interacts with the content. It can be triggered by a click, hover, or some other form of interaction with the content. Ask these questions to help you design this state:

1. What happens when the user clicks on this element?
2. What happens when the user focuses on this element?
3. What happens when the user switches this item?
4. Is it clear to the user that the element has changed because they interacted with it?

Error state

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

1. What happens if a connection error occurs?
2. What happens if the user generates an error?
3. Is the error well-defined and clear to the user?
4. How easy can a user recover from an error?
5. Can we prevent this error in the future?

Successful action status

This state should indicate what the screen looks like when the user has successfully completed a specific task. The user should not wonder if he completed the task. Here are some questions to help you design this state:

1. Is the message clear to the user that the action was completed successfully?
2. How does performing a specific action affect the screen?
3. Does the screen allow the user to perform the following task?

For further reading on the topic

Want to learn more about designing interface states? Then I highly recommend the following articles:

A Comprehensive Guide to Mobile App Design

How not to annoy mobile users

5 tips to improve mobile app UX