[Discover] Improve empty state page #103602

andreadelrio · 2021-06-29T01:22:14Z

Summary

Closes #86765

Improves the "no results" page in Discover
Added illustration provided by the visual design team
Added the option to remove existing filters as a way to help the user get results.

Checklist

Delete any items that are not applicable to this PR.

Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
Documentation was added for features that require explanation or tutorials
Unit or functional tests were updated or added to match the most common scenarios
Any UI touched in this PR is usable by keyboard only (learn more about keyboard accessibility)
Any UI touched in this PR does not create any new axe failures (run axe in browser: FF, Chrome)
If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the docker list
This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)
This was checked for cross-browser compatibility

For maintainers

This was checked for breaking API changes and was labeled appropriately

elasticmachine · 2021-07-13T00:20:34Z

Pinging @elastic/kibana-app (Team:KibanaApp)

andreadelrio · 2021-07-13T00:23:15Z

@gchaps can we please get your input for the copy on the pink rectangle?

ryankeairns · 2021-07-13T16:54:59Z

+1 for helping people get out of an undesirable situation :)

Not having the back history and just opening this PR for review, the amount of copy struck me as quite verbose making the entire prompt feel a bit jam packed. Could we carve this down even more into, say, a bullet point or two within each section?

gchaps · 2021-07-13T19:54:23Z

Short version

No results match your search criteria

If you are searching time series data, try searching over a larger period of time.
If you applied filters, try disabling them to reveal more matches.
If you still don't see any results, try searching for a different combination of terms.

Using the existing format

No results match your search criteria

Expand the time range
You are searching time series data and no matches were found in the specified time range. Try searching over a larger period of time.

Remove filters from your search
You have applied filters to narrow the search results. Try removing filters to reveal more matches.

Temporarily remove all filters

Modify your query
If you still don’t see any results, there might just not be any matches for your query. Try searching for a different combination of terms.

andreadelrio · 2021-07-13T21:52:53Z

Thank you @ryankeairns for pointing that out and to @gchaps for the suggestions. I've simplified the copy as shown below to cover for three scenarios a) a query exists and there are no filters b) a query exists and there's filters c) there are filters and there's no query. Let me know what you think.

a) A query exists and there are no filters

b) A query exists and there's filters

c) There are filters and there's no query

@timroes I added a big if statement that I'm guessing needs a cleanup, would appreciate your support on that side.

gchaps · 2021-07-13T23:17:09Z

It feels to me that the two paragraphs should either have headings or use bullets to show that they are separate ideas.
For this text:

You have narrowed your search results. Try searching for a different combination of terms or removing filters to remove more matches.

"narrowing search results" is specific to filtering, so I don't think we should include the text about a different combination of terms. Can you use:

You have applied filters to narrow the search results. Try disabling filters to reveal more matches.

Would you ever have a case where there are filters and no query? The title indicates that there was a query.

timroes · 2021-07-14T08:56:38Z

We changed the wording to "remove filters". Since there is a difference between removing them (which makes them gone) and just disabling them, I think we should continue calling it "disable filters" instead.

@andreadelrio I'll have a look at the code/if statement, once we settled on the wording and criterias applied to it :-)

ryankeairns · 2021-07-14T15:22:48Z

+1 to @gchaps point.

@andreadelrio perhaps we could use the EuiDescriptionList component to achieve the section headings. This will help with scannability and may encourage users to read the longer text if the short title seems relevant to them.

Visually, it would good to see how this looks with a more even amount of padding around all four sides. The heavy title may have extra padding so, practically speaking, this may require setting some slightly different padding values to achieve the more-even visual effect.

Let me know if that is not clear, I feel I got a bit wordy :)

andreadelrio · 2021-07-14T18:56:41Z

Would you ever have a case where there are filters and no query? The title indicates that there was a query.

Yes, we could either change the heading per scenario or come up with a more general heading.

It feels to me that the two paragraphs should either have headings or use bullets to show that they are separate ideas.

For this text:

You have narrowed your search results. Try searching for a different combination of terms or removing filters to remove more matches.

"narrowing search results" is specific to filtering, so I don't think we should include the text about a different combination of terms. Can you use:

You have applied filters to narrow the search results. Try removing filters to reveal more matches.

Would you ever have a case where there are filters and no query? The title indicates that there was a query.

Considering this and Tim's comment above, here are the updated three scenarios. @gchaps can you have another look please?

1. Only filters

Heading: Adjust your filters
Description: You have narrowed your search results. Try temporarily disabling filters to reveal more matches.

2. Filters and query

Heading: Adjust your search
Description: You have entered a query and have narrowed your search results. Try searching for a different combination of terms or temporarily disabling filters to reveal more matches.

3. Only query

Heading: Adjust your search
Description: Try searching for a different combination of terms to reveal more matches.

ryankeairns · 2021-07-19T17:17:30Z

Perhaps we can consolidate this into two discrete items and not handle the combined version.

Adjust your filters

Try removing or temporarily disabling filters.

Adjust your query

Try searching for a different combination of terms.

cc:/ @gchaps

andreadelrio · 2021-07-20T01:48:56Z

Perhaps we can consolidate this into two discrete items and not handle the combined version.

Adjust your filters

Try removing or temporarily disabling filters.

Adjust your query

Try searching for a different combination of terms.

cc:/ @gchaps

I like this approach! I updated the code to have these discrete items. This should be ready for a design review @ryankeairns

timroes · 2021-07-20T12:10:34Z

@elasticmachine merge upstream

timroes

Code and texts LGTM

gchaps · 2021-07-20T14:53:33Z

@andreadelrio Can you provide an updated screenshot?

ryankeairns · 2021-07-20T15:34:06Z

Thanks for the copy updates.

From a visual design perspective, let's try and match this up more closely to the 'No index patterns' empty state. For example: restricted/max-width, smaller illustration (?), double check typography, padding, and margins, etc.

Side note: you can see this when data exists but there are no index patterns present.

andreadelrio · 2021-07-20T16:26:42Z

@andreadelrio Can you provide an updated screenshot?

@gchaps here you go. Do you think we should reduce the first item? it is now a bit lengthy compared to the other ones.

gchaps · 2021-07-20T16:34:21Z

Yes. Remove the sentence "You are searching time series data..." Starting with "Try searching....", makes it parallel with the other two.

… into dsc-no-results

gchaps · 2021-07-21T15:28:57Z

just noticed this. "larger" should be "longer".

Try searching over a longer period of time.

ryankeairns

Thanks for the adjustments. The copy and result (in the description) look great!

gchaps

Copy LGTM

andreadelrio · 2021-07-21T21:18:48Z

@elasticmachine merge upstream

kibanamachine · 2021-07-21T23:36:13Z

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`discover`	378	388	+10

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`discover`	425.1KB	492.8KB	+67.6KB

History

💔 Build #140166 failed 69c10d1
💚 Build #139838 succeeded 7313978
💚 Build #139707 succeeded f92412f
💔 Build #139597 failed 6f84077
💚 Build #138558 succeeded 57032cb

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

Co-authored-by: Tim Roes <tim.roes@elastic.co> Co-authored-by: Tim Roes <tim.roes@elastic.co>

andreadelrio added 2 commits June 28, 2021 18:04

progress

481d2fc

first pass at improving Discover's empty state

785894e

timroes added Feature:Discover Discover Application release_note:enhancement Team:Visualizations Visualization editors, elastic-charts and infrastructure labels Jul 5, 2021

Refine filters/query message

9c5ff7b

andreadelrio marked this pull request as ready for review July 13, 2021 00:20

andreadelrio requested a review from a team July 13, 2021 00:20

andreadelrio requested a review from a team as a code owner July 13, 2021 00:20

andreadelrio added release_note:skip Skip the PR/issue when compiling release notes v7.15.0 and removed release_note:skip Skip the PR/issue when compiling release notes labels Jul 13, 2021

andreadelrio added 2 commits July 13, 2021 14:28

reduce copy

7623a15

update copy to match suggestions

bd340df

andreadelrio requested a review from timroes July 13, 2021 21:56

add EuiDescriptionList and adjust copy

57032cb

update messages to discrete items

6f84077

Merge branch 'master' into dsc-no-results

f92412f

timroes approved these changes Jul 20, 2021

View reviewed changes

andreadelrio added 2 commits July 20, 2021 11:12

addressing visual design feedback and adjusting copy

de62a94

Merge branch 'dsc-no-results' of https://github.com/andreadelrio/kibana…

7313978

… into dsc-no-results

replace one word

69c10d1

ryankeairns approved these changes Jul 21, 2021

View reviewed changes

gchaps approved these changes Jul 21, 2021

View reviewed changes

Merge branch 'master' into dsc-no-results

dc1d0c2

andreadelrio merged commit 09c49f5 into elastic:master Jul 21, 2021

andreadelrio mentioned this pull request Jul 21, 2021

[7.x] [Discover] Improve empty state page (#103602) #106489

Merged

andreadelrio added a commit that referenced this pull request Jul 22, 2021

[Discover] Improve empty state page (#103602) (#106489)

5d71844

Co-authored-by: Tim Roes <tim.roes@elastic.co> Co-authored-by: Tim Roes <tim.roes@elastic.co>

This was referenced Sep 3, 2021

[Index Pattern Management] Show empty prompts in the page contents and don't auto-open flyout #109523

Closed

[META] [Kibana Analytics] Show consistent empty state when no data #111184

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Discover] Improve empty state page #103602

[Discover] Improve empty state page #103602

andreadelrio commented Jun 29, 2021 •

edited

Loading

elasticmachine commented Jul 13, 2021

andreadelrio commented Jul 13, 2021

ryankeairns commented Jul 13, 2021

gchaps commented Jul 13, 2021

andreadelrio commented Jul 13, 2021

gchaps commented Jul 13, 2021 •

edited

Loading

timroes commented Jul 14, 2021

ryankeairns commented Jul 14, 2021

andreadelrio commented Jul 14, 2021 •

edited

Loading

ryankeairns commented Jul 19, 2021 •

edited

Loading

andreadelrio commented Jul 20, 2021

Adjust your filters

Adjust your query

timroes commented Jul 20, 2021

timroes left a comment

gchaps commented Jul 20, 2021

ryankeairns commented Jul 20, 2021 •

edited

Loading

andreadelrio commented Jul 20, 2021

gchaps commented Jul 20, 2021 •

edited

Loading

gchaps commented Jul 21, 2021

ryankeairns left a comment

gchaps left a comment

andreadelrio commented Jul 21, 2021

kibanamachine commented Jul 21, 2021

[Discover] Improve empty state page #103602

[Discover] Improve empty state page #103602

Conversation

andreadelrio commented Jun 29, 2021 • edited Loading

Summary

Checklist

For maintainers

elasticmachine commented Jul 13, 2021

andreadelrio commented Jul 13, 2021

ryankeairns commented Jul 13, 2021

gchaps commented Jul 13, 2021

Short version

Using the existing format

andreadelrio commented Jul 13, 2021

a) A query exists and there are no filters

b) A query exists and there's filters

c) There are filters and there's no query

gchaps commented Jul 13, 2021 • edited Loading

timroes commented Jul 14, 2021

ryankeairns commented Jul 14, 2021

andreadelrio commented Jul 14, 2021 • edited Loading

1. Only filters

2. Filters and query

3. Only query

ryankeairns commented Jul 19, 2021 • edited Loading

Adjust your filters

Adjust your query

andreadelrio commented Jul 20, 2021

Adjust your filters

Adjust your query

timroes commented Jul 20, 2021

timroes left a comment

Choose a reason for hiding this comment

gchaps commented Jul 20, 2021

ryankeairns commented Jul 20, 2021 • edited Loading

andreadelrio commented Jul 20, 2021

gchaps commented Jul 20, 2021 • edited Loading

gchaps commented Jul 21, 2021

ryankeairns left a comment

Choose a reason for hiding this comment

gchaps left a comment

Choose a reason for hiding this comment

andreadelrio commented Jul 21, 2021

kibanamachine commented Jul 21, 2021

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

History

andreadelrio commented Jun 29, 2021 •

edited

Loading

gchaps commented Jul 13, 2021 •

edited

Loading

andreadelrio commented Jul 14, 2021 •

edited

Loading

ryankeairns commented Jul 19, 2021 •

edited

Loading

ryankeairns commented Jul 20, 2021 •

edited

Loading

gchaps commented Jul 20, 2021 •

edited

Loading