A coffee cup can exist in the following five states .
- Empty cup
- A cup that is being poured with coffee
- Half full/half empty cup
- A broken cup
- A cup full of hot, steaming coffee!
What if I tell you that a UI screen of an app should be designed in these exact five states?
1. Blank/Empty State
Think about the initial state of a UI — during the first run of the app when there is no data to be shown to the user. This is the ‘empty cup’ state.
Design the screen in such a way that a call to action can be shown. Did you notice the “Go shopping” button in the ‘Watching’ screenshot of eBay app?
Visit Empty States website for design inspiration.
2. Loading State
When data is being loaded on to the UI screen, the user should be informed about this activity.
‘Activity indicators’ and ‘skeleton screens’ have to be designed for this. The above screenshot is the skeleton screen of ‘My Orders’ in Flipkart app.
3. Partial State
If the data on the screen is lesser than the ideal state, the users can be prompted to use the app more often or enter more data.
LinkedIn app prompts the user to complete his profile by showing a screen filled with pointers and helpful info.
4. Error State
Think about the errors that can occur on a screen and embed useful info for the users to get out of this annoying state.
Try to design screens that take care of data missing errors, data validation errors in forms and internet connectivity errors. Your users will thank you for helping them out with relevant and contextual messages/action buttons.
‘Location Not Found’ error screen from Uber app is shown above. Observe how the message presents two options to the user to get out of the whole mess.
5. Ideal State
We all know this, right? This is the first state that is designed in any app UI project. A screen full of data is presented in a useful, beautiful way.
The screenshot shown above is the home screen of Gaana music streaming app.
Takeaway
Whenever a UI is being designed, just think about a coffee cup! Design beyond the ideal state of a UI screen to include four more states.
Our mission is to help the users to lead a better life!
Inspired by ‘How to fix a bad user interface’ by Scott Hurff
Coffee icons from The Noun Project, created by Raz Cohen, Adrian Q and Charlotte Vogel.
