5 major UX states to design for

Pineapple
The Pineapple Slice
5 min readSep 6, 2019
By Katarzyna Dziaduś on Dribbble

As designers, we aim at creating unforgettable experiences for users. While creating these experiences, it is important to create extensive solutions that can solve every user problem.

It is not just the ideal state in UX that completes a design. A complete experience is ensured only when each state in UX is designed and catered to.

Certain experienced designers also tend to make the mistake of creating designs that only follow the ideal journey for the user, solving only a part of the entire problem.

This leads to creating confusion and distress should the users encounter problems related to other UX states.

This article explains the 5 fundamental states that a designer should account for while creating digital experiences.

1. Ideal state

The ideal state is a positive journey for the user and is usually the first state that is thought about while creating the UX design.

It is the most optimum scenario that the user will find himself in, without facing any errors or system failures. The screen is populated with all the content displayed optimally.

2. Loading state

As the name suggests, the loading state is the screen or state shown to the user while the data is being fetched in the backend, a download is in progress, etc. This screen is necessary as it makes the user aware that the system is working to retrieve data and has not crashed.

Typically, progress bars and spinners are useful for the loading state. However, they come with an embedded problem, as noted by Luke Wroblewski while experimenting for Polar. Watching a progress spinner is like watching a clock tick. The longer you watch, the slower the time seems to pass. This could result in the user dropping off from the site as the wait time has seemingly increased.

Modern applications and websites are moving towards Skeleton screens and motion graphics to show loading state. This maintains user interest and helps them keep engaged and prepared for the content which is going to appear.

3. Partial state

When a user has recently started using a system, it is possible that optimal content is not available to be displayed or the content has to be as and when the user takes actions. Usually, apps tend to bypass the partial state by asking for information and preferences upfront.

While designing a screen for the partial state, the designer should keep the following things in mind:

  1. What happens if the user is shown only a few content pieces on their page?
  2. How can I get the user to interact more with the system and, eventually, get to the ideal state?
  3. What can I do to reduce the time period for which the partial state is shown to the user?

Usually, new users tend to decide within 3 to 7 days of using the app if they want to continue using the app. This is the crucial time within which the designer should aim to move the user to the ideal state through engagement.

4. Blank state

This state is usually skipped by the designers. A lot of credit goes to how blank states are only encountered by 2% to 5% of users.

Due to such a low percentage of users actually stumbling across these screens, designers don’t find it worth their while to design blank states and, instead, choose to focus their energy on screens that hold a higher priority and visibility.

Due to the lack of appearance, designers also tend to skip them subconsciously.

This thought, while perfectly valid, can be a big hindrance to positive user experience. Blank states, if not well designed, can perplex the user into thinking that the system is broken. Hence, it becomes very necessary for a designer to design blank state screens for an enjoyable experience.

Blank states usually occur during:

  1. Setup — The user has just started using the product or service, such as cloud storage like Dropbox or Google Drive.
  2. User clearance — User can clear the content when he has attended to all the tasks, like in a Task Manager app.
  3. Error — There is an error, either caused by the user or the system, such as network issue or system crash.
  4. No result — Occurs when there is nothing to show. This usually happens when the search keywords are incorrect or there is no data to retrieve.

Instead of letting the user guess what the problem might be, it is beneficial to inform the user why the screen is blank and what steps can be taken to populate data on the screen. CTAs and help text are standard ways designers can guide the users during blank states.

Using empathy and personality to guide the user in taking further steps is a great idea as they provide a personalized experience for the user.

5. Error state

The error state is a type of a blank state. However, the error state is user-generated, like entering a no network zone, or system-generated, like system crash due to server failure.

Error states can arouse emotions of panic and helplessness in the user. To prevent this, error states should be designed to be empathetic and assistive on how the problem can be solved. If the error is system generated, the user should be asked to wait before using the application again.

Like blank states, error states can greatly benefit from empathy and personality to calm the user.

If you like what you read, do clap for us and check out the articles recommended by us below :)

5 UX tips that help you design forms correctly

The art of simplicity in UX design

6 important UX considerations in a dashboard design!

5 secret tips for beginners on design wireframing

Want to say hi? Drop us a line on hello@pineapplestudio.in

Check out our work!

--

--

Pineapple
The Pineapple Slice

We design holistic digital experiences that enrich human lives and help businesses grow. Let’s connect at hello@pineapple.design