Page MenuHomePhabricator

Add an image: overlay onboarding
Open, MediumPublic

Description

Corresponding task from "add a link": T269490: Add a link: onboarding

After the user selects an "add an image" task from the suggested edits feed, the next thing they will experience are full-screen onboarding screens on mobile.

  • ====Note: Final copy has been provided below and requires updates and review - see relevant tab for corresponding QQQ in the copy spreadsheet ====
  • Navigation
    • This task type will have four onboarding screens, similar in structure to the onboarding overlays from "add a link" in T269490.
    • To the extent possible, it should be the next thing the user sees after selecting a task. They should not first see the article they selected and then see the onboarding cover it up.
    • It should have four stepper dots in the upper left that say, $step number of $total steps
    • All screens except the final screen should have the Skip all button in the upper right, and when tapped, the overlay should fade straight to the "add an image" experience.
  • Screen 1
    • Header: Introduction
    • Graphic: robot with moon
    • Body header: Images help people learn, but many articles don't have one.
    • Body text: You will decide whether a suggested image should be put in a Wikipedia article. [paragraph break] Suggestions are machine-generated, and you'll use your judgment to decide whether to accept or reject it.
    • New field Italicised smaller UI text in Base20 Base30: Images come from Wikimedia Commons, a collection of freely licensed images used by Wikipedia. - (see T295810: Add image - italicized text on first overlay screen is too big )
    • Blue arrow to proceed to next screen.
    • It should have a checkbox with label Don't show again in the lower left, which uses the same logic as the "add a link" onboarding. Until the user checks this, the onboarding should show up every time they start a new "add an image" task. This "don't show again" will not apply to other task types, such as "add a link". This "don't show again" will not apply to the separate captions onboarding (see T291715: Add an image: captions onboarding tooltip (PLACEHOLDER)).
  • Screen 2
    • Header: Introduction
    • Graphic: image inspector
    • Body header: Look at the suggested image
    • Body text: Use the filename, description, and the reason it was suggested to help you decide if it should be placed in the article. [paragraph break] You can also expand the image to view it more clearly.
    • Blue arrow to proceed to next screen.
    • Gray arrow to return to previous screen.
  • Screen 3
    • Header: Introduction

Graphic: article
Body header: Look at the article
Body text: Read over the article and think about whether the suggested image will help readers understand the content. Is it appropriate to be displayed in the article?
Blue arrow to proceed to next screen.
** Gray arrow to return to previous screen.

  • Screen 4
    • Header: Introduction
    • Graphic: yes/no buttons
    • Body header: Decide if the image belongs
    • Body text: The suggestion may be unrelated to the article, low quality, or may not belong for other reasons. Use your judgment to decide whether the suggestion is right or wrong. [paragraph break] For images that you accept, you'll write a short caption, and then your edit will be published. Note that the middle paragraph 2 was removed in the final copy review.
    • Blue Get started button.
    • Gray arrow to return to previous screen.

Screenshot from Figma (copy may be superseded by corresponding copy task)

image.png (1×2 px, 296 KB)

Link to designs in Figma (which will include illustration assets):
https://www.figma.com/file/ULhJr1isDstRbGE5vjYDsr/Add-images-structured-task-[Growth]?node-id=3194%3A14531

Illustration assets:

StepLTRRTL
Step 1
Step 2
Step 3
Step 4

Event Timeline

This is now designed, illustrated, and ready for development.

To clear add image onboarding preference:
new mw.Api().saveOption( 'growthexperiments-addimage-onboarding', '0' )

LTR:

addlink_onboarding_ltr.gif (1×748 px, 1 MB)

RTL:

addlink_onboarding_rtl.gif (1×748 px, 999 KB)

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

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

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

The images are machine-generated, which can be incorrect

@RHo @MMiller_WMF Depending on who reads this and how it is translated, it could be read literally as "the images are made by machines", but I think we want to say that the suggestions are machine-generated. Could we consider changing this to "The image suggestions are machine-generated, which can be incorrect"?

The images are machine-generated, which can be incorrect

@RHo @MMiller_WMF Depending on who reads this and how it is translated, it could be read literally as "the images are made by machines", but I think we want to say that the suggestions are machine-generated. Could we consider changing this to "The image suggestions are machine-generated, which can be incorrect"?

Thanks @kostajh for the catch – that was a terrible copy-paste mistake by me from the Add links onboarding! (Copy is Rita generated, which can be incorrect)
I've updated the copy on Figma, and you also reminded me to make T292730: Add an image: copy to review and finalise copy everywhere on Add an image.

kostajh triaged this task as Medium priority.Oct 7 2021, 1:13 PM

Change 726973 merged by jenkins-bot:

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

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

@mewoph, @RHo

(1) - As per https://phabricator.wikimedia.org/T292092#7408514 and the screen recording in https://phabricator.wikimedia.org/T292092#7406536, the text should be changed to "The image suggestions are machine-generated, which can be incorrect" In enwiki betalabs, I still see the previous text: "Images are suggested by the machines, which can be incorrect."

Screen Shot 2021-10-26 at 6.01.54 PM.png (1×750 px, 176 KB)

(2) - the third screen shows empty yellow rectangle; the figma mockup shows a different picture.

betalabsfigma
Screen Shot 2021-10-26 at 6.10.38 PM.png (1×776 px, 99 KB)
Screen Shot 2021-10-26 at 6.13.23 PM.png (614×404 px, 38 KB)

(3) (just a suggestion) adding a swipe to the intro tours?

Hi @Etonkovidova,

(1) the copy has yet to be finalized so I think we can update the final copy in one go with this task T292730: Add an image: copy.

(2) @RHo I'm having some issues exporting SVG for the third image. The preview looks fine and raster export works fine, but the article layer is missing in the SVG. Oddly when I tried exporting the article component itself, I'm also getting just the outer frame.

Screen Shot 2021-10-27 at 8.40.23 AM.png (516×800 px, 66 KB)

(3) Question re: the swiping UX (if we were to implement it here), would we want a slightly different UX for swiping here than the one that we have for the suggested edits feed & the link inspector? For the existing cases, the swiping is more like going through a stack of paper (where the swipe is binary — the navigation either happens or it doesn't) whereas here I see it more as a continuous strip so the user might be able to peek at the next screen without navigating to it.

Hi @Etonkovidova,
(1) the copy has yet to be finalized so I think we can update the final copy in one go with this task T292730: Add an image: copy.
(2) @RHo I'm having some issues exporting SVG for the third image. The preview looks fine and raster export works fine, but the article layer is missing in the SVG. Oddly when I tried exporting the article component itself, I'm also getting just the outer frame.

That sounds like maybe weird Figma bug because the same selection exported as PNG shows the little article frame. I flattened a few of the layers though and it's showing up now. Having said that since I've exported the assets already I'll just add them to the task description now.

(3) Question re: the swiping UX (if we were to implement it here), would we want a slightly different UX for swiping here than the one that we have for the suggested edits feed & the link inspector? For the existing cases, the swiping is more like going through a stack of paper (where the swipe is binary — the navigation either happens or it doesn't) whereas here I see it more as a continuous strip so the user might be able to peek at the next screen without navigating to it.

Yes, I think that would be good! I think this is more similar to what @MMiller_WMF was suggesting for the Suggested edits feed as well on the still to be created task from his comment T268709#7285951 around being able to make the card "stick" and draggable.

Thanks @RHo! I'll update the assets.

Re: swiping, for applying the draggable UX to the suggested edits feed, I think it would require some architectural changes for the UX to make sense (dragging lets the user navigates through the continuous strip of cards) and it may have some performance impact as well. The reason is that we are currently only rendering a single card at a time & lazy loading the image/metadata as the user navigates through the feed, so in order order to peek at the previous/next cards, we'd have to render and fetch information for more content than we actually need (which may not be ideal for mobile users who may have limited data bandwidth).

We don't have the same problem w/these onboarding screens since they are not generated dynamically. That being said, would this animation be required for the first iteration of add an image? I think it would be better to track this separately since the animation would apply to add link as well.

Thanks @RHo! I'll update the assets.

Re: swiping, for applying the draggable UX to the suggested edits feed, I think it would require some architectural changes for the UX to make sense (dragging lets the user navigates through the continuous strip of cards) and it may have some performance impact as well. The reason is that we are currently only rendering a single card at a time & lazy loading the image/metadata as the user navigates through the feed, so in order order to peek at the previous/next cards, we'd have to render and fetch information for more content than we actually need (which may not be ideal for mobile users who may have limited data bandwidth).

We don't have the same problem w/these onboarding screens since they are not generated dynamically. That being said, would this animation be required for the first iteration of add an image? I think it would be better to track this separately since the animation would apply to add link as well.

Yes, totally agree the animation is not needed for iteration 1 and perhaps we can resurrect the #growth-leftovers tag these types of smaller tasks?

@RHo @mewoph -- for ideas that we want to cut from Iteration 1, please make the tasks into children of this parent: T293711: [EPIC] "Add an image" future iterations

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

[mediawiki/extensions/GrowthExperiments@master] Add an image: followup changes for onboarding overlay

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

Updated 3rd screen assets (ended up having to ungroup some of the groups in the SVG as the grouping was causing some of the layers to now show up on Chrome)

addimage_onboarding_screen3_ltr (2×1 px, 134 KB)

addimage_onboarding_screen3_rtl.png (2×1 px, 133 KB)

@RHo @mewoph -- for ideas that we want to cut from Iteration 1, please make the tasks into children of this parent: T293711: [EPIC] "Add an image" future iterations

Hi @MMiller_WMF, here 's the new task created to track the navigation enhancement for both add link & add image tasks T294583: Structured Tasks: Enable swiping navigation for onboarding overlay

Change 735420 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Add an image: followup changes for onboarding overlay

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

RHo updated the task description. (Show Details)

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

[mediawiki/extensions/GrowthExperiments@master] Add an image: update onboarding copy text

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

Change 737057 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Add an image: update onboarding copy text

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