Guide through the interface

[elizavetaRa]

Expected behaviour

The web interface should provide an interactive guide to

• show, what's new in the new release / since the last time user visited the app
• demonstrate important functions of the interface

To discuss:

• Conceptually: the guide consists of different tours, the tour consists of several steps
• Usage of a library for the guide?
• Where should the guide be stored?
• Implementation in web/ as web extension?
• Customization of the guide, injecting of guides
• Advanced: mock-data to demonstrate functionality?

By CERNBox we decided to use shepherdjs liabrary for this purpose. With this library, it's possible to create tour instances built out of different steps. It's possible to attach steps to elements in the interface.

In cernbox@597eefee we implemented "What's new" guide:

[tbsbdr]

Nice, thats something I definitely want. From a users perspective, do those stories sound reasonable to you and meet the Idea?

1 - New features: (Everyday user)

• As a everyday user I want a hint or guide about new features so that I can improve my known workflows.

2 - First-time guide: (first-time user)

• As a first-time user who is afraid of randomly exploring the ui by clicking around, I want a guide that tells me what and how to do the most important things directly within the ui. The learning-experience should be more comfortable that reading the manual.

3 - Skip option (first-time user)

• As a first-time user who wants to explore the user interface by simply trying it out, I want to easily dismiss anything that stands in my way.

4 - Customisation (support employee)

• As a support employee I want to provide easy digestible, custom guidance for my users so that my support efforts are kept low.

Note: We also plan to have a ❓ next to elements that need more explanation: #6590

Your more technical questions are better addressed by @kulmann and team 💪

[elizavetaRa]

@tbsbdr The stories sound good to me

I like the "?" idea. We would need customization/injecting options :)

[kulmann]

First of all, really nice! Fully agree with @tbsbdr

Regarding implementation:

• the lib that you chose makes a good first impression. license is compatible as well (MIT).
• you or us (or both, needs discussion/planning, collaboration would be nice) could implement the tour in the web runtime
• however, regarding the contents of the tour I think a hybrid approach would make sense. Like with the theme.json which is allowed to come from within the bundle or to be loaded via an external endpoint I'd like to have the same for the tour contents. Default content somewhere in the repo (e.g. in packages/web-runtime/tours) and additionally an option for the config.json file to allow externally loaded tours.

What do you think?

[tbsbdr]

Maybe the guide ui can be combined with an announcement functionality, ex. when there is a planned downtime, it could be announced via this UI.

[dragotin]

@elizavetaRa is that still used? Very interesting feature this is - maybe we can discuss that with @pascalwengerter during the workshop.