Designing for Various UI States
I will be using examples from different apps that show various states that should be thought about before development starts to ensure users are never confused and that a quality product is built.
There are different types of empty states but for this example I will go over an empty state that is seen when a user first opens an app. Designing empty states are important because not every page of an app will have data or content from the start. A well thought out empty state usually includes an explanation of what should be there and a call to action to engage the user to start on a specific task.
Snapchat does a good job at this by showing that there should be stories displayed but since there are none, they want you to start adding friends.
Audible also does a good job on showing the user what type of content should be displayed and how to obtain that content.
The following is an app that I helped design called Kiwi and here we have an empty state when there are no pending questions to answer and a clear call to action.
Data doesn’t load instantly and certain actions take a while such as sending a large image attachment in an email or syncing information. It’s important to show users that the app isn’t broken and that their action is in progress.
Facebook does a good job on placing placeholders on where the content should appear and has a nice loading effect that you have seen if you use Facebook.
The following is a shot I found on Dribbble from Ryan Keairns that does a good job showing the user that their action is in progress and provides a visual indicator on the current status of their action.
At times we experience areas that have zero reception or users try to do something in an app that is not allowed. Users need to know and be kept in the loop that their action isn’t working with clear indicators.
The following is a shot I found on Dribbble from Ben Dunn that does a good job showing the user’s action is not valid.
If the app needs the user’s location to work, an error state for this needs to be designed incase the user is on airplane mode or the user’s location settings are on private. The following is a shot I found on Dribbble from Ghani Pradita that shows this in a fun way.
If a user completes an action such as sending a message to a friend, it’s important to not keep the user guessing if their message was successfully sent or not. By informing the user that their action was completed, the user isn’t left guessing.
The following shot I found on Dribbble from Phil LaPier does a good job showing the user that their action was successfully completed.
Another popular way success states are shown are through modals that appear after the user confirms the action such as the following shot I found on Dribbble from João Oliveira Simões.