search

elastic / kibana

Your window into the Elastic Stack
https://www.elastic.co/products/kibana
Other
19.82k stars 8.2k forks source link

Product Tour: Discover - Step One #80514

Closed alexfrancoeur closed 10 months ago

alexfrancoeur commented 4 years ago

As part of https://github.com/elastic/kibana/issues/58506 and a follow up from https://github.com/elastic/kibana/issues/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.

image

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

Product analytics questions

Need to open separate telemetry issue to track

EUI component

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

Mockups and prototype

cc: @AlonaNadler @rayafratkina @ryankeairns

elasticmachine commented 4 years ago

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

elasticmachine commented 3 years ago

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

kmartastic commented 3 years ago

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 commented 3 years ago

++ 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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

DECIDE SCREEN

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 commented 3 years ago

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 commented 3 years ago

+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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

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

Screen Shot 2021-03-11 at 1 58 02 PM
shaunmcgough commented 3 years ago

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.

image

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

image
alexfrancoeur commented 3 years ago

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 - https://github.com/elastic/kibana/issues/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 commented 3 years ago

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 commented 3 years ago

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

alexfrancoeur commented 3 years ago

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 commented 3 years ago

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

ryankeairns commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

gif

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.

image

Tour title: View and search data

Step 1

Step 2

Step 3

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)

andreadelrio commented 3 years ago

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

help_menu

gchaps commented 3 years ago

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

Step 1.

Step 2.

Step 3.

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


ryankeairns commented 2 years ago

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

kertal commented 1 year ago

@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 commented 1 year ago

Do we have any metrics on usage of the tour?

kertal commented 10 months ago

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.