Design states we’ve been totally forgetting

Riel M
10 min readMay 4, 2018

As UI/UX Designers, crafting interfaces for products is one of the biggest bulk we do in our field. Crafting empathic Dashboards, high conversion rate homepages, easy to fill contact forms, securing payment interfaces and more. But more than these, we also love designing for the ideal, the best case scenarios, that we often neglect the worst cases — the cases which we use to leave behind in our sketches and drop in our mockups (it’s because we’ve been designing hundreds of screen pages!!). And as we keep them hidden in the deepest part of our design conscience, we also become oblivious to its great need by our users and great demand by our developers. We actually need to create these Design states which are out of the ideal.

Design states are interfaces that catch the out-of-ideal user interactions or creates emotional assurance or satisfaction within our user’s journey. It may seem to be left behind by some or most of the designers, but it actually plays a big role in crafting a great product. For without these design states, it feels like you’re doing something over again without being told if you’re doing it right or wrong. Thus, to prevent this from happening, let’s keep in mind these 7 Design states I’ll be sharing about:

1. The Empty State (The Forgettable state)

I call it the Forgettable state for I myself have this as my least priority, only to find out I wasn’t able to create one 😅 . Empty states are mostly neglected, but little did we know that they have the biggest potential in driving user engagement and in retaining users during their deal-breaker moments.

Empty states are the forefront of every app. It is usually seen as the solution for user onboarding or when there’s no content yet to be shown. A solution, that instead of letting users torture every button of our beautifully designed screen, we provide them visual cues leading them to what to do or where to go next. We don’t want our users to wander around in our product and end up leaving us.

If that’s the case, what should the Empty State look like?

Well, the main structure of an Empty state should avoid only one thing. It shouldn’t be empty.

As we try to explore different empty states, we’ll get to learn that it needs to satisfy and fulfill these following goals:

  1. To educate the users
  2. Lead them to an action
  3. Delight them
Twitter’s Moments

From the above example, Twitter educates us about Moments and how they’re made. It led us to an understanding that this page serves as a repository of it.

But the next question is, how do I create moments? which now leads us to the second point —

Lead them to an action

Spotify’s station empty state

Aside from educating us about the Station page, Spotify prompts us to do an action. It answers our question (How do I create a station?) by using a call to action, Create New Station.

Another way of leading users to an action is how Traveloka did it in their E-ticket screen:

Traveloka’s Hotel’s E-ticket screen

It doesn’t necessarily have to be a button to encourage an action. A simple and easy to understand copy sometimes is a good way to go 😀

Delight users

Eventbrite’s search results

In Eventbrite’s search results page, we can see that when a user searches for keywords but couldn’t be found, it doesn’t leave you with just a “No Results Found”. It also provides you with events that can be relevant to what you are looking for, which is a delightful experience! And also who knows, you might bump into an event that can be interesting.

Empty states aren’t just confined in user on-boarding, first time interactions, or when no search results were found. Sometimes Empty states happen when you’ve clicked on something that doesn’t actually exist, like in our Design state no. 2.

2. 404 state (Second Forgettable state)

This is a state which we create whenever a user jumps in a screen which doesn’t exist. It happens usually if there’s a broken link or a user typed and invented a URL which is out of the website’s sitemap (I’ve done this once haha). See examples below:

Uber’s 404 page with a brief explanation and directing us to homepage
Codeacademy’s simple but very intelligent 404 page, whose goal is still to educate its user 😉

As we can see, Empty state and 404 page resembles a lot when it comes to goal and structure, and solves almost the same problem. But more than that, there are also states that deals with content structure and layout — Minimum and Maximum states.

3. Minimum

Minimum state is creating an interface with the littlest content. Apart from creating the ideal output, we need to anticipate the instances when users have short article titles, only 1 person going to an event, only 2 featured awards are displayed, and more. Check out Dropbox minimum state example below:

One file as minimum state

Dropbox has a very scalable design when it comes to their Files page. From one file left as the Minimum state, you can easily imagine its looks if hundreds of files are stored (Maximum state). But there are some designs that need tweaking to accommodate too much content, which leads us to Maximum state.

4. Maximum

This state is created to accommodate overflowing information. The usual developers question to designers is, “If there’s a long article title in here, how will it look like?” And as lazy designers who don’t want to go back to Sketch and create the Maximum state, we then start giving directions and pointing at their screen saying “ooh! it’s just easy. Move this section below, add around 8px to the right and align it to the left, then change this to bla bla bla”

And they,

developers do a perfect table flip in their mind

Lesson learned: Never ever give such shit.

And as to answer to design that needs tweaking to accommodate overflowing content, below are good examples of them

Taken from Klook

Klook creates second line to accommodate long titles (left) and creates ellipsis if the title is too long (right). Another example is Youtube’s Show More button for long video description.

Youtube’s “Show More” button to allow users to see full description

Youtube’s design solution for long lines of content is really good. It shows snippet about the video without bombarding the users with a very long content.

5. Loading state

Waiting in line is such a pain, and also waiting for your online request to be sent shares the same way. Thus, Loading states take the spotlight whenever the word “Waiting” comes in. Loading state gives us a peace of mind that our actions weren’t in vain, that something is about to show up on our screens. Instead of giving our users a blank screen while they wait for miracles to happen, a loading interface wouldn’t hurt to create.

And just like the Empty state, Loading states also has its structure to be effective:

  1. Informative
  2. Progressive
  3. Delightful


The user must know that loading is actually taking place. A short copy or a simple “Loading…” will suffice the need of user information. But sometimes, if loading will just take place for less than a second, an animation is the good way to go like the one below:


Loaders as well need to show progress (obviously they have too!). One good practice is filling up a shape (can be a circle, rectangle, triangle or whatever you prefer), or placing a counter to show how much progress has been made. This kind of practice will be very helpful for pages/screens that will require a lot of user’s patience. And lastly,


I’ve been an avid player of PlayerUnknown’s Battleground or also known as PUBG. And one great design that I’ve observed is how they utilized very well the 60 seconds waiting time before the match starts. The 60 seconds allows players to interact and wander around the area, which leaves us all unconscious that a minute has already gone by.

PUBG’s waiting screen before the match starts *taken from youtube (credits to the owner)*

Another good example is loading state in Slack:

It has quotable quotes which is delightful to see especially if you’re starting your day of work.

6. Hover, Pressed, Disable

These states are tedious task to do for designers (I share the same feeling). We need to provide 3 or more different states especially if you’re dealing with forms and buttons. But painful it may seem to do, one tip I could share is, make it a habit to create them at the very beginning of your interfaces. We usually neglect this part, and only do it when our developers tap our collective shoulders during hand-off, asking us how it would look like if a user clicks a button, clicks on a field etc.

Button’s different states

7. Validation State

Validation state appears usually in forms, verifying if input is erroneous or not. Designing it seems to be easy. We usually thought of just creating a red outline field box to show error and a green checkmark for valid. But there are actually 3 things we’ve been overlooking:

  1. When is the right time to show validation? is it After every field? After clicking submit? or During?
  2. Where will the validation message appear?
  3. What is the right color for your validation state (error and validated)?

For these questions, let’s check how Facebook, Google, Dropbox, and Twitter does it when it comes to handling errors.


In Facebook, Error state appears once user clicks outside of the field, and the error message only shows when user clicks on it.

Timing: After — User clicks outside of the field

Message Placement: Inline Icon and Tooltip message on user click

Error Color: Red


Google’s error state happens during interaction, that even though you aren’t done filling up the field, an error will occur until you’ve written the correct format. This can be very annoying and can cause pressure to users as they answer because instead of preventing them to commit mistakes, pressure digs in even though you know you’re doing the right thing.

Timing: During interaction

Error Placement: Below the line

Error Color: Red


For Dropbox, Error state appears on Submit button which can be really rewarding. You thought you’ve filled out all the details correctly, but can turn out to be stressful if you’ve filled incorrectly the fields, and have to go back, answer them again.

Timing: After — User clicks on Submit

Error Placement: Above field and tooltip

Error Color: Orange-ish and Red


And in Twitter, error state appears when user finishes typing by displaying the message inline — Real-time validation

Timing: After — User finishes typing (Real-time)

Error Placement: Inline

Error Color: Red

These are the things we need to consider when working on Validation states. On a personal perspective, Real-time validation of Twitter works well for me. It prevents me from submitting an invalid input before hitting the call-to-action button. But so far, an extensive research needs to be done to know the best Error state practices (Feel free to share your opinions in our response section 😀)

More where this came from

This story is published in Noteworthy, where thousands come every day to learn about the people & ideas shaping the products we love.

Follow our publication to see more product & design stories featured by the Journal team.