May 4, 2018
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)
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:
- To educate the users
- Lead them to an action
- Delight them
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
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:
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
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:
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:
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,
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
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 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:
- Informative
- Progressive
- Delightful
Informative
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:
Progressive
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,
Delightful
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.
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.
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:
- When is the right time to show validation? is it After every field? After clicking submit? or During?
- Where will the validation message appear?
- 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.
Facebook:
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:
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
Dropbox:
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
Twitter:
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 😀)
So yes, those are our 7 Design states that demand a space in our wireframes and Sketch files. Feel free to share your thoughts and ideas below in our response section 🤩. For questions or want to say hello, you can ping me at mhariellmosqueriola@gmail.com 📬
Other stories by me
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.
