Add an image: captions onboarding dialog
Closed, ResolvedPublic
Actions

Assigned To

Authored By

	MMiller_WMF
	Oct 9 2021, 1:10 AM

Description

As soon as is possible after the user has selected "Yes" on the image inspector, an onboarding dialog should appear. This should appear even as the image preview loads and the image inspector animates away, if possible.

Updated final copy below - see relevant tab for corresponding QQQ in the copy spreadsheet:
Dialog should display once per session every time the user comes to this step until they select the Don't show again checkbox. If they arrive at the caption step, then go "back", and then return to the caption step, the dialog should not appear a second time that session.
Header: Write a caption to go with the image in the article
Body: Readers of $PageTitle will see the caption displayed under the image. $PageTitle should be bolded.
Bullet points:
- Review the image details again for information that is relevant to include.
- Describe the image so it’s clear how it relates to $PageTitle. $PageTitle should be bolded.
- Stay neutral by avoiding judgments like “good”, “ugly”, or “beautiful”.
- Write in this article's language: $ProjectLanguage.
Don't show again checkbox is at the bottom of the dialog. After the user selects, they should not see this dialog when they arrive at the caption step in the future.
A single button at the bottom dismisses the dialog: Got it.
This dialog also appears when the user taps the "?" icon while doing the task. In this case, the "Don't show this again" checkbox is not present.

Mockup as of 2021-10-08:

Figma: https://www.figma.com/file/ULhJr1isDstRbGE5vjYDsr/Add-images-structured-task?node-id=3014%3A8599

Details

Subject	Repo	Branch	Lines +/-
AddImage: Export missing i18n string in caption onboarding	mediawiki/extensions/GrowthExperiments	master	+1 -0
Add an image: update copy & QQQs for AddImageCaptionInfoDialog	mediawiki/extensions/GrowthExperiments	master	+55 -21
Add an image: Update bullet style for AddImageCaptionInfoDialog	mediawiki/extensions/GrowthExperiments	master	+2 -1
Add an image: create separate keys for each item in the caption info dialog	mediawiki/extensions/GrowthExperiments	master	+31 -6
Add an image: Caption onboarding	mediawiki/extensions/GrowthExperiments	master	+175 -12

Customize query in gerrit

Related Objects
Search...

Status	Assigned	Task
Resolved	MMiller_WMF	T285587 [EPIC] "Add an image" Iteration 1
Resolved	DMburugu	T289823 Add an image: frontend tasks for initial release
Resolved	• mewoph	T290781 Add an image: captions
Resolved	• mewoph	T292887 Add an image: captions onboarding dialog

Event Timeline

MMiller_WMF created this task.Oct 9 2021, 1:10 AM

MMiller_WMF moved this task from Incoming to Ready for Development on the Growth-Team (Sprint 0 (Growth Team)) board.

MMiller_WMF mentioned this in T290781: Add an image: captions.Oct 9 2021, 1:33 AM

MMiller_WMF mentioned this in T291715: Add an image: captions onboarding tooltip (PLACEHOLDER).Oct 9 2021, 1:35 AM

MMiller_WMF updated the task description. (Show Details)

MMiller_WMF triaged this task as High priority.Oct 11 2021, 2:15 AM

MMiller_WMF updated the task description. (Show Details)Oct 12 2021, 2:31 PM

• mewoph claimed this task.Oct 20 2021, 7:01 PM

• mewoph moved this task from Ready for Development to In Progress on the Growth-Team (Sprint 0 (Growth Team)) board.

Change 732452 had a related patch set uploaded (by MewOphaswongse; author: MewOphaswongse):

[mediawiki/extensions/GrowthExperiments@master] Add an image: Caption onboarding

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

gerritbot added a project: Patch-For-Review.Oct 20 2021, 10:56 PM

Onboarding:

From help button:

addimage_caption_info.gif (1×800 px, 782 KB)

Tgr moved this task from Code Review to QA on the Growth-Team (Sprint 0 (Growth Team)) board.Oct 27 2021, 5:07 AM

Change 732452 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Add an image: Caption onboarding

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

ReleaseTaggerBot added a project: MW-1.38-notes (1.38.0-wmf.7; 2021-11-02).Oct 27 2021, 9:00 PM

Maintenance_bot removed a project: Patch-For-Review.Oct 27 2021, 9:10 PM

Change 735434 had a related patch set uploaded (by MewOphaswongse; author: MewOphaswongse):

[mediawiki/extensions/GrowthExperiments@master] Add an image: create separate keys for each item in the caption info dialog

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

gerritbot added a project: Patch-For-Review.Oct 28 2021, 7:20 PM

Change 735434 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Add an image: create separate keys for each item in the caption info dialog

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

Maintenance_bot removed a project: Patch-For-Review.Oct 29 2021, 3:10 AM

MMiller_WMF mentioned this in T294670: Image instrumentation: captions onboarding dialog.Oct 29 2021, 11:03 PM

Etonkovidova updated the task description. (Show Details)Nov 4 2021, 11:54 PM

Checked on testwiki wmf.7 - the functionality is in place; the UI is the same as in the screen recordings in https://phabricator.wikimedia.org/T292887#7446418

Couple of minor points for Design review:

(1) The size of the popup. In Figma, the popup takes less of the viewport.

Figma	testwiki wmf.7 Android

(2) The bullet point text is not justified

Screen Shot 2021-11-04 at 4.38.57 PM.png (1×822 px, 199 KB)

Wittylama removed a subscriber: Wittylama.Nov 5 2021, 12:48 AM

RHo updated the task description. (Show Details)Nov 8 2021, 12:31 PM

RHo updated the task description. (Show Details)Nov 8 2021, 12:42 PM

RHo mentioned this in T292730: Add an image: copy.Nov 8 2021, 1:56 PM

Cheers @Etonkovidova, I agree point (2) needs revising. @mewoph – could you please make the bullet points justified as noted, as well as update with the finalised copy on the task? Then it all LGTM thanks.

In T292887#7483717, @Etonkovidova wrote:

Checked on testwiki wmf.7 - the functionality is in place; the UI is the same as in the screen recordings in https://phabricator.wikimedia.org/T292887#7446418
Couple of minor points for Design review:

(1) The size of the popup. In Figma, the popup takes less of the viewport.

Figma testwiki wmf.7 Android

Thanks for noticing but this is OK as it appears to be using the standard OOUI dialog style which sets the height this way on mobile.

(2) The bullet point text is not justified

Agree bullet points should be indented and not wrap to left edge.

RHo updated the task description. (Show Details)Nov 8 2021, 7:18 PM

Change 737762 had a related patch set uploaded (by MewOphaswongse; author: MewOphaswongse):

[mediawiki/extensions/GrowthExperiments@master] Add an image: Update bullet style for AddImageCaptionInfoDialog

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

gerritbot added a project: Patch-For-Review.Nov 9 2021, 6:43 PM

Updated bullet style:

Screen Shot 2021-11-09 at 10.42.17 AM.png (1×740 px, 186 KB)

Hi @MMiller_WMF @RHo, a couple of questions about the updated copy:

Describe the image so it’s clear how it relates to $PageTitle. Should there be quotation marks around the article title?

I'm concerned about how Write in $ProjectLanguage. would work in other languages.

Even though we have the localized site language name, that value can’t be made context-sensitive and won’t work in some languages where the word for the language in "Write in $language" and standalone "$language" (language name) are different or when the meaning is context-dependent. For example, in Thai, the word for “English” and “England” are the same, so when it’s used in the context of a language like here, it needs to be “English language” to achieve the meaning we want (otherwise the phrase could be read as "Write in England")

@Tgr suggested Write in the language used by the article ($ProjectLanguage) might make it easier for translators.

@mewoph -- thanks for bringing this up. Here's what @RHo and I should do:

For $PageTitle, we prefer to put it in bold, rather than use quotation marks. Is that okay?
For $ProjectLanguage, we would like it to be: Write in this article's language: $ProjectLanguage.

MMiller_WMF updated the task description. (Show Details)Nov 9 2021, 8:14 PM

Hi @MMiller_WMF, we can put the page title in bold. For the caption placeholder, the text in the spec has the article title is in quotes, should this also be in bold as well?

Change 737762 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Add an image: Update bullet style for AddImageCaptionInfoDialog

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

ReleaseTaggerBot edited projects, added MW-1.38-notes (1.38.0-wmf.9; 2021-11-16); removed MW-1.38-notes (1.38.0-wmf.7; 2021-11-02).Nov 9 2021, 9:00 PM

In T292887#7493804, @mewoph wrote:

Hi @MMiller_WMF, we can put the page title in bold. For the caption placeholder, the text in the spec has the article title is in quotes, should this also be in bold as well?

Hi @mewoph - yes that sounds good. I didn't think about making input placeholder bold, but have updated now on the sheet and Figma.

Change 737980 had a related patch set uploaded (by MewOphaswongse; author: MewOphaswongse):

[mediawiki/extensions/GrowthExperiments@master] Add an image: update copy & QQQs for AddImageCaptionInfoDialog

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

Updated copy example (Czech site language & English UI language):

Screen Shot 2021-11-10 at 10.02.17 AM.png (1×738 px, 195 KB)

Change 737980 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Add an image: update copy & QQQs for AddImageCaptionInfoDialog

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

• mewoph moved this task from Code Review to QA on the Growth-Team (Sprint 0 (Growth Team)) board.Nov 12 2021, 9:20 PM

QutieBot added a project: QTE-TestingOverview.Nov 17 2021, 6:15 PM

Etonkovidova updated the task description. (Show Details)Nov 18 2021, 11:05 PM

Dialog should display every time the user comes to this step until they select the Don't show again checkbox.

@Mew - the following steps won't bring back the dialog:

a user clicks 'yes' - the dialog apears
then a user clicks the back arrow at the header "Add caption" to return to the article
clicking 'yes' again won't display the dialog

A user will see the dialog again on another article.
Should user repeatedly see the dialog every time 'yes' is clicked until "Don't show again" checkbox is checked?

Hi @Etonkovidova I assumed the same the rationale for the onboarding overlay in that the dialog is shown once per session. For the next session, the dialog would only be shown if the user didn't select don't show again in the prior session. Here's the task from Add Link T278498: [testwiki-wmf.36] 'Add links' intro popup is present on View history and in Read mode..

Dialog should display every time the user comes to this step until they select the Don't show again checkbox.

Maybe I'm misinterpreting the spec here. @RHo @MMiller_WMF do we want to keep showing the dialog every time the user goes back and forth within a single session? To me, it makes sense that the user only sees it once for the same article since the help icon also brings it back but I'm not sure if the logic should be more aggressive.

@mewoph -- I think the logic you've implemented is an improvement over the specification. It's a nuance I hadn't considered. Let's keep it the way it is; I've updated the requirements accordingly. Thank for finding this case, @Etonkovidova!

MMiller_WMF updated the task description. (Show Details)Nov 20 2021, 12:05 AM

Etonkovidova updated the task description. (Show Details)Nov 22 2021, 4:02 PM

Etonkovidova closed this task as Resolved.Nov 22 2021, 6:00 PM

MMiller_WMF mentioned this in T298119: Add an image: captions onboarding tooltip (desktop).Dec 21 2021, 5:56 PM

MMiller_WMF mentioned this in T298107: Add an image: basic components (desktop).Dec 21 2021, 6:32 PM

Change 810913 had a related patch set uploaded (by Kosta Harlan; author: Kosta Harlan):

[mediawiki/extensions/GrowthExperiments@master] AddImage: Export missing i18n string in caption onboarding

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

Change 810913 merged by jenkins-bot: