Design states we’ve been totally forgetting

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)

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?

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)

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

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

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

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

  1. Informative
  2. Progressive
  3. Delightful



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,


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

Button’s different states

7. Validation State

  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

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



Filipino based in Syd, AU. Brainfart--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store