Last Update: Jan 24, 2023
Platform: Mobile
Designer: Joyce Lian
Intro
If an empty status appears, this can have different reasons. First of all, it should be noted that there is no data or content, but this does not constitute an error condition, as can be the case with a lack of connectivity, for example
Usage
An empty state could have several use cases:
- The resulting screen after completing all tasks in a to-do list manager.
- Starting a new account and there are no data.
- Searching for something in a list and getting no results.
Types
Here are three types of frequently encountered empty states:
- First use – Occurs with a new product or service when there is still nothing to show, such as a new Evernote or Dropbox account.
- User cleared – Occurs when users complete actions such as clearing their inbox or task list, and the result is an empty screen.
- No results/No data – Occurs when there is nothing to show. This can happen if someone performs a search and the query is empty or there isn’t data available to show (when filtering for a date-range that has no data for example).
Structure & Components
Behavior & Interaction
A useful empty state will let the user know what’s happening, why it’s happening, and what to do about it.
- no results found
- You don´t have more notifications to review (You´re all caught up)
- There´s nothing left to do! (you deserve some ice cream)
- Start building your dashboard! (before you can create a chart, we´ll first need to get some data in here!)
Here are some UX best practices for making sure empty screens are designed to be useful, helpful, and informative.
- Empathy. Surprise and delight, emotion and personality are all ways UX designers can create better experiences for using their product. For empty screens, empathic messaging adds variety and creates a more engaging, personalized experience.
- Imagery. Adding some scenic imagery (the background of an empty state error screen, for example) can result in a more pleasurable user experience.
- Helpful Guidance. Empty states can be used to guide the user. A new account doesn't have any projects in play yet, which presents a potentially great opportunity to help the user get started quickly.
Responsiveness and Adaptiveness
The pattern builds on existing UIs elements and behaves according responsive.
Application-specific examples
The empty state pattern should be used the same in all SuccessFactors modules