Page MenuHomePhabricator

Add a link: mobile module preview
Closed, ResolvedPublic

Description

In both Variants C and D on mobile, users see a preview card of the suggested edit task (per work on T258021).

  • For this new task type, there should be a robot icon preceding the bar graph icon that precedes the task type name in the lower right of the card.
  • Therefore the ordering on that line should be robot icon, bar graph icon, "Add links between articles"

Mockup as of 2021-01-12:

image.png (187×392 px, 29 KB)

NOTE: Refer to Figma for up-to-date detailed redline mocks and specs:
Mobile: https://www.figma.com/file/2SONd8P1tsexIB5coMOp8h/Growth-Structured-tasks?node-id=181%3A65
Desktop: https://www.figma.com/file/2SONd8P1tsexIB5coMOp8h/Growth-Structured-tasks?node-id=112%3A0

Event Timeline

@mewoph -- I'm glad you'll be working on this! Once you get started on it, please move it to the In Progress column.

Change 666237 had a related patch set uploaded (by MewOphaswongse; owner: MewOphaswongse):
[mediawiki/extensions/GrowthExperiments@master] [WIP] Show robot icon for SmallTaskCard for link-recommendation

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

Posted a WIP patch, not sure if the approach I took is the best so I'm leaving this in In Progress column for now and will move it to Code Review later

Hi @RHo @MMiller_WMF — should there be an alt text for the robot icon?

Hi @RHo @MMiller_WMF — should there be an alt text for the robot icon?

Hi @mewoph - I thought this would be like the easy level icon where it is not an <img> element so would not require alt text. If that's incorrect, I think the alt text could be "AI suggestions task", since this is what the robot is indicating in this context.

Change 666237 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Show robot icon for SmallTaskCard for link-recommendation

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

Hi @RHo @MMiller_WMF — should there be an alt text for the robot icon?

Hi @mewoph - I thought this would be like the easy level icon where it is not an <img> element so would not require alt text. If that's incorrect, I think the alt text could be "AI suggestions task", since this is what the robot is indicating in this context.

I'm not sure, but perhaps the easy/medium/hard level icon on the small task card should have alt text as well as the robot icon, because both of those icons inform the user that it's an "easy" and machine learning driven task, a screen reader user would otherwise have no way to know that. In the difficulty filters dialog, this is less of a problem since we have headings for easy/medium/hard, but alt text for the robot icon there might also be useful to provide additional context for screen reader users.

Hi @RHo @MMiller_WMF — should there be an alt text for the robot icon?

Hi @mewoph - I thought this would be like the easy level icon where it is not an <img> element so would not require alt text. If that's incorrect, I think the alt text could be "AI suggestions task", since this is what the robot is indicating in this context.

Unless there is a strong reason to say "AI" in this case, I suggest you consider alternatives. "Machine" can be one. The algorithm behind the feature is not AI (strictly speaking). Even if by some stretch we can consider it an AI, it may not always remain such in future updates to the models. We will remain more accurate and gain more flexibility by using a different term than ML or AI.

Hi @RHo @MMiller_WMF — should there be an alt text for the robot icon?

Hi @mewoph - I thought this would be like the easy level icon where it is not an <img> element so would not require alt text. If that's incorrect, I think the alt text could be "AI suggestions task", since this is what the robot is indicating in this context.

I'm not sure, but perhaps the easy/medium/hard level icon on the small task card should have alt text as well as the robot icon, because both of those icons inform the user that it's an "easy" and machine learning driven task, a screen reader user would otherwise have no way to know that. In the difficulty filters dialog, this is less of a problem since we have headings for easy/medium/hard, but alt text for the robot icon there might also be useful to provide additional context for screen reader users.

Per chat with @RHo just now, I erred by writing "alt text", what I am proposing is to use a label (and set invisibleLabel: true) per the OOUI IconWidget recommendations:

In general, IconWidgets should be used with OO.ui.LabelWidget, which creates a label that identifies the icon’s function”

The change for our code would be pretty minor, instead of doing:

if ( this.taskType.iconName ) {
			$taskType.prepend( new OO.ui.IconWidget( { 
				icon: this.taskType.iconName, 
			} ).$element );
		}

we would do:

$taskType.prepend( new OO.ui.IconWidget( {
				icon: this.taskType.iconName,
				label: mw.message( this.taskType.iconLabelKey ).text()
			} ).$element );

Hi @RHo @MMiller_WMF — I looked at the Add a link copy doc and saw that we have "Suggestions by artificial intelligence (AI)" as a visible label next to the robot icon in the difficulty overlay. Would it make sense to use the same copy as an invisible label in this context? On a related note, should this copy be updated to avoid the "AI" reference per @leila's comments here as well?

Hi @RHo @MMiller_WMF — I looked at the Add a link copy doc and saw that we have "Suggestions by artificial intelligence (AI)" as a visible label next to the robot icon in the difficulty overlay. Would it make sense to use the same copy as an invisible label in this context? On a related note, should this copy be updated to avoid the "AI" reference per @leila's comments here as well?

Hi @Mew - I think the same copy in the invisible label sounds good, thanks for noticing this!
As for changing the "AI", let's leave that for now as a placeholder since we'd need to apply updates to all references to "AI" in the copy (currently sprinkled throughout the feature), and also as it's not certain yet if and what the alternative term will be until after @MMiller_WMF, @leila, and perhaps others have a chance to discuss.

Will add the invisible label for this after changes for T268706 are in, since this will use the same message key

kostajh changed the task status from Open to Stalled.Mar 24 2021, 10:16 AM

Hi @RHo @MMiller_WMF — should there be an alt text for the robot icon?

Hi @mewoph - I thought this would be like the easy level icon where it is not an <img> element so would not require alt text. If that's incorrect, I think the alt text could be "AI suggestions task", since this is what the robot is indicating in this context.

Unless there is a strong reason to say "AI" in this case, I suggest you consider alternatives. "Machine" can be one. The algorithm behind the feature is not AI (strictly speaking). Even if by some stretch we can consider it an AI, it may not always remain such in future updates to the models. We will remain more accurate and gain more flexibility by using a different term than ML or AI.

Let's follow up on that in T278298: Replace all references to "AI" and "artificial intelligence" for labeling link recommendation suggestions.

Will add the invisible label for this after changes for T268706 are in, since this will use the same message key

OK marking as stalled pending the resolution of that patch.

Change 674980 had a related patch set uploaded (by MewOphaswongse; author: MewOphaswongse):
[mediawiki/extensions/GrowthExperiments@master] Add a link: add invisible label to robot icon in mobile module preview

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

Change 674980 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Add a link: add invisible label to robot icon in mobile module preview

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

Unless there is a strong reason to say "AI" in this case, I suggest you consider alternatives. "Machine" can be one. The algorithm behind the feature is not AI (strictly speaking). Even if by some stretch we can consider it an AI, it may not always remain such in future updates to the models. We will remain more accurate and gain more flexibility by using a different term than ML or AI.

Speaking about alternatives, "computer" or "control" are less "sophisticated" than "AI".

Thanks all, LGTM

image.png (520×828 px, 45 KB)