Empty prompt guidelines
Anatomy
A useful empty state will let the user know what's happening, why it's happening, and what to do about it. It can contribute to a more compelling user experience and add more value to the business if done right.
To make the empty state clear, follow this pattern:
- Icon or illustration (optional): A meaningful representation of the the solution or context.
- Title: Answers the question "What's happening?". Is it an error? Is it loading?
- Description: Why is it happening? Explain why the space is empty and guide the users through the required actions.
- Action(s): Your call to actions should answer the question "What will solve the issue?". Lead the users to take action or guide them about the next steps.
- Footer (optional): Use this section to reference documentation or link to an area where users can learn more about the issue they are facing.
Empty state types, goals, and recommendations
The following scenarios detail the most common empty states use cases and provide recommendations for use with EuiPageTemplate.
What is the page template?
- Description
First time use.
- Goal
Help users understand how they can start using the product.
For no data use cases, consider using a
EuiCard. In Kibana, you just need to pass a no data configuration into your KibanaPageTemplate(external, opens in a new tab or window) to display a specific UI that guides users to add data.- Action
Actions specific to first use. For example: “Add cases”, “Create job”, “Add workpad”.
- Recommended panel color
Set
color="subdued"to make users not getting distracted and focus on the content.Consider the transparent color if the empty prompt is contained in another component.
Design
Vertical vs. horizontal
The vertical layout is perfect when the content is small — a title and two paragraphs at most. You can use this layout with an icon, an illustration, or no icons at all.
Use the horizontal layout when you have a long description, multiple calls to action, and a footer. For this type of layout, an illustration is required.
Use the vertical layout when the text is 1 to 2 sentences.
Use the horizontal layout when you have a long description, and you can provide an illustration.
Icons and illustrations
Icons and illustrations must first and foremost communicate meaning. They are also an opportunity to delight users and show our Elastic brand.
When using an illustration, bear in mind that they stand out a lot. Use one illustration per page. Having multiple illustrations might make the page too crowded.
Do: An illustration works better in a horizontal layout.
Don't: Avoid using icons and illustrations that don't mean anything and are not related to the content.
Learn more links
"Learn more" links are optional. You can use them in your empty prompt to link to documentation where users can get more detailed help.
Include the link after the description when the empty prompt doesn't contain a call to action. If there is a call to action, include the link in the footer.
Add the "Learn more" link after the description when the empty prompt doesn't contain a call to action.
Add the "Learn more" link in the footer when the empty prompt contains a call to action.
Multiple empty states
When a page has multiple empty states, avoid using multiple primary actions and multiple icons or illustrations.
Use secondary actions and no icons or illustrations. This way, the visual noise will be reduced. Consider using an illustration or a primary action if you want to make one of the empty states stand out.
Do: Use secondary actions and no icons or illustrations when displaying multiple empty states.
Don't: Avoid mixing different types of empty states. Be consistent.