Page MenuHomePhabricator

Add a suggested section-level image: Onboarding illustrations
Closed, ResolvedPublic

Description

This task is to create SVG illustration assets for use in the new Add a section-level image structured task.

  • Illustrations:
    • We would use the existing Add an image onboarding as a reference, but updating the illustrations to convey a more section-specific approach instead of article-level.
For reference:

"Add an image" existing illustrations:

"Add a section-level image" initial copy:

Screen 1 Screen 2Screen 3Screen 4
You 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.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? Please note that sections that are made of tables or lists should not include images.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.
  • Specifications for illustrations:
    • SVG file format
    • Same image for mobile and desktop
    • Max width 360px
    • Max height 216px
    • No border and no cropped imagery on left, top, and right edges to enable extending background colour beyond image size.
    • Provide RTL version if required

Designs for section-level images

RTL versions and and update of images so they don't interfere with pagination to be designed

Event Timeline

Hi @KieranMcCann - would you possibly have bandwidth to help with these slightly modified illustrations?

Hi @RHo. Sure no problem. In terms of timeframe is early next week okay?

Thanks @KierannMcCann, that would be great!

(mostly thinking out loud here and commenting on this ticket because of similar nature? but happy to move this convo elsewhere or create a new ticket).

Would it make sense to also update the image thumbnail from Add an image when in the suggested edits module to be able to differentiate both structured tasks? Attaching the Add an image placeholder below:

Add an image graphic - img thumbnail.png (160×332 px, 3 KB)

cc @RHo

(mostly thinking out loud here and commenting on this ticket because of similar nature? but happy to move this convo elsewhere or create a new ticket).

Would it make sense to also update the image thumbnail from Add an image when in the suggested edits module to be able to differentiate both structured tasks? Attaching the Add an image placeholder below:

Add an image graphic - img thumbnail.png (160×332 px, 3 KB)

cc @RHo

Good point @JFernandez-WMF, let's move to a new task for considering whether to update the suggested edits thumb to be different for Section vs Article level image structured tasks.

Hi @RHo @JFernandez-WMF. Updated illustrations below. I’ve only made small adjustments to the original illustrations to indicate that the image is part way through an article and not in the lead. Just let me know if you need more work done on these.

Hi @RHo @JFernandez-WMF. Updated illustrations below. I’ve only made small adjustments to the original illustrations to indicate that the image is part way through an article and not in the lead. Just let me know if you need more work done on these.

Thanks @KieranMcCann, these LGTM for the MVP. Could there be RTL versions made for each of these please?

Hi @RHo @JFernandez-WMF. Updated illustrations below. I’ve only made small adjustments to the original illustrations to indicate that the image is part way through an article and not in the lead. Just let me know if you need more work done on these.

I went ahead and try these for the work in T335207: Section-level images: onboarding dialog and there seems to be an overlap between the image and the dotted step paginator, see

No modifications
Screenshot 2023-05-17 at 17.21.39.png (1×1 px, 143 KB)
Screenshot 2023-05-17 at 17.21.53.png (1×1 px, 109 KB)
Screenshot 2023-05-17 at 17.22.02.png (1×1 px, 137 KB)
Increase dialog height and add vertical padding
Screenshot 2023-05-17 at 17.23.34.png (1×1 px, 173 KB)
Screenshot 2023-05-17 at 17.23.42.png (1×1 px, 114 KB)
Screenshot 2023-05-17 at 17.23.48.png (1×1 px, 134 KB)

In the images for the "Add an image" dialog there's vertical gutter as part of the SVG whereas in the new version the article page starts at the very top of the image, I guess to better reflect the in-section adding. I can add the vertical gutter through CSS but then I also need to increase the dialog height so the text in the modal body for the first step does not get cut and scroll is needed. Is this fix acceptable or you want to provide different images to avoid this? cc @RHo @KieranMcCann

imo the problem is for the paginator to not have its own vertical space reserved and being positioned on top of the image but I don't think it's worth working on a CSS/JS solution right now since that problem will be solved in the new Vue versions of onboarding dialogs in T336270: Implement a prototype of OnboardingDialog pattern latest spec.

Hi @RHo @JFernandez-WMF. Updated illustrations below. I’ve only made small adjustments to the original illustrations to indicate that the image is part way through an article and not in the lead. Just let me know if you need more work done on these.

I went ahead and try these for the work in T335207: Section-level images: onboarding dialog and there seems to be an overlap between the image and the dotted step paginator, see

No modifications
Screenshot 2023-05-17 at 17.21.39.png (1×1 px, 143 KB)
Screenshot 2023-05-17 at 17.21.53.png (1×1 px, 109 KB)
Screenshot 2023-05-17 at 17.22.02.png (1×1 px, 137 KB)
Increase dialog height and add vertical padding
Screenshot 2023-05-17 at 17.23.34.png (1×1 px, 173 KB)
Screenshot 2023-05-17 at 17.23.42.png (1×1 px, 114 KB)
Screenshot 2023-05-17 at 17.23.48.png (1×1 px, 134 KB)

In the images for the "Add an image" dialog there's vertical gutter as part of the SVG whereas in the new version the article page starts at the very top of the image, I guess to better reflect the in-section adding. I can add the vertical gutter through CSS but then I also need to increase the dialog height so the text in the modal body for the first step does not get cut and scroll is needed. Is this fix acceptable or you want to provide different images to avoid this? cc @RHo @KieranMcCann

imo the problem is for the paginator to not have its own vertical space reserved and being positioned on top of the image but I don't think it's worth working on a CSS/JS solution right now since that problem will be solved in the new Vue versions of onboarding dialogs in T336270: Implement a prototype of OnboardingDialog pattern latest spec.

Thanks for this @Sgs, agree we should not spend too much time on this given the new Onboarding dialog will render this issue moot, so @JFernandez-WMF will update the images slightly so it doesn't interfere with the pagination.

Thanks for this @Sgs, agree we should not spend too much time on this given the new Onboarding dialog will render this issue moot, so @JFernandez-WMF will update the images slightly so it doesn't interfere with the pagination.

Thank you, latest asset set works well. Are we planning to provide RTL illustrations and mobile optimized images?

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

[mediawiki/extensions/GrowthExperiments@master] Section images: update to onboarding images

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

Change 924084 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Section images: update to onboarding images

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

Hi @Sgs just worked on the RTL illustrations for this. Per your last comment do you still need the modifications regarding the interference with the pagination? Happy to work on it if it's still needed.

Hi @Sgs just worked on the RTL illustrations for this. Per your last comment do you still need the modifications regarding the interference with the pagination? Happy to work on it if it's still needed.

Sorry for the late reply. Yes, a slightly modifed asset that does not collapse with the paginator would be great. In the prior version (Add an image) we also had dedicated assets for mobile, are you planning to add those, or maybe they exists and I'm missing them.

Discussed with @JFernandez-WMF that due to temporary limited design resources we won't be providing specific illustrations for mobile and we'll be re-using the ones from desktop. If that sounds fair cc @RHo @KStoller-WMF; The difference on the illustration is that it reflects the insertion happening on a mobile device rather than a desktop screen.

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

[mediawiki/extensions/GrowthExperiments@master] Section images: add missing rtl images

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

Change 928602 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Section images: add missing rtl images

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

This is in Needs Design but actually I think it's finished?

Currently, on betalas

  • 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)

This is in Needs Design but actually I think it's finished?

Thank you! I think we can close this as Resolved? If a new design that specifically responds to any issues with the onboarding is needed after, then I'm happy to re-open this task. What do you think @KStoller-WMF?

Marking as resolved, thanks!