Empty state

Generic component used to create ADS conforming elements

Empty states are often treated as an afterthought. The empty state has become an essential part of a smooth user experience, providing just enough information, in context, to allow users to continue working in a productive way. The empty/zero state will be a pattern that will be used across Arc’s suite of products.

#Component structure

The basic empty states consist of a non-interactive icon, title, text tagline, call-to-action button, and link. Empty state structure

Within the basic empty state the text tagline and icon are required, while the title, call-to-action button and link are optional.

Non-interactive icon: A non-interactive icon that relates to the situation. The icon selected should be an icon from the component library.
Title (optional): A short and concise explanation. Where possible, write this as the action a user should take. In this example, “Start your gallery”.
Text tagline: Clearly explain the next action a user should take. You may also explain why the space is empty and include the benefit of taking this step.
Call to action button (optional): The button call-to-action should be referenced in the text tagline copy above. The recommended button type is a ghost button; however, another button type can be used if that creates a better user experience.
Link (optional): If there is a secondary action, such as referencing documentation (ALC) for further reading, include it as a link.

Empty states can use one, a few, or all of the components listed above depending on the scenario. Padding, size and order of components should remain consistent.

#Usage

The following table defines different approaches for empty states to match the needs of the user in different situations.

Type	Use cases	Goal of the empty state	When to use
No data empty states	First time use, no data added yet	User understands why there is no available data and what will be available on the page when data has been added or is available. They understand how data gets added.	When data has not been added and to give the user context of why it has not been added.
Onboarding/starter content empty state	First time use	Starting from an empty state, provide users with the ability to contextually onboard, and gain deeper understanding of the product, by prompting them to take action.	When introducing a feature or action that may require more detailed explanation of concepts, a step-through of a workflow sequence, or other information that enhances productivity.

User action empty state	No results when searching	User understands how to adjust search terms or filters to optimize their query.	To provide the user with feedback that there are no results for their search query.
Error management empty state	Permissions or systems issue.	User understands the problem and, if there are corrective actions available, knows what action to take or has options to correct the issue.	When something is amiss or some level of intervention or troubleshooting is required, a higher level of detail and specificity will better support the user.