After the user selects an "add links" task from the suggested edits feed, the next thing they will experience is three onboarding screens.
- When and where
- On mobile, onboarding will cover the whole screen. It should be the next thing the user sees after selecting a task. They should not first see the article they selected and then see the onboarding cover it up.
- On desktop, onboarding will be in modals on top of the article they selected. We want those modals to load as soon as possible when they arrive on the article. Behind the modals, the user should see a greyed-out article.
- Note that the copy for the mobile and desktop should be identical, even in places where the copy in the mockups differs.
- Navigation
- There will be three screens, each with a header, graphic, another header, and a body.
- The screens do not have an "X" to close them. Rather, they have a button that reads "Skip all" in the upper right. When closed, the user should be on the article they selected, ready to do the first link suggestions.
- On desktop, clicking outside the modal should not close it. Only selecting the "Skip all" should close it.
- Navigating through the three screens will advance a "three bubbles" graphic under the header, with a bubble filled in for each screen, and saying "1 of 3", "2 of 3", "3 of 3".
- The first screen should have a "Don't show again" checkbox in the lower left. Until the user checks this, the onboarding should show up every time they start a new "add links" task. This "don't show again" will not apply to other task types, such as "add images". Those will have their own "don't show again". The checkbox can "count" as soon as it's checked, or only if the user completes the onboarding -- that can be up to engineers.
- In the lower right of the screens is the progressive button to advance to the next screen. On the first two screens, it will be an arrow. On the third screen, it will say "Get started".
- In the lower left of the second and third screens is an arrow button to go back to the previous screen.
- There should be sliding transitions as the user advances and goes back through the screens.
- Implementation notes
- Here are some ideas from engineers about how to make sure the users sees the onboarding before they see the article:
- "One way we could probably mitigate this is hide/obscure the article while the page and the script load, so that the user would see a blank page (or some sort of spinner animation) while they wait for the onboarding to arrive."
- "Another idea would be to show the onboarding dialog on Special:Homepage, and “Get started” takes you to the article opened in Edit mode. Although the default behavior in opening a page in Edit mode is to show the article then dim the background while the editor loads. But if we show the dialog on Special:Homepage then we can’t preload the editor, which causes a performance slowdown."
- "We could top load it, but that comes with some performance sacrifice."
- "On desktop, the onboarding is a modal over the article. So we might end up with a divergence in implementation."
- T269654: Add a link: guidance content specifies how this same content should be made available in the help panel once the user has started the task, like how we make "quick start tips" available for classic maintenance template tasks. On mobile at least, the onboarding shows up via the help panel, the same way that quick start tips show up for maintenance template tasks, but without the image shown in the onboarding screens.
- "Technical musing: while the user is viewing the onboarding, we should preload the VE code, the article's Parsoid HTML and the link suggestion data. That way the user won't have to wait long for the editor to load once they hit the "Get started" button."
- Here are some ideas from engineers about how to make sure the users sees the onboarding before they see the article:
| Mockups of all three screens on mobile and desktop as of 2021-03-04: |  |
NOTE: Refer to Figma for up-to-date detailed redline mocks and specs:
Mobile: https://www.figma.com/file/2SONd8P1tsexIB5coMOp8h/Growth-Structured-tasks?node-id=181%3A65
Desktop: https://www.figma.com/file/2SONd8P1tsexIB5coMOp8h/Growth-Structured-tasks?node-id=112%3A0
SVG Image assets
| LTR | RTL |
|---|---|
| updated Mar 11 | |
