View all blog posts >

Designing for different states in the UI

April 30, 2019

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.

An example of the ideal state in an art collectors app.

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?
An example of the blank state in an art collectors app.

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?
An example of the loading state in an app.

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?
An example of the partial state in an art collectors app.

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.
An example of the imperfect state in a stock portfolio app.

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?
An example of the interactive state in a stargazing app.

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?
An example of the error state in an RSS feed app.

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?
An example of the success state in a subscription app.

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

And if you enjoyed this article then you may want to read my other articles.

The art of creating a good empty view

Tips to improve design handoff using Sketch and InVision

How we turned 2-star apps into 5-star apps

Tooling our design process

UX/UI Redesign Case Study: Supervalu’s Real Rewards App

My advice to all junior UX designers

Questions we ask during a project design kickoff

Defining our design principles

How to use GitHub for Design Version Control

6 Questions to understand a Product

Want to get in touch?
Even just to say hi 👋

Fill in the form below, and I'll get back to you within 24 hours.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.