Page MenuHomePhabricator

Refactor the "Add an image" on-boarding dialog to Vue
Open, In Progress, HighPublic

Description

When a newcomer starts an Add an image task a dialog is placed on top of visual editor giving the user detailed information in the steps to complete the task. The dialog has 4 steps which are navigable with arrows back and forth. The first step includes a "Don't show again" checkbox mark so users can check it to indicate they don't want the instructions dialog to show again when doing Add an image tasks.

Step 1Step 2Step 3Step 4
Screenshot 2023-02-07 at 12.47.38.png (1×1 px, 161 KB)
Screenshot 2023-02-07 at 12.47.44.png (1×1 px, 108 KB)
Screenshot 2023-02-07 at 12.47.50.png (1×1 px, 90 KB)
Screenshot 2023-02-07 at 12.47.56.png (1×1 px, 130 KB)

Figma design

Event Timeline

Sgs renamed this task from Refactor the "Add an image" on-boarding dialog to Vue. to Refactor the "Add an image" on-boarding dialog to Vue.Feb 7 2023, 12:08 PM

@Sgs: Hi, a good first task is a self-contained, non-controversial task with a clear approach. It should be well-described with pointers to help a completely new contributor. There is currently no hint which codebase this task is about, so I'm removing the good first task tag. Feel free to add back the good first task project tag once there are sufficient details what exactly has to happen where and how for any completely new contributor. Thanks a lot in advance!

Change 911903 had a related patch set uploaded (by Viviana Yanez; author: Sergio Gimeno):

[mediawiki/extensions/GrowthExperiments@master] documentation/frontend: Create AddImage onboarding dialog demo

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

Hi, commenting here the alt text we've written for the onboarding illustrations in Add an image.

FYI all alt text is being tracked in T335523: Alt text for onboarding images: Add a link, Add an image and Add a section image .

IllustrationAlt text
Desktop-SE-AI-Onboarding 1.png (566×506 px, 42 KB)
Illustration of the moon article. Next to the article illustration there's a robot asking if an image of the moon should be added to the article.
Desktop-SE-AI-Onboarding 2.png (566×506 px, 27 KB)
Illustration of an article. An image is being suggested for the article. The image suggestion is zoomed in to highlight that the image suggestion and details should be reviewed.
Desktop-SE-AI-Onboarding 3.png (566×506 px, 22 KB)
Illustration of an article. At the bottom of the article there’s an image suggestion.
Desktop-SE-AI-Onboarding 2 (1).png (566×506 px, 33 KB)
Illustration of an article. An image is being suggested for the article. Inside of the suggestion there are three icon buttons for the options available: a checkmark to accept the suggestion, a cross to reject the suggestion, and an arrow to move to the next step.
kostajh triaged this task as High priority.Apr 28 2023, 8:59 AM

Change 913156 had a related patch set uploaded (by Viviana Yanez; author: Sergio Gimeno):

[mediawiki/extensions/GrowthExperiments@master] documentation/frontend: AddImage dialog images alt text

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

Change 913156 abandoned by Viviana Yanez:

[mediawiki/extensions/GrowthExperiments@master] documentation/frontend: AddImage dialog images alt text

Reason:

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

Change 911903 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] documentation/frontend: Create AddImage onboarding dialog demo

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

Sgs changed the task status from Open to In Progress.May 26 2023, 1:13 PM
Aklapper added a subscriber: VYanez-WMF.

Removing inactive task assignee who's not with WMF anymore. (WMF Growth-Team: Please do so as part of team offboarding steps - thanks.)