The purpose of an empty state is to notify the user that the current page contains no accessible content, typically because nothing has been added yet or no results were returned from a filter or search. A clear message is displayed, guiding the user on how to add or set up content.
Overview
An Empty State is shown when a user first visits a screen with no existing content or when a search or filter returns no results. It remains visible until content is added or relevant results are found. These provide clear, contextual messaging, a helpful illustration, and an action to guide users in getting started.
There are three types of Empty States:
- Onboarding: A full-page experience that replaces the default UI to provide an explanation of the section along with an action.
- Inline Onboarding: This is an embedded onboarding experience that appears within the content area, keeping the standard UI visible. It helps users become familiar with the interface and is suited for pages that need less explanation.
- No results: Displayed when a user's search or filters return no matching content.
Anatomy
The layout of an empty state follows a natural left-to-right, top-to-bottom reading flow. Each element is designed to guide the user through understanding the page and taking the next step.
Onboarding
This format occupies the entire body container, excluding the header navigation. It’s typically used for onboarding scenarios, such as when a user first arrives on a screen and no content (e.g., a project or tenant) has been added yet.
- Image: A visual element that supports the message. A default image is provided if a custom illustration is not provided.
- Heading: Presents the user with an introduction about the page.
- Description: Provides context, what the page is for, why it’s currently empty, and how the user can add content
- ‘Add’ action: Allows the user to add their first entity. It should be identical to the ‘Add’ button in the UI.
- Secondary action: *Optional. For example - Certificates have a secondary View Archive button.
- Documentation link: Directs users to the relevant publicly available Octopus Documentation.
Inline
This format sits within the content area, allowing the standard UI to remain visible. It’s used when the page structure is already in place, but a specific section has no data. This helps users stay oriented while still providing guidance or actions.
- Image: A visual element that supports the message. A default image is provided if a custom illustration is not provided.
- Heading: Inform the user that no ‘ENTITIES’ are present, e.g. Variable Sets
- Description: Provides the user with encouragement to perform action.
- ‘Add’ action: Allows the user to add their first entity. It should be identical to the ‘Add’ in the primary header.
- Secondary action: *Optional. For example - Certificates has a secondary View Archive button.
- Documentation link: Directs users to the relevant publicly available Octopus Documentation.
No Results
Displayed when a user performs a search or applies filters and no matching content is found. This format includes a message explaining that nothing was found and suggests broadening the search or adjusting the filters.
- Image: A Default image for no results.
- Heading: Informs the user that ‘no results’ have been found in the query.
- Description: Provides the user with support and encouragement to perform action.
Tone and Imagery
Tone
Empty states should use a tone that is professional, helpful, and friendly. The goal is to support both new and existing customers on their journey toward an optimal setup.
A good rule of thumb is to treat these screens as the first point of contact for customer service. The language should reflect the same approachable, supportive tone that a customer would expect from a helpful team member.
Imagery
All images used in empty states must be illustrative (photography is not permitted). The style of illustration should align with the message being communicated.
Illustrations don’t need to represent the message literally; they can be abstract or symbolic, as long as there's a loose conceptual connection. The goal is to complement the tone and context while keeping the focus on the main message and action.
Example of product illustration.
If no suitable image is available from the existing illustration sets, designers can create a new one using the Assets | Illustration file in Figma Octopus Deploy Team. This file provides a library of components that can be combined to build custom illustrations, which can then be exported as SVGs for use in empty states.
For more information about composing product illustrations, please visit our Product Illustration guide.