The empty state fills the empty space when there is no content to display to the user. It helps prevent user confusion at seeing a blank. It provides an opportunity to communicate and guide the user to the best action to take.
Use an empty state when a component — like a list or table — or admin feature doesn’t have any items or data to display. This includes the first time a user interacts with the item, empty search results, or unconfigured features.
First-time use
- This empty state occurs when a user hasn’t implemented a feature yet.
- Explain what data will be available, and provide guidance for the next step the user can take to populate the data.
User action
- This empty state occurs due to a user action, such as searching, filtering, or completing a process.
- Explain why the data is unavailable and what the user can do, if anything, to display the data. (This empty state message may need to tell the user that no action is required.)
System error
- This empty state occurs when there is data but it can't be surfaced due to a lack of proper permissions, configurations, or other reasons.
- Explain the problem and action to take to correct the issue and populate or access the data.
Content guidelines
Illustration
- A non-interactive image that visually represents the situation with humanity and warmth.
- The illustration is decorative and exempt from accessibility.
Title
- Summarize the action the user needs to take, if any.
- Focus on the step required to populate the empty state with data.
- Start with a verb.
- Be positive.
- For example, Start by adding data assets instead of You don’t have any data assets.
- Be specific — explain what action the user can take to fill the empty state.
- Use sentence case capitalization.
Body
- The body should explain more about the action to take and may include the benefit of populating the data.
- Be specific about what will be available in the space when data is there.
- Be concise so the user can quickly read, understand, and take action.
Action (optional)
- If the empty state needs to take users to another page of the admin dashboard to create or change data, or offer users more information, use a link to navigate to the page.
- Although optional, include an action when relevant to avoid leaving users at a dead end.
- See link
Have questions or need support?
Oktanauts can use the following resources when building with Odyssey:
- Check the Odyssey 1.0 FAQs.
- Join #odyssey in Slack and tag @content to ask questions.
- Attend Odyssey Office Hours on Mondays and Wednesdays from 1-1:30 p.m. PT / 4-4:30 p.m. ET.
- Submit bug reports and feature requests to the Odyssey Jira board.