Corresponding task from "add a link": T269490: Add a link: onboarding
After the user selects an "add an image" task from the suggested edits feed, the next thing they will experience are full-screen onboarding screens on mobile.
- ====Note: Final copy has been provided below and requires updates and review - see relevant tab for corresponding QQQ in the copy spreadsheet ====
- Navigation
- This task type will have four onboarding screens, 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.
- It should have four stepper dots in the upper left that say, $step number of $total steps
- All screens except the final screen should have the Skip all button in the upper right, and when tapped, the overlay should fade straight to the "add an image" experience.
- Screen 1
- Header: Introduction
- Graphic: robot with moon
- Body header: Images help people learn, but many articles don't have one.
- Body text: You will decide whether a suggested image should be put in a Wikipedia article. [paragraph break] Suggestions are machine-generated, and you'll use your judgment to decide whether to accept or reject it.
- New field Italicised smaller UI text in
Base20Base30: Images come from Wikimedia Commons, a collection of freely licensed images used by Wikipedia. - (see T295810: Add image - italicized text on first overlay screen is too big ) - Blue arrow to proceed to next screen.
- It should have a checkbox with label Don't show again in the lower left, which uses the same logic as the "add a link" onboarding. Until the user checks this, the onboarding should show up every time they start a new "add an image" task. 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)).
- Screen 2
- Header: Introduction
- Graphic: image inspector
- Body header: Look at the suggested image
- Body text: Use the filename, description, and the reason it was suggested to help you decide if it should be placed in the article. [paragraph break] You can also expand the image to view it more clearly.
- Blue arrow to proceed to next screen.
- Gray arrow to return to previous screen.
- Screen 3
- Header: Introduction
Graphic: article
Body header: Look at the article
Body text: Read over the article and think about whether the suggested image will help readers understand the content. Is it appropriate to be displayed in the article?
Blue arrow to proceed to next screen.
** Gray arrow to return to previous screen.
- Screen 4
- Header: Introduction
- Graphic: yes/no buttons
- Body header: Decide if the image belongs
- Body text: The suggestion may be unrelated to the article, low quality, or may not belong for other reasons. Use your judgment to decide whether the suggestion is right or wrong. [paragraph break] For images that you accept, you'll write a short caption, and then your edit will be published. Note that the middle paragraph 2 was removed in the final copy review.
- Blue Get started button.
- Gray arrow to return to previous screen.
Screenshot from Figma (copy may be superseded by corresponding copy task)
Link to designs in Figma (which will include illustration assets):
https://www.figma.com/file/ULhJr1isDstRbGE5vjYDsr/Add-images-structured-task-[Growth]?node-id=3194%3A14531
Illustration assets:
| Step | LTR | RTL |
|---|---|---|
| Step 1 | ||
| Step 2 | ||
| Step 3 | ||
| Step 4 |
