Page MenuHomePhabricator

Add an image: image inspector
Closed, ResolvedPublic

Description

Corresponding task from "add a link": T269644: Add a link: link inspector


When the user is in suggestions mode from T289829: Add an image: suggestions mode, but before they have selected "yes/no/skip", the image inspector should be open (unless they collapse it). The image inspector is the place where the action happens of accepting, rejecting, or skipping.

====NOTE: Final copy updated below - see relevant tab for corresponding QQQ in the copy spreadsheet:====

  • RTL
    • Note that the whole card should be flipped for RTL languages. In addition to the header and buttons, this would put the image thumbnail on the righthand side and the metadata on the left.
  • Responsive
    • Note that the design should be responsive for small devices, such that devices <360px drop the "Add this image to the start of the article?" line.

Mockups as of 2021-08-30:

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

Responsive for smaller devices:

image.png (1×610 px, 433 KB)

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

Related Objects

Event Timeline

@RHo -- your thoughts on my comment in T290046#7320693 also apply to this task.

@MMiller_WMF we'll need business rules for how to select the single image we show when there are multiple suggestions.

I guess this can't be easily helped but the space for the image name and description is so tiny, it might be more useful to just replace it with a very prominent call-to-action for getting more info.

By description do we meant the description field of the information template (ie. the Description field in the purple table under Summary - long, can contain templates, legend or other complicated HTML, most images have it), or the Wikibase description (called caption on the user interface - short, plain-text, a lot of images don't have it) or both via some fallback mechanism?

If we do show the information template description, we'll need some business rules for sanitizing HTML markup as it can contain tables and other complicated things that would wreck the layout.

The image viewer should probably be a separate task, it's more complicated than the rest of this task. (I wonder if we could just reuse the mobile Media Viewer for that and the metadata...)

@Tgr

@MMiller_WMF we'll need business rules for how to select the single image we show when there are multiple suggestions.

I added this to the task description: we should just select the first one, because the algorithm puts the best suggestion in the first slot.

I guess this can't be easily helped but the space for the image name and description is so tiny, it might be more useful to just replace it with a very prominent call-to-action for getting more info.

That could be a good idea. Let's leave this for @RHo to think about as she watches the user tests. Until then, I think we should proceed with the plan as specified.

By description do we meant the description field of the information template (ie. the Description field in the purple table under Summary - long, can contain templates, legend or other complicated HTML, most images have it), or the Wikibase description (called caption on the user interface - short, plain-text, a lot of images don't have it) or both via some fallback mechanism?

I clarified in the task description that this should be the Commons description field -- not the caption. I like your idea of a fallback to try to choose the more informative of the two fields (description and caption), but I think we should cut that for Iteration 1. But if you can think of an easy and valuable way to do it, that could be good!

The image viewer should probably be a separate task, it's more complicated than the rest of this task. (I wonder if we could just reuse the mobile Media Viewer for that and the metadata...)

Thanks. I created that here: T290540: Add an image: image viewer

RHo renamed this task from Add an image: image inspector to Add an image: image inspector (PLACEHOLDER).Sep 16 2021, 8:50 PM
RHo updated the task description. (Show Details)

I don't know if this should be done in this task or a new one, but I encountered this issue today:

  • Select "Yes" to the image
  • It's inserted into the document
  • Change your mind and press the cancel X at the top of the publish dialog
  • Then press "No" for the suggestion
  • Then Publish changes

The image is embedded in the article, though it shouldn't be.

I don't know if this should be done in this task or a new one, but I encountered this issue today:

  • Select "Yes" to the image
  • It's inserted into the document
  • Change your mind and press the cancel X at the top of the publish dialog
  • Then press "No" for the suggestion
  • Then Publish changes

The image is embedded in the article, though it shouldn't be.

hi @kostajh - can this be raised as a separate bug task? It shouldn't occur per the taskflow design since if the user changes their mind and selects "No", they would see the rejection reasons dialog and after pressing the 'submitt' on this screen they would get the post-submit dialog immediately, without the image being added.

I don't know if this should be done in this task or a new one, but I encountered this issue today:

  • Select "Yes" to the image
  • It's inserted into the document
  • Change your mind and press the cancel X at the top of the publish dialog
  • Then press "No" for the suggestion
  • Then Publish changes

The image is embedded in the article, though it shouldn't be.

hi @kostajh - can this be raised as a separate bug task? It shouldn't occur per the taskflow design since if the user changes their mind and selects "No", they would see the rejection reasons dialog and after pressing the 'submitt' on this screen they would get the post-submit dialog immediately, without the image being added.

Sure, we can make a new task, or it could be solved alongside one of the existing ones in progress – T290785: Add an image: edit business rules could be relevant (that added the image insertion code) or T290046: Add an image: rejection dialog would also be a logical place to handle it. I just wanted to make sure it was noted somewhere, for now.

Right, cancelling the save should undo the edit. Let's follow up on that in T290785.

Hi @MMiller_WMF @RHo — I updated the Figma link in the description to point to v0.3 with the latest specifications. I wanted to confirm with you to see if there are any other things you'd like to capture in this task before I remove the placeholder keyword from this task.

For the updated collapsed state, I think we should create a separate task since that would impact add link as well.

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

[mediawiki/extensions/GrowthExperiments@master] Add an image: update inspector per iteration 1 v0.3 designs

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

With latest patch:

Default:

addlink_inspector_default.png (1×750 px, 281 KB)

Compact:

addlink_inspector_compact.png (1×638 px, 208 KB)

MMiller_WMF renamed this task from Add an image: image inspector (PLACEHOLDER) to Add an image: image inspector.Oct 9 2021, 12:42 AM
MMiller_WMF updated the task description. (Show Details)

@mewoph -- I just updated the task with the final mockups and decisions from our deep dive. I removed the "PLACEHOLDER" designation.

Change 727608 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Add an image: update inspector per iteration 1 v0.3 designs

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

Hi @kostajh I'll move it since there's no more action items on this task. All the remaining changes should have their own tasks.

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

[mediawiki/extensions/GrowthExperiments@master] Add an image: update copy & QQQs for image inspector, rejection dialog, edit summary, caption UI

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

Change 737784 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Add an image: update copy & QQQs for image inspector, rejection dialog, edit summary, caption UI

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

MMiller_WMF updated the task description. (Show Details)
MMiller_WMF added a subscriber: Sgs.

@mewoph @Sgs -- I updated the task description to strikethrough our previous requirement of ignoring all image suggestions after the first one. Then I linked to the task about altering our logic: T296427: Add an image: use highest ranking valid image

Checked on testwiki wmf.9 and arwiki wmf.9 - the specs are in place. I filed T296908: Add image - image inspector flips filenames for RTL to address the case when filenames in LTR nevertheless get flipped for RTL languages.