Because no one likes a blank screen.
Empty states are UI components that are void of content. Use an empty state to educate users and guide them with positive and constructive messaging that makes it clear why the user is seeing an empty state, and what their next steps are.
Pick an image that is relevant to the message, you can download the most current set of empty state icons from the Design Resoures page.
The primary headline should be short and informative.
The second headline should be short and provide more specific details to the supporting content.
The message should adhere to our voice & tone guidelines and provide the user with helpful details about what caused the empty state and if applicable, guide the user on how they might remedy the situation.
If applicable, provide the user with an action that would help them remove the empty state.
If applicable, provide the user with a secondary action to help them remove the empty state or find support.
As stated above, an empty state is when there is no content to show the user. This situation can occur for various reasons but the most commonly seen occurences are.
We searched your assignments but couldn’t find anything related to your search terms.
There are no more assignments to review at this time.
There are no more approvals to review at this time.
There are no resumes to review at this time.
We were unable to find any candidates that matched your search criteria.
We’re sorry but it appears our system is down at this time. It should be back up shortly.
We’re sorry but it appears you are not authorized to view this content.
loaders are short animations that indicates that something is happening in some area on the screen such as waiting for a task to complete, or loading new content.
Choose a loader that is relevant to the message, you can download the most current set of loaders from the Design Resoures page.
The primary headline should be short and informative and explain what the system is doing and what the expected outcome should be
The following examples display proper usage of our loading animations.
