Page MenuHomePhabricator

Add an image: tooltip onboarding (future iteration)
Open, HighPublic

Description

NOTE: this "tooltip" style onboarding is not going to be part of Iteration 1. We will save it for a future iteration. We will instead be making the "overlay" style onboarding in T292092: Add an image: overlay onboarding.

After the user selects an "add an image" task from the suggested edits feed, the next thing they will experience is onboarding. Onboarding will contain a combination of overlay and tooltips.

  • Overlay
    • The first part of onboarding is a full screen overlay, similar in structure to the onboarding overlays from "add a link" in T269490.
    • To the extent possible, 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.
    • The only difference with the "add a link" overlays is that there should not be a stepper with the dots that say "1 of 3", etc.
    • It 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 an image" task. When they check it, they should still get the subsequent tooltips, but that will be the last time. This "don't show again" will not apply to other task types, such as "add a link". This "don't show again" will not apply to the separate captions onboarding (see T291715: Add an image: captions onboarding tooltip (PLACEHOLDER)).
    • When the user taps to advance, the overlay should fade to the tooltips over the "add an image" experience.
    • When the user taps the "Skip all" button in the upper right, the overlay should fade straight to the "add an image" experience with no tooltips.
    • Graphic: TBD
    • Header: TBD
    • Body: TBD
  • Tooltips
    • After the overlay, the user should proceed through a series of three tooltips.
    • The article and image inspector should load first, and then the first tooltip should fade in.
    • The tooltips should have steppers that say "1 of 3", etc.
    • The tooltips have "X"s in the upper right to close them. When a user closes a tooltip with an "X", they will not see the subsequent tooltips for that task. This does not apply to the captions onboarding (see T291715: Add an image: captions onboarding tooltip (PLACEHOLDER)).
    • When each tooltip is displayed, we want to gray out the parts of the screen that the tooltip is not talking about, so as to make it very clear to the user the element the tooltip is describing. This should be a black overlay with opacity 50%.
    • When tooltips are displayed, the rest of the screen is not interactive, i.e. the buttons to open up image details or select "yes/no/unsure" cannot be tapped.
    • As the user navigates between tooltips, they should crossfade.
    • First tooltip
      • Points to the image thumbnail in the image inspector.
      • Only the image thumbnail is not grayed out.
      • Has an arrow to advance to the next tooltip.
      • Header: TBD
      • Body: TBD
    • Second tooltip
      • Points to the article title.
      • Only the article title and the article body are not grayed out.
      • Has a progressive blue arrow to advance and a gray arrow to go back to the first tooltip.
      • Header: TBD
      • Body: TBD
    • Third tooltip
      • Points to the suggestion reason at the top of the image inspector body.
      • Only the rectangle including the suggestion reason, image thumbnail, and image metadata is not grayed out.
      • Has a progressive checkmark button and a gray arrow to go back to the second tooltip.
      • Header: TBD
      • Body: TBD

Mockups:

image.png (1×738 px, 455 KB)
image.png (1×2 px, 1 MB)

NOTE: Refer to Figma for up-to-date detailed redline mocks and specs:
https://www.figma.com/file/ULhJr1isDstRbGE5vjYDsr/Add-images-structured-task-%5BGrowth%5D?node-id=3018%3A9560

Event Timeline

MMiller_WMF renamed this task from Add an image: onboarding (PLACEHOLDER) to Add an image: onboarding.Sep 24 2021, 11:35 PM
MMiller_WMF removed MMiller_WMF as the assignee of this task.
MMiller_WMF updated the task description. (Show Details)
MMiller_WMF removed a subscriber: Mmiller0712.
MMiller_WMF renamed this task from Add an image: onboarding to Add an image: tooltip onboarding.Sep 29 2021, 4:49 PM
MMiller_WMF updated the task description. (Show Details)

After the deep dive, we decided to build "overlay onboarding" for Iteration 1: T292092: Add an image: overlay onboarding

Tooltip onboarding will be for a future iteration.

MMiller_WMF renamed this task from Add an image: tooltip onboarding to Add an image: tooltip onboarding (future iteration).Oct 4 2021, 5:29 AM