Kibana: Redesign and better call to action when users have no index pattern and navigating in Kibana

[AlonaNadler]

Currently, when users navigate in the kibana app without any index pattern they get this page

Several efforts take place these days to improve adding data but nothing address this page

Current problems:

• The existing page shows the entire management screen which has dozens of links most are not useful at that point
• Lots of text but the call to action is not clear
  
• Challenging page since Kibbana tries to educate the user what is index pattern while also routing users to add data

When in that point users have few options:

• I have data in ES, I don't know what are index patterns - explain and create an index pattern
• I have no data:
  
  
  
  • upload a file
  
  
  • use integration to start ingesting
  
  
  • use sample data
  
  

Few options:

• quick win - change text and get design's help if there is no index pattern providing a clear call to action and better representation of the possible options
• don't take users to the index pattern page, go to future onboarding path

cc: @elastic/kibana-design @timroes @rayafratkina @alexh97 @mattkime

[elasticmachine]

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

[cchaos]

@AlonaNadler We can help with this one, can you setup a kickoff and include @miukimiu & @gchaps?

[miukimiu]

Hi @AlonaNadler,

We're currently implementing the following design for the Graph POC. I think something similar might work for this use case.

What do you think?

[miukimiu]

Ops! I missed @cchaos comment. Yes, let's set up a kickoff and we can work on a few ideas.

[AlonaNadler]

This issue is one of the first friction points
We need a solution that:

• explains what are index patterns in simple terms might be helpful to use an example of even a sketch of an index pattern pointing to multiple indices
• suggest what to do next:
  
  
  
  • if you have data in Elastic search -> create an index pattern
  
  
  • if not: upload a CSV, use beats, or use sample data.
  
  

Since it is one of the first interactions in Kibana it needs to be easy, nice visually and clear

[miukimiu]

@AlonaNadler and @cchaos,

Here's the prototype with the two use cases: 👉 Figma Prototype

[gchaps]

@miukimiu Can we see a version of the index pattern with this text:

You have data in Elasticsearch. 
Now, create an index pattern.
Kibana requires an index pattern to identify which indices you want to explore. An index pattern can point to a specific index, for example, your log data from yesterday, or all indices that contain your data.

[gchaps]

For the three cards.

• The description for each card should end with a period.
• The description for the Beats card is not consistent with the other two. It should start with a verb. @dedemorton can you make a suggestion?

[ryankeairns]

Since we're moving away from product icons, generally speaking, we should consider using generic icons (or no icons at all).

I'm also wondering if the order and/or visual weight of the three options should be changed. The feedback I've been hearing of late is to push for real data, so sample data gets downplayed. Depending how far we want to take that, it may get an altogether different treatment (e.g. it's not a card but a separate line of text/link "Don't have any data at hand? Install sample data to see what Kibana can do.")

[miukimiu]

Thanks @gchaps,

Here's the new version of the index pattern: Figma Prototype.

[miukimiu]

Thanks @ryankeairns. I'll try to use generic icons.

[gchaps]

Thanks, @miukimiu. I have one more small change to the index pattern empty state.

Create Index Pattern > Create index pattern (sentence case)

[AlonaNadler]

Nice work @miukimiu :)
@elastic/kibana-app-arch this is a visual change we want to include

Regarding the order when there is no data. From left to right, first on the left the beats option (@mostlyjason not sure if it is you, how should we refer to beats? integrations? integrate to a system?) second the upload file and third sample data

[gchaps]

Re: @ryankeairns comment about the data cards. I have also heard that the push is for real data.
(We are moving toward real data in our Getting Started docs.) I like the suggestion for using a link for the sample data (with a few tweaks to the text).

[lukeelmers]

Also worth noting, the first time a user hits this screen in a session, they'll see a banner at the top that says "In order to visualize and explore data in Kibana, you'll need to create an index pattern to retrieve data from Elasticsearch"

This disappears for the rest of the session after it is dismissed or after ~15 seconds, whichever comes first.

Related discussion here: #63100

[gchaps]

@miukimiu Just re-read the text. I think one more word is needed at the end of the last sentence.

"or all indices that contain your log data"

but don't use bold.

[dedemorton]

Re:

The description for the Beats card is not consistent with the other two. It should start with a verb

If the goal is to get users started, how about:

"Add logs, metrics, uptime, or SIEM data."

Or if we want to be more inclusive:

"Add data from a variety of sources."

You could use "ingest" instead of "add" but I think the current Kibana UI uses "add"

[miukimiu]

Thanks for all the suggestions! 🎉

The design is now updated: Figma Prototype

[ryankeairns]

@miukimiu thanks for the changes! There is one piece of feedback regarding the order that seems to have been missed - Use Beats should be first and Add sample data should be last in the order.

[ryankeairns]

A few design thoughts for the footer :)

1. Since 'Read documentation' is an external link, we should consider using EuiLink's external prop which displays the popout icon. That might also mean removing the training icon though...
2. If we we went that route, then 'Want to learn more? Read documentation' could all be on one line and shrink the size of the footer.
3. The letter spacing on the 'Read documentation' link looked a bit tight, so I updated your Figma link with the EUI text styles for a small paragraph.

[dedemorton]

Tiny issue: make sure the description under "Use Beats" has a period at the end. :-)

[miukimiu]

@ryankeairns based on your suggestions I changed a few things.

I also moved the cards to the Management / Index patterns / Create index pattern page.

I also include a variation of the No data card (page 3 / 3) to explore how it looks like with a few colors.

You can find the updated prototype here: Figma Prototype.

[ryankeairns]

Thanks @miukimiu !!

After all that, I realized I'd type the order wrong 🤦 . I went ahead and made 'Upload a file' first, which is what I intended. My mistake.

This is looking quite nice and friendly :)

[AlonaNadler]

@ryankeairns I wrote above, the order should be. Beats, upload a file, and sample data.
The order is based on what we want users to do.
It is better if a customer uses beats to constantly ingest data than upload a file that is limited to 100Mb. Using beats is closer to real life.
That is also why sample data is the last. We prefer users will not use sample data unless it is their only choice.

Regarding use beats option. @mostlyjason help us out, how to call the beats option? integrations? get data from your systems?

[AlonaNadler]

@mostlyjason suggested Add integration instead of Use Beats

[ryankeairns]

👍 We'll make the order and wording similar on the home/landing page mockups.

Also, as a side note for whomever implements this, there is an outstanding issue to address permissions for the 'Upload file' link on the home page. I presume that solution would be needed here as well. In the case of the home page, we end up hiding that link when proper permissions are not in place: https://github.com/elastic/kibana/issues/63117

Longer term, we would like to move this feature out of ML to a global location.