Add an image: image inspector
Closed, ResolvedPublic
Actions

Assigned To

Authored By

	MMiller_WMF
	Aug 31 2021, 1:09 AM

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:====

Location
- The image inspector is a card at the bottom of the screen.
- When the user arrives on the page, it should animate in, like it is being "unminimized".
Header
- Starts with the robot icon.
- Copy: Add a suggested image
- The far right of the header has a "down chevron", which minimizes the inspector.
Minimize
- T293147: Structured Tasks: Change how the inspector is collapsed on mobile
Content
- Suggested image
  - The API will frequently provide multiple image suggestions. ~~We should always offer the first one, which is the highest confidence one. For this iteration, we should ignore the other suggestions beyond the first one.~~ We should always offer the highest ranking image that is considered valid according to our own validation rules (e.g. high enough resolution, not an audio/video file, etc.). This change filed here: T296427: Add an image: use highest ranking valid image
- T290911: Add an image: show suggestion-specific content in image inspector
- T290540: Add an image: image viewer
- T292467: Add an image: suggestion reason - revised copy for each reason type is detailed on this task.
- Below the thumbnail, there should be text: Add this image to the start of the article?
Actions
- At the bottom of the card are the action buttons.
- Yes: has a checkmark icon and the label Yes. This button triggers the caption stage. See T290781: Add an image: captions.
- No: has an X icon and the label No. This button triggers the rejection dialog. See T290046: Add an image: rejection dialog.
- Skip button: is a quiet button with the label Not sure. This button triggers the skip flow. See T290910: Add an image: skip button functionality for image inspector.

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:

Responsive for smaller devices:

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

Details

Related Changes in Gerrit:

	Subject	Repo	Branch	Lines +/-
	Add an image: update copy & QQQs for image inspector, rejection dialog, edit summary, caption UI	mediawiki/extensions/GrowthExperiments	master	+26 -23
	Add an image: update inspector per iteration 1 v0.3 designs	mediawiki/extensions/GrowthExperiments	master	+73 -47

Customize query in gerrit

Related Objects
Search...

Status	Assigned	Task
Resolved	MMiller_WMF	T285587 [EPIC] "Add an image" Iteration 1
Resolved	DMburugu	T289823 Add an image: frontend tasks for initial release
Resolved	• mewoph	T290045 Add an image: image inspector
Resolved	• mewoph	T290540 Add an image: image viewer
Resolved	• mewoph	T290761 Add an image: Create class for task-agnostic concerns for inspector
Resolved	Tgr	T290782 Add an image: image details
Resolved	• mewoph	T290907 Add an image: create skeleton for inspector
Resolved	• mewoph	T290910 Add an image: skip button functionality for image inspector
Resolved	• mewoph	T290911 Add an image: show suggestion-specific content in image inspector
Resolved	• mewoph	T292467 Add an image: suggestion reason
Duplicate	None	T296427 Add an image: use highest ranking valid image

Event Timeline

MMiller_WMF created this task.Aug 31 2021, 1:09 AM

Restricted Application added a subscriber: jhsoby. · View Herald TranscriptAug 31 2021, 1:09 AM

MMiller_WMF updated the task description. (Show Details)Aug 31 2021, 1:11 AM

MMiller_WMF updated the task description. (Show Details)Aug 31 2021, 1:22 AM

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

Tgr updated the task description. (Show Details)Sep 6 2021, 12:46 AM

@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...)

MMiller_WMF triaged this task as High priority.Sep 7 2021, 5:08 PM

MMiller_WMF moved this task from Incoming to Ready for Development on the Growth-Team (Sprint 0 (Growth Team)) board.

MMiller_WMF updated the task description. (Show Details)Sep 8 2021, 5:11 AM

MMiller_WMF updated the task description. (Show Details)Sep 8 2021, 5:13 AM

MMiller_WMF updated the task description. (Show Details)

MMiller_WMF updated the task description. (Show Details)Sep 8 2021, 5:16 AM

@Tgr

In T290045#7333525, @Tgr wrote:

@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

• mewoph claimed this task.Sep 9 2021, 5:43 PM

• mewoph moved this task from Ready for Development to In Progress on the Growth-Team (Sprint 0 (Growth Team)) board.

• mewoph mentioned this in T289829: Add an image: suggestions mode.Sep 9 2021, 6:33 PM

kostajh mentioned this in T290046: Add an image: rejection dialog.Sep 10 2021, 9:40 AM

MMiller_WMF mentioned this in T290782: Add an image: image details.Sep 11 2021, 12:02 AM

MMiller_WMF added a subtask: T290782: Add an image: image details.

kostajh mentioned this in T289827: Add an image: task type info in suggested edits module.Sep 13 2021, 9:56 AM

• mewoph updated the task description. (Show Details)Sep 13 2021, 3:56 PM

• mewoph updated the task description. (Show Details)Sep 13 2021, 6:43 PM

• mewoph updated the task description. (Show Details)Sep 13 2021, 6:51 PM

• mewoph updated the task description. (Show Details)Sep 13 2021, 6:54 PM

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.

In T290045#7390597, @kostajh wrote:

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.

In T290045#7390726, @RHo wrote:

In T290045#7390597, @kostajh wrote:

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.

• mewoph updated the task description. (Show Details)Oct 4 2021, 6:11 PM

• mewoph updated the task description. (Show Details)Oct 7 2021, 8:10 PM

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

gerritbot added a project: Patch-For-Review.Oct 7 2021, 9:35 PM

With latest patch:

Default:

Compact:

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

MMiller_WMF mentioned this in T290781: Add an image: captions.Oct 9 2021, 1:33 AM

jhsoby unsubscribed.Oct 9 2021, 2:23 AM

MMiller_WMF updated the task description. (Show Details)Oct 11 2021, 2:36 AM

• mewoph updated the task description. (Show Details)Oct 12 2021, 8:55 PM

• mewoph moved this task from In Progress to Code Review on the Growth-Team (Sprint 0 (Growth Team)) board.

@mewoph should this move to QA now?

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

Maintenance_bot removed a project: Patch-For-Review.Oct 13 2021, 2:11 PM

ReleaseTaggerBot added a project: MW-1.38-notes (1.38.0-wmf.5; 2021-10-19).Oct 13 2021, 3:00 PM

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.

Etonkovidova closed subtask T290761: Add an image: Create class for task-agnostic concerns for inspector as Resolved.Oct 27 2021, 12:24 AM

MMiller_WMF mentioned this in T294669: Image instrumentation: image inspector.Oct 29 2021, 10:23 PM

RHo updated the task description. (Show Details)Nov 8 2021, 1:07 PM

RHo mentioned this in T292730: Add an image: copy.Nov 8 2021, 1:56 PM

RHo updated the task description. (Show Details)Nov 8 2021, 7:17 PM

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

gerritbot added a project: Patch-For-Review.Nov 9 2021, 8:48 PM

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

Maintenance_bot removed a project: Patch-For-Review.Nov 12 2021, 8:10 PM

QutieBot added a project: QTE-TestingOverview.Nov 17 2021, 6:18 PM

Etonkovidova closed subtask T292467: Add an image: suggestion reason as Resolved.Nov 17 2021, 7:17 PM

@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

Etonkovidova updated the task description. (Show Details)Dec 2 2021, 3:34 AM

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.