To make the empty state clear, follow this pattern:
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
- Icon/illustration (optional): A meaningful icon
- or illustration that represents the solution or context.
-
-
- Title: The title will answer the question. What’s
- happening? Is it an error? Is there data?
-
-
- Description: Why is it happening? Try to provide
- more information regarding why the space is empty and guide the
- user through next actions.
-
-
- Action(s): What will solve the issue? It’s always
- important to lead users to take action or to guide them about the
- next steps.
-
-
- Footer (optional): Use the footer to provide more
- helpful guidance. Use this section to reference documentation or
- to link to an area where users can learn more about the issue they
- are facing.
-
-
-
-
-
+
+
+
+
+ Icon/illustration (optional): A meaningful icon or
+ illustration that represents the solution or context.
+
+
+ Title: The title will answer the question. What’s
+ happening? Is it an error? Is there data?
+
+
+ Description: Why is it happening? Try to provide more
+ information regarding why the space is empty and guide the user
+ through next actions.
+
+
+ Action(s): What will solve the issue? It’s always
+ important to lead users to take action or to guide them about the next
+ steps.
+
+
+ Footer (optional): Use the footer to provide more
+ helpful guidance. Use this section to reference documentation or to
+ link to an area where users can learn more about the issue they are
+ facing.
+
+
+
{/* End of Content section */}
- {/* Usage section */}
+ {/* Types of empty states and goals section */}
Types of empty states and goals
@@ -195,6 +199,47 @@ export default () => (
- {/* End of usage section */}
+
+
+ {/* End of Types of empty states and goals section */}
+
+ {/* Design section */}
+
+
Design
+
+
+
+
+ Most of the time, you just need a vertical layout. The vertical
+ layout is perfect when the content is small. A title and the
+ description are no longer than 2 paragraphs. You can use this layout
+ with just an icon, an illustration or no icons at all.
+
+
+ Use the horizontal layout when you have large contents. When a
+ description has at least two paragraphs, multiple call to actions
+ and possibly a footer. For this type of layout an illustration is
+ required.
+
+ >
+ }
+ >
+
+
+
+
+
+
+
+ {/* End of Design section */}
>
);
From 141aa36db1b0633df8ee0bd5f99e777f73801b52 Mon Sep 17 00:00:00 2001
From: miukimiu
Date: Tue, 23 Nov 2021 16:58:12 +0000
Subject: [PATCH 02/81] More guidelines
---
.../src/images/empty-prompt_icon-dont.svg | 69 ++++++++
.../src/images/empty-prompt_multiple-do.svg | 54 +++++++
.../src/images/empty-prompt_multiple-dont.svg | 78 +++++++++
.../src/views/empty_prompt/guidelines.tsx | 151 +++++++++++++++---
4 files changed, 332 insertions(+), 20 deletions(-)
create mode 100644 src-docs/src/images/empty-prompt_icon-dont.svg
create mode 100644 src-docs/src/images/empty-prompt_multiple-do.svg
create mode 100644 src-docs/src/images/empty-prompt_multiple-dont.svg
diff --git a/src-docs/src/images/empty-prompt_icon-dont.svg b/src-docs/src/images/empty-prompt_icon-dont.svg
new file mode 100644
index 00000000000..b638a38cb06
--- /dev/null
+++ b/src-docs/src/images/empty-prompt_icon-dont.svg
@@ -0,0 +1,69 @@
+
diff --git a/src-docs/src/images/empty-prompt_multiple-do.svg b/src-docs/src/images/empty-prompt_multiple-do.svg
new file mode 100644
index 00000000000..b6c07826536
--- /dev/null
+++ b/src-docs/src/images/empty-prompt_multiple-do.svg
@@ -0,0 +1,54 @@
+
diff --git a/src-docs/src/images/empty-prompt_multiple-dont.svg b/src-docs/src/images/empty-prompt_multiple-dont.svg
new file mode 100644
index 00000000000..08f62aa26cb
--- /dev/null
+++ b/src-docs/src/images/empty-prompt_multiple-dont.svg
@@ -0,0 +1,78 @@
+
diff --git a/src-docs/src/views/empty_prompt/guidelines.tsx b/src-docs/src/views/empty_prompt/guidelines.tsx
index 6ca68130348..aaf90326daf 100644
--- a/src-docs/src/views/empty_prompt/guidelines.tsx
+++ b/src-docs/src/views/empty_prompt/guidelines.tsx
@@ -18,6 +18,9 @@ import {
import vertical from '../../images/empty-prompt_vertical.svg';
import horizontal from '../../images/empty-prompt_horizontal.svg';
+import iconDont from '../../images/empty-prompt_icon-dont.svg';
+import multipleDo from '../../images/empty-prompt_multiple-do.svg';
+import multipleDont from '../../images/empty-prompt_multiple-dont.svg';
export default () => (
<>
@@ -92,41 +95,29 @@ export default () => (
- Type
+ TypeDescriptionGoal
+ Action
-
-
- First use
-
-
-
- No content on screen because it is the first time users are
- interacting with that screen.
-
-
-
- Users understand there’s no data because it is the first time they
- interact with the app. They can clearly understand how to add data.
-
-
-
No data
- No data is available, or the data doesn’t match the filter.
+ No data is available, or the data doesn’t match the filter. First
+ time use.
Users understand why there is no data displayed and what actions
they can perform to make it available.
+
+ Add data
@@ -142,6 +133,8 @@ export default () => (
Users understand why they don’t have permission to access the
content and what actions they need to perform to get access.
+
+ Request permission
@@ -155,6 +148,10 @@ export default () => (
Users understand why the search didn’t match any results and what
they can do to have better results.
+
+
+ Refresh / try again / reformat data or action specific to error
+
@@ -168,6 +165,28 @@ export default () => (
Users understand why they’re facing an error and what they can do to
solve the error.
+
+
+ Reset filter or push to adjust them / Redirect to filters or search
+
+
+
+
+
+ Error page
+
+
+
+ The error pages come from client and server errors — the 4xx and 5xx
+ status code classes.
+
+
+
+ Users understand there is a client or server error and what is the
+ status code.
+
+
+ Go home / go back
@@ -196,6 +215,8 @@ export default () => (
a feature and what actions they need to perform to upgrade the
license.
+
+ Start trial / upgrade license
@@ -215,8 +236,8 @@ export default () => (
Most of the time, you just need a vertical layout. The vertical
layout is perfect when the content is small. A title and the
- description are no longer than 2 paragraphs. You can use this layout
- with just an icon, an illustration or no icons at all.
+ description are no longer than two paragraphs. You can use this
+ layout with just an icon, an illustration or no icons at all.
Use the horizontal layout when you have large contents. When a
@@ -240,6 +261,96 @@ export default () => (
+
+
+
+ Most of the time you just need the plain color with or without a
+ border considering what is the page layout you’re currently on.
+
+
+ In a few scenarios you can consider some color alternatives. Use the
+ following helper tool to find what is the best panel color to use
+ based on your use case.
+
+ >
+ }
+ />
+
+
+
+ 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.
+
+ >
+ }
+ >
+
+
+
+
+
+
+
+
+
+
+
+ When having multiple empty states throughout a page, avoid having
+ multiple primary actions and multiple icons/illustrations.
+
+
+
+ Use secondary actions and no icons/illustrations. This way the
+ visual noise will be reduced and Consider using an illustration or a
+ primary action if you want to make one of the empty states stand
+ out.
+