User story & summary:
As a logged in newcomer, I want a structured task that helps me add an image to a specific section within an article, because then I can learn to edit Wikipedia in a useful way.
Background & research:
Structured tasks break down editing workflows into a series of steps that newcomers can accomplish easily. Newcomer tasks increase newcomer activation (+11.6%), which flows on through to increased retention 1. Initial data shows that structured tasks help improve activation and retention even further 2.
Design:
Desktop:
Desktop Figma designs
For the first iteration we will be using an in-context structured task inspector, similar to Add a link.
The inspector will point to the image placeholder.
Image placeholder specifications:
- 238x238px.
- 2px border radius.
- 2px dotted stroke in #3366CC.
- Default placement: under the section heading on the right.
Mobile:
Mobile Figma designs
When opening suggestions mode, the section name should always be seen.
Inspector is sticky to the bottom of the screen.
The user must tap the header with the chevron pointing downwards to collapse the inspector.
Image placeholder specifications:
- 162x162px.
- 2px border radius.
- 2px dotted stroke in #3366CC.
Copy:
Add an image to an article section
Add this image to the article section “${section title}”?
Acceptance Criteria:
Given I'm completing a section-level "add an image" task,
When I've finished or skipped onboarding,
Then I can view an image suggestion in Suggestions mode with the following options:
| User option | Details | Figma specs for next step |
| Yes | accept suggestion | Add caption onboarding T335228: Section-level images: Add caption onboarding |
| No | reject suggestion | Rejection reasons T335229: Section-level images: rejection reasons |
| Not sure | skip suggestion | “Not sure” confirmation dialog (Follows the same specifications as Add an image structured task) |
| x | close suggestion | Leave suggestions dialog (Follows the same specifications as Add an image structured task) |
| ⌄ | minimize suggestion, only available on mobile | collapsed suggestion mode |
| Full screen image | Triggered when anywhere in the image thumbnail on the image inspector is selected (not only the fullscreen icon area). Uses the existing MediaViewer, but without the bottom image details area. | Full screen image (Follows the same specifications as Add an image structured task) |
| Image metadata | Image details appear in a simple message dialog over the article and inspector contents. There is a link from the dialog to view the image and details on its file page on Commons. Triggered when any part of the image title, description, and ‘view image details’ is selected. | Image metadata (during image evaluation (Follows the same specifications as Add an image structured task) |
