Designing for Various UI States

Empty States

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.

www.emptystat.es/
www.emptystat.es/

Loading States

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.

www.emptystat.es/
https://dribbble.com/shots/2238642-Pull-down-to-refresh-Freebie

Error/Failed States

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.

https://dribbble.com/shots/1926725-Handle-those-errors
https://dribbble.com/shots/2160786-Error-Location-not-found

Success States

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.

https://dribbble.com/shots/1712637-Success/attachments/273902
https://dribbble.com/shots/1523277-Success-Popup-for-Handybook-New-App-GIF

--

--

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