Page MenuHomePhabricator

Add an image: suggestions mode
Closed, ResolvedPublic

Description

Corresponding task from "add a link": T269638: Add a link: Suggestions mode


After onboarding, the user should be seeing the article in "suggestions mode". This should be basically the same for "add an image" as it is for "add a link", following the specifications in T269638: Add a link: Suggestions mode -- but it's actually simpler, because unlike for "add a link", none of the the structured task's activities will need to be interspersed in the article body. It is just the plain article, with the image inspector on top. Specifically:

  • Toolbar & Publish button
  • Editing surface
    • On mobile, the Article title should be shown at the top of the content area.
    • For iteration 1, we will use the same rules for showing the editing surface as we do with "add a link". This means we should show links, references, and templates.
    • The user should not be able to actually change the text or elements of the article in any way, except through the image suggestions.
    • Tapping on links/references/templates in the article should do nothing.

Mobile mockups as of 2021-10-01:

image.png (1×1 px, 1 MB)

NOTE: Refer to Figma for up-to-date detailed redline mocks and specs:
https://www.figma.com/file/ULhJr1isDstRbGE5vjYDsr/Add-images-structured-task-[Growth]?node-id=3042%3A8783

Event Timeline

(wrong task, moved to T290045)

Moving back to In Progress to update registrations & hook up new Add Image classes

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

[mediawiki/extensions/GrowthExperiments@master] Add an Image: Suggestions mode

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

With the current patch, the editing surface should be updated as per the task description and edit mode toggle should be working. Image inspector is not yet shown (this will be done in T290045: Add an image: image inspector).

Note: There will be console errors SuggestionInteractionLogger.log called before logger instance is set. This is expected until instrumentation is implemented for Add Image.

Mobile:

addimage_suggestions_mobile.gif (1×752 px, 947 KB)

Desktop:

addimage_suggestions_dt.gif (1×2 px, 2 MB)

The escape key is not working so it's impossible to exit the editor (on desktop; on mobile there's a cancel button). That's expected and we can handle it in the dialog; just making a note so it does not get forgotten.

Change 720084 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Add an Image: Suggestions mode

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

Change 720493 had a related patch set uploaded (by Gergő Tisza; author: Gergő Tisza):

[mediawiki/extensions/GrowthExperiments@master] Add Image: Do not show edit button dot

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

Change 720493 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Add Image: Do not show edit button dot

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

Thanks @Tgr — I added escape handling to the task description in T290045: Add an image: image inspector

I just updated the task with the decisions and mockups from the team deep dive on 2021-09-28.

@mewoph -- @RHo just made a change to the task description, saying that we want to show the article title at the top, even though that's not what happens by default in VE.

This is the desired experience:

image.png (1×660 px, 550 KB)

But this is what we currently see in beta:

image.png (1×760 px, 603 KB)

@mewoph -- is this possible to add? Is it challenging?

Hi @MMiller_WMF @RHo it should be fairly straightforward to add the title after the editor loads like so:

addimage_mobile_articleTitle.gif (1×696 px, 1 MB)

Would this be acceptable? I think it would be more complicated to show the title during the loading state since currently our code isn't called until later on.

Should the title be at 50% opacity like on desktop or should we keep the same default text color (which then changes during caption step)?

Screen Shot 2021-10-27 at 10.37.47 AM.png (782×1 px, 215 KB)

Hi @MMiller_WMF @RHo it should be fairly straightforward to add the title after the editor loads like so:

addimage_mobile_articleTitle.gif (1×696 px, 1 MB)

Would this be acceptable? I think it would be more complicated to show the title during the loading state since currently our code isn't called until later on.

Thanks sharing this screencast @mewoph. Is it expected that the page will load in read mode first and then switch to the editor mode, or could we immediately load the page in edit state like in the user testing prototype?
If not, my feeling is that this is not ideal but acceptable for Iteration 1 of images. However, per @MMiller_WMF's question about whether we'd want to add this for the structured link task, I don't think we should if it is added is after the editor loads like shown above.

Should the title be at 50% opacity like on desktop or should we keep the same default text color (which then changes during caption step)?

Screen Shot 2021-10-27 at 10.37.47 AM.png (782×1 px, 215 KB)

The title should be 100% opacity, thanks.

The editor will be loaded automatically (the user doesn't have to click on the edit icon), but there will still be some time between when the page is rendered and when the editor loads. Here's the corresponding task from add link: T280991: Add a link: open the article in edit mode right away.

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

[mediawiki/extensions/GrowthExperiments@master] Add an image: add article title to the document during suggestions mode (mobile)

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

Moving back to Code Review for additional changes to add the article title

Screen Shot 2021-10-28 at 10.56.55 AM.png (1×700 px, 241 KB)

Screen Shot 2021-10-28 at 10.57.05 AM.png (1×696 px, 355 KB)

Change 735423 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Add an image: add article title to the document during suggestions mode (mobile)

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

Checked in betalabs - works as expected.

For @RHo quik review
(1) Add image is not usable in horizontal mode (I believe it was never intended to be)

(2)

The user should not be able to actually change the text or elements of the article in any way, except through the image suggestions.

When links in an article are clicked - they become underlined; otherwise, there are no other effects.

Checked in betalabs - works as expected.

For @RHo quik review
(1) Add image is not usable in horizontal mode (I believe it was never intended to be)

yes that's right.

(2)

The user should not be able to actually change the text or elements of the article in any way, except through the image suggestions.

When links in an article are clicked - they become underlined; otherwise, there are no other effects.

that's not ideal but I've filed T295884 to more wholly address this issue post-iteration1.

Thanks!