Page MenuHomePhabricator

Section-level images: onboarding dialog
Closed, ResolvedPublic

Assigned To
Authored By
KStoller-WMF
Apr 21 2023, 8:17 PM
Referenced Files
F37101564: RTL section onboarding image 1 (2).svg
Jun 12 2023, 3:49 PM
F37099492: Screen Shot 2023-06-09 at 12.44.37 PM.png
Jun 10 2023, 12:43 AM
File Not Attached
F37099490: Screen Shot 2023-06-09 at 12.44.28 PM.png
Jun 10 2023, 12:43 AM
File Not Attached
F37099488: Screen Shot 2023-06-09 at 12.44.17 PM.png
Jun 10 2023, 12:43 AM
File Not Attached
F37099485: Screen Shot 2023-06-09 at 12.44.02 PM.png
Jun 10 2023, 12:43 AM
File Not Attached
F37099456: Screen Shot 2023-06-09 at 12.37.26 PM.png
Jun 10 2023, 12:43 AM
File Not Attached
F37099454: Screen Shot 2023-06-09 at 12.37.14 PM.png
Jun 10 2023, 12:43 AM
File Not Attached
F37099452: Screen Shot 2023-06-09 at 12.37.06 PM.png
Jun 10 2023, 12:43 AM
File Not Attached

Description

User story & summary:

As a new editor, I want to receive onboarding for the section-level "add an image" suggested edits, because then I'll be more likely to successfully complete the task.

Background & research:

This task is important because funnel analysis shows that newcomers who complete onboarding are more likely to successfully complete the task.

Design:

Figma designs

  • For the first iteration of Desktop, we will re-use the existing modal welcome tour that is already in place.
  • Uses existing Desktop multi-screen onboarding modals.
  • Illustrations and copy are adapted from the ones in Add a suggested image and slightly modified to convey a more section-level approach.
Desktop design
Desktop-SE-AI-Onboarding 1.png (566×506 px, 44 KB)
}
Desktop-SE-AI-Onboarding 2.png (566×506 px, 29 KB)
Desktop-SE-AI-Onboarding 3.png (566×506 px, 25 KB)
Desktop-SE-AI-Onboarding 4.png (566×506 px, 35 KB)
Mobile design
Onboarding 1.png (640×360 px, 44 KB)
Onboarding 2.png (640×360 px, 25 KB)
Onboarding 3.png (640×360 px, 22 KB)
Onboarding 4.png (640×360 px, 31 KB)
copy title Images help people learn, but many articles don't have one.Look at the suggested imageLook at both the article and its sectionDecide if the image belongs
copy textYou will decide whether a suggested image should be put in a specific section of a Wikipedia article. Suggestions are machine-generated, and some of them can be incorrect. You'll use your judgment to decide whether to accept or reject them. Images come from Wikimedia Commons, a collection of freely licensed images used by Wikipedia.Use the filename, description, and the reason it was suggested to help you decide if it should be placed in the article’s section. You can also expand the image to view it more clearly.Read over the article and its section and think about whether the suggested image will help readers understand the content. Is it appropriate to be displayed in the section?The suggestion may be unrelated to the section, low quality, or may not belong for other reasons. Use your judgment to decide whether the suggestion is right or wrong. For images that you accept, you'll write a short caption, and then your edit will be published.
Acceptance Criteria:

Given I select a section-level "add an image" task,
When I've never completed this task type before OR I haven't selected "Don't show this again" previously,
Then I'm I receive section-level "add an image" onboarding

Event Timeline

kostajh renamed this task from Section-level images: onboarding to Section-level images: onboarding dialog.May 10 2023, 9:33 AM

Change 920346 had a related patch set uploaded (by Sergio Gimeno; author: Sergio Gimeno):

[mediawiki/extensions/GrowthExperiments@master] WIP Section images: add onboarding dialog

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

I'm failing to export the dialog images from Figma using the "export" function; I get an empty blank image. Could someone help to pull the relevant images. afaic we need 16 different assets: 4 images x 2 platforms x 2 reading directions. cc @JFernandez-WMF @RHo

@JFernandez-WMF @RHo @KStoller-WMF copy suggestions:

Is it appropriate to be displayed in the section?

(passive voice)

Suggest: "Is it appropriate to display in the section?"

For images that you accept, you'll write a short caption, and then your edit will be published.

(passive voice, it is unclear how the user should publish their edit)

Suggest: "After you accept an image, you'll write a short caption, and then you can publish your edit."

@Sgs Sure I can comment them here! Is there a specific image format that you need? I do have the images for desktop and mobile but AFAIK we haven't designed the illustrations for RTL yet (illustrations were being tracked in T332925: Add a suggested section-level image: Onboarding illustrations ). I'll chat with Rita about this and come back to this task.

@kostajh thank you for the suggestions! I'll add them to the copy doc I'm putting together.

@JFernandez-WMF @RHo @KStoller-WMF copy suggestions:

Is it appropriate to be displayed in the section?

(passive voice)

Suggest: "Is it appropriate to display in the section?"

For images that you accept, you'll write a short caption, and then your edit will be published.

(passive voice, it is unclear how the user should publish their edit)

Suggest: "After you accept an image, you'll write a short caption, and then you can publish your edit."

I agree is better to use active voice, I'm gonna go forward and update this for article images unless someone has any argument against.

Sgs changed the task status from Open to In Progress.May 25 2023, 3:14 PM

Change 920346 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Section images: add onboarding dialog

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

FWIW the explanatory images about the dialog don't quite match the dialog design at T335209: Section-level images: suggestions mode.

Per the merged patch ("No RTL assets or mobile were provided yet, add them after clarifications in T332925") moving back to In Progress.

Per discussion in T332925#8914762 no mobile assets are available at the moment so the suggestion is to move forward with the same images from desktop on mobile.

I think this is all done - works on desktop and mobile, in LTR and RTL, as expected.

FWIW the explanatory images about the dialog don't quite match the dialog design at T335209: Section-level images: suggestions mode.

This is still the case (and matches the spec): the dialog is shown at the bottom of the screen, not floating below the image placeholder (like on F36959683). Not significant but thought worth mentioning.

Etonkovidova subscribed.

Copying my two comments on LTR ( https://phabricator.wikimedia.org/T332925#8919328) and RTL
(https://phabricator.wikimedia.org/T332925#8919328):
Issues

  • mobile images are aligned to the right (to accommodate the pagination ("1 of 4") text?
  • RTL has a question mark not flipped

Desktop

Screen Shot 2023-06-09 at 12.24.36 PM.png (1×1 px, 157 KB)
Screen Shot 2023-06-09 at 12.24.42 PM.png (1×1 px, 104 KB)
Screen Shot 2023-06-09 at 12.24.48 PM.png (1×1 px, 99 KB)
Screen Shot 2023-06-09 at 12.26.17 PM.png (1×1 px, 131 KB)
  • Mobile
Screen Shot 2023-06-09 at 12.18.26 PM.png (1×714 px, 141 KB)
Screen Shot 2023-06-09 at 12.19.28 PM.png (1×724 px, 95 KB)
Screen Shot 2023-06-09 at 12.19.36 PM.png (1×726 px, 88 KB)
Screen Shot 2023-06-09 at 12.19.45 PM.png (1×732 px, 116 KB)

Note: On production Add image intro tour has images centered:

Screen Shot 2023-06-09 at 12.20.51 PM.png (1×726 px, 160 KB)
Screen Shot 2023-06-09 at 12.15.25 PM.png (1×724 px, 96 KB)
Screen Shot 2023-06-09 at 12.15.33 PM.png (1×740 px, 91 KB)
Screen Shot 2023-06-09 at 12.15.42 PM.png (1×722 px, 114 KB)

RTL betalabs:

  • Desktop

Add section level image (beta)

"?" question mark as LTR
Screen Shot 2023-06-09 at 12.39.31 PM.png (940×1 px, 120 KB)
Screen Shot 2023-06-09 at 12.39.39 PM.png (930×1 px, 85 KB)
Screen Shot 2023-06-09 at 12.39.46 PM.png (930×1 px, 78 KB)
Screen Shot 2023-06-09 at 12.39.54 PM.png (924×1 px, 94 KB)

compare with Add image (beta)

Screen Shot 2023-06-09 at 12.36.56 PM.png (984×1 px, 122 KB)
Screen Shot 2023-06-09 at 12.37.06 PM.png (986×1 px, 80 KB)
Screen Shot 2023-06-09 at 12.37.14 PM.png (976×1 px, 68 KB)
Screen Shot 2023-06-09 at 12.37.26 PM.png (974×1 px, 92 KB)
  • Mobile

Add section level image (beta)

"?" question mark is LTR
Screen Shot 2023-06-09 at 12.44.02 PM.png (1×744 px, 132 KB)
Screen Shot 2023-06-09 at 12.44.17 PM.png (1×736 px, 82 KB)
Screen Shot 2023-06-09 at 12.44.28 PM.png (1×726 px, 75 KB)
Screen Shot 2023-06-09 at 12.44.37 PM.png (1×720 px, 89 KB)

Thanks Elena and Habib for noting the question mark that's not flipped in RTL :)

@Sgs, could we change the first onboarding illustration in RTL to this one, please?

@Sgs, pinging you (again, sorry!) to make sure you're aware of the issue with mobile illustrations (see Elena's comment above).
It looks like illustrations are cut off to the right on mobile. Please feel free let me know if there's anything you need from me to fix it!

Change 930160 had a related patch set uploaded (by Sergio Gimeno; author: Sergio Gimeno):

[mediawiki/extensions/GrowthExperiments@master] Section images: update rtl asset with flipped question mark

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

Copying my two comments on LTR ( https://phabricator.wikimedia.org/T332925#8919328) and RTL
(https://phabricator.wikimedia.org/T332925#8919328):
Issues

  • mobile images are aligned to the right (to accommodate the pagination ("1 of 4") text?

That's correct, from comments in T332925#8914762, we acknowledge the assets are not perfect but we won't be creating a new set of images to avoid the overlapping issue. The image is hence repositioned via CSS to avoid the collision.

  • RTL has a question mark not flipped

Fixed in 930160 with the latest asset @JFernandez-WMF provided, thanks for the catch! In general, I would say we could save some coding burden if we avoid question marks in graphics when possible. See T327619 and T260283 around problems with Hebrew (also Yiddish but can't find an issue right now).

Change 930160 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Section images: update rtl asset with flipped question mark

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

Change 930196 had a related patch set uploaded (by Sergio Gimeno; author: Sergio Gimeno):

[mediawiki/extensions/GrowthExperiments@master] Section images: use rtl asset in he, yi

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

Change 930196 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Section images: use rtl asset in he, yi

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

Change 930535 had a related patch set uploaded (by Kosta Harlan; author: Sergio Gimeno):

[mediawiki/extensions/GrowthExperiments@wmf/1.41.0-wmf.13] Section images: update rtl asset with flipped question mark

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

Change 930535 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@wmf/1.41.0-wmf.13] Section images: update rtl asset with flipped question mark

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

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)