Onboarding Status and "Slides" design decisions

Hi everyone,

as part of the proposals on Onboarding (e.g. Proposals for improving the Onboarding Experience and https://design.xwiki.org/xwiki/bin/view/Proposal/OnboardingAnalysis) we started some discussions. First of all, we will split the work between “Admin onboarding” (also known as Distribution Wizard right now), and “User onboarding” (using the Tour Application right now).

For Admin Onboarding we decided to rely on a “Slides” design as originally proposed by @tkrieck, which is already close to what we have: a dialog, with steps and buttons to navigate among those steps. For User Onboarding, the decision is to go towards another decision allowing users to directly performs action, as originally proposed by @gabrielc, we’re still gathering inputs on how it should behave in Guided Tutorial Extension Proposal #1 .

Regarding the “Slides” technology, I started to gather a bit the needs and to look at existing technology that we could reuse (documented in https://design.xwiki.org/xwiki/bin/view/Proposal/AdminOnboardingthroughSlidesDistributionWizardRevamping). But since the number of UI concepts is very small and that I don’t really see maintained libraries that would fit exactly our need, I think I prefer to develop our own internal library, inspired from existing work. Knowing that this library would be pretty small as it would only contains 3 concepts (the dialog, the steps, the browsing buttons).

3 Likes

LGTM, thanks.

Nice! Thank you @surli

Thanks @surli lgtm

About that, we need to check how well this maps to the Abstract Design System (ADS).
If we find limitations we’ll need to see how to improve ADS to support them.
Note that I’m working with @tkrieck to have a implementation of ADS matching the flamingo skin (Loading...).

1 Like

Hello,

The driver.js library claims that it can be used anywhere a modal or an overlay is needed, so it might be worth a look. But it’ll still need to be customized to the XWiki style (you can define custom DOM to make a popup take up the entire screen), and functionality regarding forms is not included.

Basically use it for overlay functionality mostly.

1 Like