Page MenuHomePhabricator

Section-level images: suggestions mode
Closed, ResolvedPublic

Description

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

Suggestions mode.png (900×1 px, 246 KB)

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

Suggestions mode Brazil.png (640×360 px, 48 KB)
Suggestions mode Brazil (1).png (640×360 px, 45 KB)

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 optionDetailsFigma specs for next step
Yesaccept suggestionAdd caption onboarding T335228: Section-level images: Add caption onboarding
Noreject suggestionRejection reasons T335229: Section-level images: rejection reasons
Not sureskip suggestion“Not sure” confirmation dialog (Follows the same specifications as Add an image structured task)
xclose suggestionLeave suggestions dialog (Follows the same specifications as Add an image structured task)
minimize suggestion, only available on mobilecollapsed suggestion mode
Full screen imageTriggered 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 metadataImage 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)

Related Objects

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

Change 922562 had a related patch set uploaded (by Gergő Tisza; author: Gergő Tisza):

[mediawiki/extensions/GrowthExperiments@master] [WIP]: Section images: Image insertion logic

https://gerrit.wikimedia.org/r/922562

Sgs removed Sgs as the assignee of this task.May 23 2023, 6:00 PM
Sgs subscribed.

Change 922562 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Section images: Image insertion logic

https://gerrit.wikimedia.org/r/922562

Change 923425 had a related patch set uploaded (by Gergő Tisza; author: Gergő Tisza):

[mediawiki/extensions/GrowthExperiments@master] Section images: Make image insertion logic more robust

https://gerrit.wikimedia.org/r/923425

Change 923425 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Section images: Make image insertion logic more robust

https://gerrit.wikimedia.org/r/923425

I thought it's useful to spell out what changes (compared to the old image recommendation workflow) this task entails. (Not including subtasks.) Please fix if I'm missing something.

  • Modify image insertion logic so images are inserted to the appropriate section, not the top of the article.
  • Modify article validity checking logic so we show the "recommendation not available" error when there is an image already in the selected section, or the recommended image is used elsewhere in the article, or we cannot identify the selected section at all (but don't show the error if the article has images but not in the selected section)
  • Add an "image placeholder" when the editor loads, to be replaced by the actual image when the user clicks "Yes" in the dialog.
  • Modify the desktop version of the dialog so instead of sticking to the bottom of the screen, it sticks to the bottom of the image placeholder.
  • Some text changes to the dialog - "section" is added to the header, the paragraph below the header and the paragraph above the buttons + the section name is added to the paragraph above the buttons.

(Btw do want to use the placeholder + modified dialog placement for article-level image recommendations as well, or only section-level tasks?)

kostajh changed the task status from Open to In Progress.May 31 2023, 1:41 PM

Change 927128 had a related patch set uploaded (by Gergő Tisza; author: Gergő Tisza):

[mediawiki/extensions/GrowthExperiments@master] Section images: Refactor VE node handling

https://gerrit.wikimedia.org/r/927128

Change 925011 had a related patch set uploaded (by Gergő Tisza; author: Gergő Tisza):

[mediawiki/extensions/GrowthExperiments@master] [WIP] Section images: Implement image placeholder

https://gerrit.wikimedia.org/r/925011

Change 927128 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Section images: Refactor VE node handling

https://gerrit.wikimedia.org/r/927128

Change 927761 had a related patch set uploaded (by Gergő Tisza; author: Gergő Tisza):

[mediawiki/extensions/GrowthExperiments@master] [WIP] Section images: Update main dialog

https://gerrit.wikimedia.org/r/927761

Change 925011 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Section images: Implement image placeholder

https://gerrit.wikimedia.org/r/925011

Change 927761 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Section images: Update main dialog text

https://gerrit.wikimedia.org/r/927761

Change 929172 had a related patch set uploaded (by Gergő Tisza; author: Gergő Tisza):

[mediawiki/extensions/GrowthExperiments@master] Add image: Don't scroll on desktop in caption step unless necessary

https://gerrit.wikimedia.org/r/929172

Change 929173 had a related patch set uploaded (by Gergő Tisza; author: Gergő Tisza):

[mediawiki/extensions/GrowthExperiments@master] [WIP] Section images: Fix scrolling behavior

https://gerrit.wikimedia.org/r/929173

Change 929172 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Add image: Don't scroll on desktop in caption step unless necessary

https://gerrit.wikimedia.org/r/929172

Change 929173 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Section images: Fix scrolling behavior

https://gerrit.wikimedia.org/r/929173

Change 930237 had a related patch set uploaded (by Gergő Tisza; author: Gergő Tisza):

[mediawiki/extensions/GrowthExperiments@master] Section images: Fix scrolling to placeholder

https://gerrit.wikimedia.org/r/930237

Change 930237 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Section images: Fix scrolling to placeholder

https://gerrit.wikimedia.org/r/930237

Change 930531 had a related patch set uploaded (by Kosta Harlan; author: Gergő Tisza):

[mediawiki/extensions/GrowthExperiments@wmf/1.41.0-wmf.13] Section images: Fix scrolling to placeholder

https://gerrit.wikimedia.org/r/930531

Change 930531 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@wmf/1.41.0-wmf.13] Section images: Fix scrolling to placeholder

https://gerrit.wikimedia.org/r/930531

Mentioned in SAL (#wikimedia-operations) [2023-06-15T13:39:15Z] <samtar@deploy1002> Started scap: Backport for [[gerrit:930531|Section images: Fix scrolling to placeholder (T335209)]], [[gerrit:930535|Section images: update rtl asset with flipped question mark (T335207)]]

Mentioned in SAL (#wikimedia-operations) [2023-06-15T13:40:44Z] <samtar@deploy1002> kharlan and samtar: Backport for [[gerrit:930531|Section images: Fix scrolling to placeholder (T335209)]], [[gerrit:930535|Section images: update rtl asset with flipped question mark (T335207)]] synced to the testservers: mwdebug1002.eqiad.wmnet, mwdebug2001.codfw.wmnet, mwdebug2002.codfw.wmnet, mwdebug1001.eqiad.wmnet

Mentioned in SAL (#wikimedia-operations) [2023-06-15T13:48:56Z] <samtar@deploy1002> Finished scap: Backport for [[gerrit:930531|Section images: Fix scrolling to placeholder (T335209)]], [[gerrit:930535|Section images: update rtl asset with flipped question mark (T335207)]] (duration: 09m 40s)

Change 931608 had a related patch set uploaded (by Gergő Tisza; author: Gergő Tisza):

[mediawiki/extensions/GrowthExperiments@master] Section images: Fix ve.scrollIntoView override

https://gerrit.wikimedia.org/r/931608

Change 931608 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Section images: Fix ve.scrollIntoView override

https://gerrit.wikimedia.org/r/931608

Change 931084 had a related patch set uploaded (by Kosta Harlan; author: Gergő Tisza):

[mediawiki/extensions/GrowthExperiments@wmf/1.41.0-wmf.13] Section images: Fix ve.scrollIntoView override

https://gerrit.wikimedia.org/r/931084

Change 931084 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@wmf/1.41.0-wmf.13] Section images: Fix ve.scrollIntoView override

https://gerrit.wikimedia.org/r/931084

Mentioned in SAL (#wikimedia-operations) [2023-06-20T21:49:29Z] <tgr@deploy1002> Started scap: Backport for [[gerrit:931084|Section images: Fix ve.scrollIntoView override (T339900 T335209)]], [[gerrit:931685|Backport translations from master (T339225)]]

Mentioned in SAL (#wikimedia-operations) [2023-06-20T22:01:35Z] <tgr@deploy1002> tgr and kharlan: Backport for [[gerrit:931084|Section images: Fix ve.scrollIntoView override (T339900 T335209)]], [[gerrit:931685|Backport translations from master (T339225)]] synced to the testservers: mwdebug2001.codfw.wmnet, mwdebug1002.eqiad.wmnet, mwdebug2002.codfw.wmnet, mwdebug1001.eqiad.wmnet

Mentioned in SAL (#wikimedia-operations) [2023-06-20T22:11:59Z] <tgr@deploy1002> Finished scap: Backport for [[gerrit:931084|Section images: Fix ve.scrollIntoView override (T339900 T335209)]], [[gerrit:931685|Backport translations from master (T339225)]] (duration: 22m 30s)

Change 931944 had a related patch set uploaded (by Gergő Tisza; author: Gergő Tisza):

[mediawiki/extensions/GrowthExperiments@master] Section images: Select placeholder when inserting it

https://gerrit.wikimedia.org/r/931944

Change 931712 had a related patch set uploaded (by Kosta Harlan; author: Gergő Tisza):

[mediawiki/extensions/GrowthExperiments@wmf/1.41.0-wmf.13] Section images: Select placeholder when inserting it

https://gerrit.wikimedia.org/r/931712

Change 931712 abandoned by Kosta Harlan:

[mediawiki/extensions/GrowthExperiments@wmf/1.41.0-wmf.13] Section images: Select placeholder when inserting it

Reason:

Flaky Selenium test :(

https://gerrit.wikimedia.org/r/931712

Change 931712 restored by Kosta Harlan:

[mediawiki/extensions/GrowthExperiments@wmf/1.41.0-wmf.13] Section images: Select placeholder when inserting it

https://gerrit.wikimedia.org/r/931712

Change 931712 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@wmf/1.41.0-wmf.13] Section images: Select placeholder when inserting it

https://gerrit.wikimedia.org/r/931712

Mentioned in SAL (#wikimedia-operations) [2023-06-21T20:42:12Z] <kharlan@deploy1002> Started scap: Backport for [[gerrit:931712|Section images: Select placeholder when inserting it (T335209)]]

Mentioned in SAL (#wikimedia-operations) [2023-06-21T20:43:41Z] <kharlan@deploy1002> kharlan: Backport for [[gerrit:931712|Section images: Select placeholder when inserting it (T335209)]] synced to the testservers: mwdebug1002.eqiad.wmnet, mwdebug2002.codfw.wmnet, mwdebug2001.codfw.wmnet, mwdebug1001.eqiad.wmnet

Mentioned in SAL (#wikimedia-operations) [2023-06-21T20:52:33Z] <kharlan@deploy1002> Finished scap: Backport for [[gerrit:931712|Section images: Select placeholder when inserting it (T335209)]] (duration: 10m 21s)

Change 931944 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Section images: Select placeholder when inserting it

https://gerrit.wikimedia.org/r/931944

While reviewing (and re-testing), the following issues have been found:

(1) T348596: [wmf.29] mobile - Console errors for Section level image suggestions guided tour

(2) Mobile only. Quite frequently, the suggestions drawer is not positioned to the image placeholder. The issue was mentioned in T338286: Section-level image - minor UI usability issues as the issue #4 and fixed, so there's probably some regression.

(4) A page with section level image suggestion doesn't scroll to the image placeholder.

Steps:

  • select "Add an image to an article section" task and go to any suggested article
  • The suggestion will be displayed, but not the image placeholder.

Screen Shot 2023-10-10 at 4.37.38 PM.png (1×774 px, 252 KB)

(3) a recently filed regression issue - T348362: [wmf.29] [mobile] Section level image placeholder displays an additional visual element
(4) The intro tour still displays images that overstretched (article level image tour is ok) - filed as T349024: [mobile] Section level image suggestions: intro tour images do not fit viewport width.
Screen Shot 2023-10-10 at 4.37.10 PM.png (1×768 px, 152 KB)

Reviewed the previous comments - since all the issue will be addressed in separate phab tasks, closing this task as Resolved.

(2) Mobile only. Quite frequently, the suggestions drawer is not positioned to the image placeholder. The issue was mentioned in T338286: Section-level image - minor UI usability issues as the issue #4 and fixed, so there's probably some regression.

(4) A page with section level image suggestion doesn't scroll to the image placeholder.

Steps:

  • select "Add an image to an article section" task and go to any suggested article
  • The suggestion will be displayed, but not the image placeholder.

The task description has this spec:

When opening suggestions mode, the section name should always be seen.

The spec actually doesn't require to display the image placeholder, so the above it's a non-issue.