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.
The basic empty states consist of a non-interactive icon, title, text tagline, call-to-action button, and link. 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.
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.|