Product Tour: Discover - Step One

[alexfrancoeur]

As part of #58506 and a follow up from #61549, we'd like to add product tours to some of Kibana's core applications. Discover is one of the most heavily utilized applications and it'd be great to provide quick, optional onboarding. Discover will be one of the first POC's for a product tour but if successful, we can begin to adopt across Elastic.

Steps

1. Query bar
2. Time picker
3. Data table fields
4. Expand rows
5. Complete tour

There is descriptive text in the mockups, but we'll need to review text with @gchaps

Requirements

• These tours should only be viewable to new users
  • While we wait on Per-user profiles, settings in Kibana #17888, we may have to rely on local cache. Which means we should probably only focus on new deployments initially
• The tours should be dismissible
• If the tour was complete and others are available (like Dashboard Product Tour: Dashboard #80516), we should give them the option to do that next
• Entry point should not matter. Whether you're coming from the Kibana overview page, file upload, a data tutorial or simply trying out Kibana for the first time - you should be presented with this tour

Product analytics questions

Need to open separate telemetry issue to track

• How many users complete the tour?
• How many users ignore the tour?
• How many users drop out of the tour?
• Where do they drop out?
• Is the cluster successfully using Discover and Kibana after tours have been completed?

EUI component

https://elastic.github.io/eui/#/display/tour

Mockups and prototype

• Figma mockups
• Figma clickable prototype

cc: @AlonaNadler @rayafratkina @ryankeairns

[elasticmachine]

Pinging @elastic/kibana-core-ui (Team:Core UI)

[elasticmachine]

Pinging @elastic/kibana-design (Team:Kibana-Design)

[kmartastic]

Thinking about the Product Tour for Discover.

Based on my observations of people using Kibana (not just Discover), and I know it's not Left-to-right-and-down, but I think the Time picker should be first.

I like this order, including one additional stop.

1. Time picker
2. Query bar
3. Change index pattern
4. Fields > Add Field
5. Expand rows
6. Complete tour

@ryankeairns @timductive @alexfrancoeur

[alexfrancoeur]

++ I like it, the only thing I'd call out is change index pattern. It's possible they may only have one, it's possible they may have more than one. So something we either need to conditionally support or just call out regardless

[rayafratkina]

Also changing index pattern can disrupt the query. What about

1. Select/Change index pattern
2. Time picker
3. Query bar
4. Fields > Add Field
5. Expand rows
6. Complete tour

[ryankeairns]

Regarding the "Select index pattern" step, it may just be something the user reads and clicks 'Next'. In other words, even if there were only one, or they don't want to change it, it can still provide a helpful description of what it does.

[shaunmcgough]

Hi there, I've had a chance to review this with @ryankeairns and @gchaps and have some ideas. For now, I've put them in a document here. The major change is that we have two screens with three tour parts each. The first, a DISCOVER screen, allows anyone to quickly fill out the three important fields to Discover success, Data Source, Date Range, and Search. The second, DECIDE, empowers a user to quickly do something with the results.

DISCOVER SCREEN

• Data Source
  -- Select an index pattern, choose your default index pattern, or be prompted to use demo data or import a CSV if you don’t have any data.
• Date Range
  -- Pick a date range
• Search (Enter a query)
  -- Links to KQL info as well

DECIDE SCREEN

• Filter
  -- Expand a field for top values. Then filter all that data
  -- Drag and and drop on histogram
  -- Table controls
• Visualize
  -- Go to Dashboard
  -- Go to Lens
  -- Go to Data Visualizer
• Share
  -- Export to csv
  -- Email
  -- Get a link

This is open to ideas and changes, and we want to get this right and make it simple, so please comment here or in the doc.

[alexfrancoeur]

I think the intent is to provide the first true product tour in Kibana that can be used across features, products and solutions. At the moment, this exists in the form of an EUI product tour component. When we say screen, what exactly are we referring to? For Discover, it sounds like each tour component would be data source, data range and search. Correct? I guess I'm not completely following the next step. Is it a choose your own journey to the next product tour? Even with the doc, I'm not completely sure of what UX is being proposed. If the analyze team feels this is the best step by step approach to introducing someone to Discover and subsequently the rest of the applications, then I think a good next step would be to revisit designs.

Generally, for a new user, Kibana can be overwhelming. So if we're able to provide bite sized tours to onboard users to a new app (discover, lens, dashboard, etc.) then we should. I'd aim to keep this as simple as possible for the first iteration. We have an EUI component already, there is some prior art in Lens for empty data we can work off of as well. If we aim for simplicity, it's really about choosing what portions of discover we want to highlight for onboarding.

[ryankeairns]

+1 to Alex's suggested approach. This will be our first real tour (aside form single step uses) so there likely will be some technical PoC-style work here. Focusing on the existing component and working toward a contained (i.e. within Discover) tour seems like a good place to start. Switching to another design/page layout will start us back at square one.

To get this moving, I would propose having @shaunmcgough and the docs team nail down the copy and steps, using the current EuiTour component, and having an engineer attempt to build it out. I've provided some previous designs that can be used as a guide on laying out content inside the tour stops. Let me know if you need something further else we can review as it gets built.

[gchaps]

docs wrote some copy a while based on an early protoype of the EuiTour in Discover. We can start there and iterate on it with @shaunmcgough.

[shaunmcgough]

I am a fan of the approach, and view this as best in stages. We can get the user to find results quick, and then get them to act on them in the next round. I agree we should use the existing tour stuff, or prior art. Graph also does this concept well (like Lens).

[gchaps]

@shaunmcgough and I worked on this tour. We see this as a single-page tour, with links to relevant content:

• Blue links in steps pop-up relevant controls.
• Question marks links to docs.
• "See it in action" links to the video.
• Smiling face lines to feedback.

@alexfrancoeur and @ryankeairns, let us know your thoughts.

[shaunmcgough]

One minor update here to the screenshot of our rough design of the tour modal. Not the smiley in the lower left? This is to provide feedback and also capture sentiment. We will need telemetry for sentiment if we don't have it, and also perhaps enhance the current feedback loop along the way. I'm fine just getting it out there first, and then enhancing those last bits later in the name of progress over perfection.

To elaborate on what it would look like when you click the feedback smiley, this is what it looks like in MS Office 365.

[alexfrancoeur]

Sorry for the delayed response all, I appreciate the bump @shaunmcgough

It feels like we can split this initiative into two phases. What do you think about splitting out the future work into a separate issue and calling this one MVP?

1. What's the minimum steps required to make new users successful in Discover with the components available today?

• I'll defer to the Analytics experts as to what those steps should be. @AlonaNadler came up with some good steps originally, and it looks like we're simplifying even further with reducing the steps
• Assuming we have the content down and steps chosen, we should be able to move pretty quickly into execution mode given the prior art that already exists today. During this phase, I'd encourage the team to think in a generic fashion during implementation. As soon as this is implemented, I imagine many other teams will want to take advantage
• Without users (WIP - Object Level Security, Phase 1 #82725), we may need to rely on local storage to persist state. Not ideal, but it's a good first step

2. Our ideal state for tours with feedback included

• I agree with you Shaun, I think a feedback mechanism for product tours (and other future suggestions) will become necessary to understand our users sentiment and provide real time feedback. This feels like a much larger lift than phase 1 though
• We could consider this a good use case for event telemetry in the future, but there may be other ways we can understand the success of a tour as well
• Based on how well we see phase 1 works in the wild, we may want to tweak our designs / approach anyway
• We haven't discussed it here, but I imagine we'll want to gamify new user onboarding eventually. How do these product tours fit in that scenario?

[shaunmcgough]

I agree @alexfrancoeur, and thoughts:

1. Three steps, all on one tour stop (Select date, Select Search, and Select Index). I guess you could say hitting Query is the final step. Also, in order to be successful, we link to docs and video help right from the tour page. Of course, if the user does not have data, they don't get to the tour, they get prompted already to add some demo data, etc. +1 and yes on all your other thoughts from me.
2. I will open a new issue for part II of the tour, per your idea (which is needed), and link here. We have spoken about splitting the tour off into the 2nd step of taking action on the results, e.g.

[elasticmachine]

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

[alexfrancoeur]

Are there plans to pick up this work soon? I mainly ask to understand prioritization and if we're planning to tackle soon, would like to update the broader getting started group.

[timroes]

The Discover Super Tour is planned to be worked on for 7.14.

[ryankeairns]

The Discover Super Tour is planned to be worked on for 7.14.

Great! @andreadelrio , @shaunmcgough , and myself are meeting to prioritize Discover UX work and will provide support on this effort.

[andreadelrio]

Hi all, I'm wondering if we should allow for the user to reopen or regain access to viewing the tour in case they either

a) have completed the tour but need to see it again
b) hit the "skip the tour" button either by accident or because they don't want to go through the tour at certain time but later on they realize they want/need to go through it.

If the answer to the above is Yes, where should this trigger live? Perhaps under the Help menu?

[alexfrancoeur]

heya @andreadelrio I know @MichaelMarcialis and @ryankeairns had thought through this earlier and already have some mockups for an ideal end state. If we want to add this to the scope, we may be able to provide the first iterative step towards that end state.

[ryankeairns]

My sense is that we're going to hit some interesting technical questions with regards to tracking the state of a tour. That complexity may grow as we contemplate the future, multi-tour scenario.

Presuming we want to keep things decidedly simple for this first tour, I think @andreadelrio 's suggestion to allow for restart using an existing UI - such as the Help menu - seems like a good approach. We acknowledge there are likely discoverability issues that exist with that button. However, by keeping these together (docs and tour links) we could address the discoverability concerns, later, as a whole.

Alternatively, we could consider having the restart in the 'Options' menu, but I'll leave that for Andrea, et al, to think through.

Let's keep Michael's original concept in mind, especially as we grow beyond this first tour!

[andreadelrio]

Attaching updated mocks with recently proposed steps. I used the copy Michael already had but Step 1 requires polish. The Learn more link takes user to the docs. Wondering if there's a better label for that button. @shaunmcgough @gchaps please verify copy for each step. Pasting text below so that it's easier to suggest changes.

Tour title: View and search data

Step 1

• Title: Select your data source
• Description: Here you can change the index pattern you’re exploring in Discover. Learn more (link)
• Button: Okay
• Footer: Skip tour

Step 2

• Title: Alter the current date range
• Description: Now try altering the scope of the date range. You can use the date picker’s dropdown menu to select common, preformatted time ranges, or manually enter a custom date range of your own. Learn more (link)
• Footer: Skip tour

Step 3

• Title: Search your data
• Description:

You can use Discover to query your data. Let’s start by using Kibana Query Language (KQL) to perform a search on a single data field value. For example, field: "value".

If you are unfamiliar with the KQL syntax, you can alternatively utilize the add filter menu for guided assistance.

Enter a query, click Update and dig into your results. Learn more (link)

• Footer: End tour

[andreadelrio]

And here's how reopening the Tour from the Help menu could look like

[gchaps]

Here are suggestions for the text from @shaunmcgough and myself.

Step 1.

• Title: Welcome to Discover!
• Description: What data do you want to explore? Select it here.
• Buttons: Next
• Footer: ... | End tour

Step 2.

• Title: Adjust the time range
• Description:  View hits for a particular day, the last year, or whatever time range contains your data.
• Buttons: Next
• Footer: ... | End tour

Step 3.

• Title: Search your data
• Description: Just start typing, and then select a field. We’ll provide suggestions.
• Button: Start again
• Footer: End tour

If you type in a search and then hit enter or the Refresh button, the tour disappears and the search results appear.


[ryankeairns]

Per Product, this is blocked until we have an overall plan for the Analytics product set.

[kertal]

@elastic/kibana-design @ninoslavmiskovic what we're gonna do with this? There have been improvements in this area, but also there's not a plan currently

[gchaps]

Do we have any metrics on usage of the tour?

[kertal]

Closing this because it's not planned to be resolved in the foreseeable future. It will be tracked in our Icebox and will be re-opened if our priorities change. Feel free to re-open if you think it should be melted sooner.