Page MenuHomePhabricator

Add an image: captions onboarding dialog
Closed, ResolvedPublic

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:

image.png (1×684 px, 657 KB)

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

Event Timeline

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

Change 732452 merged by jenkins-bot:

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

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

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

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

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.

Figmatestwiki wmf.7 Android
Screen Shot 2021-11-04 at 4.58.45 PM.png (579×337 px, 102 KB)
Screenshot_20211104-163656_Samsung Internet.jpg (2×1 px, 355 KB)

(2) The bullet point text is not justified

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

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.

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.

Figmatestwiki wmf.7 Android
Screen Shot 2021-11-04 at 4.58.45 PM.png (579×337 px, 102 KB)
Screenshot_20211104-163656_Samsung Internet.jpg (2×1 px, 355 KB)

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

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

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

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

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.

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

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

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!