[Prototype] Design for in-page help / tutorial system

[snide]

This is a design request for a prototype. The output would be a sketch mock.

---

Requirements

We should build a "slide-in" help system that can also double as a tutorial (read: step by step) walkthrough for planned actions.

Flow document

General reqs

1. Help icon must live in the header and be contextual to the route.
2. Inner links can exist within the page as well that would lead to specific help docs. Example: "Getting started with Kibana".
3. We should assume that the docs / tutorials live as asciidocs from our existing help documentation. This means it needs to account for any formatting (ex: how to deal with images) contained there.

Specifics to see in the mock

1. A multi-step tutorial that has a step-by-step path. For example... getting started.
   • Add your data.
   • Set up your index.
   • Build a visualization.
   • Create a dashboard.
2. A link within the help that can lead you to a specific page inside of Kibana. Also show an example of it causing a focus state in the content.
3. Some manner of completion, either automatic, or through a "I have done this" mechanism.
4. A breadcrumb system to navigate the docs.
5. A search mechanism to do term-based search within the docs, including a search results page.
6. An index view for a section like "Tutorials".
7. Alternate ways the panel needs to exist at smaller resolutions (overlay vs. push).

[alt74]

@snide latest help artboard is in Abstract. quick overview screenshot:

[alexfrancoeur]

@alt74 @snide This flow works great for a reference-able help guide. Loading the docs directly will certainly make life easier and be a forcing function to keep them updated. I love the pop out capability as well. Is this panel sticky until you hit X or will it exit if you click out of it?

What would the behavior here be for a net new user? If you land on discover for the first time, is the expectation that we automatically expand this guide - teaching the user that there is reference-able help always available? Or do we provide a separate experience such as an overlay for walkthrough as previously discussed? I find a more interactive approach more helpful to get started but can see the benefit in utilizing this in help guide as well. I was wondering if a new user was one of the personas we were thinking about for the proposed workflow.

That being said, I understand this may be out of scope for this issue specifically and I plan on kicking off getting started again next week.

[snide]

Good progress.

@alexfrancoeur Yeah, I think the mocks are missing a couple key bits. Marked in red

Functional comments

1. Needs a screen to show how this flow works.
   • What button loads this pane? I'm assuming there is essentially a "Let's get started" or something button within the main UI that loads the pane.
   • Does it load automatically for this example?
   • I also assume there's a top level help icon that launches the help index.
2. Needs the concept of links within the help text that direct you to a section of Kibana.
3. Needs a focus concept that highlights a section in Kibana.
4. Needs a concept of completion. Either "I've done this" or us recognizing something is complete automatically.

Stylistic comments

1. The border colors are too dark. Stick with the format we're using everywhere else.
2. I don't think you need the inner pane for the search. It can just take over the whole area.
3. Is this a movable element? It gives that impression now. What happens to the content underneath? What happens when I click into the lower level content? Does it dismiss?
   • Might want to spell this out with some more fidelity in your mocks. Step through the process.

[alt74]

Updated index pattern mockups in one nice PDF:
indexPattern20170718.pdf

Invision click demo: https://projects.invisionapp.com/d/main#/console/11130132/243590735/preview

Screenshot:

[alexfrancoeur]

Love this @alt74! @cjcenizal can we adopt any of the styling and IA in #12689? I know it's a K6 feature but the threshold based watcher UI seems to have adopted some K7 design

[cjcenizal]

@alexfrancoeur Not at the moment because I'm currently focused on K7 design solely within the context of K7. But we're going to explore the process of migrating K6 to K7 using the new K7 components we come up with and after we've completed that trial, it's possible that we can circle back and look into what you're proposing.