5 States of modern digital interaction

The apps (read mobile apps & web apps) are made up with many smaller interactions working together in a unanimous harmony to create a joyful experience for user. Defining the whole process of crafting a user experience in just 5 stages would be… just plain wrong. However, At a very basic level of interaction, each action the user takes switches “things” from one state to another state. At an atomic level, filling up input box to At logical level, completing a flow. The entire journey can be mapped using various states of elements in UX. Here I’ve listed 5 such states, which plays a major role & how can you use them to improve the experience of your products.

1. Placeholders/Initial State

Placeholders occupy the empty state before users interact with the app/element. Traditionally they can be used to provide all sorts of information about the context he/she is interacting with.

Let’s get it straight, according to major UX studies, placeholders in input fields are a bad idea. Mainly because they disappear as soon as user starts typing and there is practically no way for a user to “recall” that information. However, modern UX is all about pushing limits. Many major products get away with doing just that — users are getting smarter and even more accustomed to these interfaces.

In addition, since at this state there is not much content available for users to distract, you get a lot of attention on placeholders. This makes them a great place to start product related education or placing a call to action.

One good way which is getting more popular is using labels for primary indication & using placeholders for examples text. Check-out the following shot:


These placeholders can help users understand the function very quickly using reference. In addition, It’s a cool way to start displaying your brand’s personality to users (In this case, at sign-up).

2. Loading states

You’ve clicked that button, now you’re just waiting for the results to pop-up any moment now. But that short span of time is also a state. It’s called the loading state. It can be used in various ways. From using it as an opportunity to display your brand’s personality to using the time to teach them something new about the product. Depending on the use case, there are various approaches. The first principle should be that don’t make users wait at all. However, in practice, that’s not how it works. Things load & it takes time. So, what can be done in addition to displaying a loading circle?

First off, your loading screen can be used to represent your brand. A customized loading screen should be part of the entire brand. One of the main reasons the loading screens aren’t used for other purposes comes from the fact that the duration of wait varies broadly. Games (unlike web) takes long loading time to load content into memory, since the minimum wait time is known — games use this window to educate users about in-game mechanics. Think about what can you teach your users if there is a larger loading period in the app.

Boom Beach loading with showing tips while at it

3. Empty States

Empty states simply indicates that the content you “searched/looked for” is not available. It’s slightly different that your standard 404s. What happens when you search google for something which google doesn’t have —

There are thngs which even google can’t find

Google does two things — It informs you that your search didn’t match any result & it gives you hints about how to improve your search. Though it looks really simple but this is something straight out of a UX book. Empty states play a very important role — It informs user that system doesn’t have the information he looked for & shows him a way to continue using the product (or what should he do to improve results). Always give users something to continue on — specially on empty states.

4. Error States

This state occurs when there is something wrong with product which is stopping users to complete their actions. There is a fine difference between an empty state and error state. From a UX designer’s point of view — Empty states happen when user’s input can’t be processed [Possible error in user input] while error state happens when there is something wrong with the system. Just like the empty state — You can use this screen to communicate with users, should provide them instructions on how to handle things further. However, Providing something to continue on doesn’t apply here as the error needs to be fixed before the product can be used again.

Chrome gives you a game to play while you are offline

5. Success

Yes! success is also a state in the process of UX. it defines a stage where users have successfully completed the action they intended to. At this point of time there are few key points — Informing users with completion or any other further requirements of the process. The best practice is to keep your user informed about the actions they need to take at any state. Success is a bit different. In a lot of applications there is nothing much to do once the core task is completed. It’s useful to create an action loop or provide users the links for repeating the task or perform other similar actions.

Facebook — displaying a successful flow with options to continue

The take away point is that at any point of time users should be aware of what’s happening at any state. In addition these states can be used to guide the user with further steps. And just like rest of the application, these screen should also speak the same language as your brand speaks. Some people takes them to next level and make these screen the stand-out point. [Chrome got a lot of popularity when it first introduced it’s offline game]

What do you guys think about the states and their importance? Do you use states in your UX process? Feel free to connect with me & discuss more about the process of UX.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.