Page MenuHomePhabricator
Create Task
Maniphest T279684

[Design review] Visual design tweaks for the suggested link tags in Suggestions mode
Closed, ResolvedPublic
Actions

Assigned To
• mewoph
Authored By
RHo
Apr 8 2021, 3:46 PM
Tags
Referenced Files
F34430283: Screen Shot 2021-04-27 at 2.31.26 PM.png
Apr 27 2021, 9:34 PM
F34409713: image.png
Apr 21 2021, 7:00 PM
F34409715: image.png
Apr 21 2021, 7:00 PM
F34409085: Screen Shot 2021-04-20 at 6.43.10 PM.png
Apr 21 2021, 1:58 AM
F34409074: Screen Shot 2021-04-20 at 6.40.03 PM.png
Apr 21 2021, 1:58 AM
F34409072: Screen Shot 2021-04-20 at 6.38.04 PM.png
Apr 21 2021, 1:58 AM
F34409087: Screen Shot 2021-04-20 at 6.57.59 PM.png
Apr 21 2021, 1:58 AM
F34409061: Screen Shot 2021-04-20 at 6.23.26 PM.png
Apr 21 2021, 1:58 AM
View All 32 Files
Subscribers
Aklapper
Etonkovidova
kostajh
RHo

Description

This task details visual design fixes to be completed coming out of task T2378638

Issue detailsActual exampleExpected
i. More padding around the tag text than expectedActual (Desktop):
Screen Shot 2021-04-07 at 4.25.48 PM.png (352×400 px, 70 KB)
Actual (Mobile):
image.png (580×666 px, 83 KB)
Expected:
image.png (530×1 px, 62 KB)
image.png (748×1 px, 85 KB)
ii. There should be a 2px border-radius around the tag (mobile and desktop)Actual
image.png (112×228 px, 5 KB)
(no border radius)		Expected
image.png (256×952 px, 28 KB)
iii. Robot icon color on unselected tag should be Base20, not black. Also this is an icon (robot) that is available in the OOUI icons library so not sure if that could be used instead?Actual
image.png (384×710 px, 54 KB)
Expected:
image.png (530×1 px, 62 KB)
iv. There is no underline on the active link tagActual
image.png (86×278 px, 5 KB)
Expected
image.png (800×700 px, 112 KB)
v. Active tag should have a dropshadow stylingActual
image.png (86×210 px, 3 KB)
Expected
image.png (222×994 px, 37 KB)
vi. Accepted link suggestion text should be Accent50Actual (betalab)
Screen Shot 2021-04-07 at 4.46.02 PM.png (233×609 px, 51 KB)
Expected
Screen Shot 2021-04-07 at 4.45.53 PM.png (236×891 px, 57 KB)
vii. Cross icon color on rejected tag should be Red30, not Red50 (#d33). Also this is an icon (Close) that is available in the OOUI icons library so not sure if that could be used instead?Actual
image.png (180×620 px, 32 KB)
Expected:
image.png (266×980 px, 27 KB)

Details

SubjectRepoBranchLines +/-
Add a link: Update background color value for active annotation & trianglemediawiki/extensions/GrowthExperimentsmaster+10 -3
Add a link: update annotation styles based on design reviewmediawiki/extensions/GrowthExperimentsmaster+22 -31
Customize query in gerrit

Related Objects
Search...

Event Timeline

RHo created this task.Apr 8 2021, 3:46 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptApr 8 2021, 3:46 PM
RHo moved this task from Incoming to Ready for Development on the Growth-Team (Sprint 0 (Growth Team)) board.Apr 8 2021, 3:46 PM
RHo mentioned this in T269638: Add a link: Suggestions mode.Apr 8 2021, 3:58 PM
• mewoph added a comment.EditedApr 8 2021, 4:32 PM

Hi @RHo — following up on the first issue:

For the negative space, I added 4px margin based on this requirement:

There should be a 4px negative space around these link suggestions to accommodate a tap target.

Should the margin be removed?

For the padding value, in the inactive state there's an additional 1px added to prevent the annotation from moving when it's focused since the active state has a 2px border whereas the inactive state has 1px border. outline can't be used here because of the border-radius. I'll investigate potential workarounds.

• mewoph moved this task from Backlog to April 12 - April 16 on the Add-Link board.Apr 8 2021, 5:22 PM
RHo added a comment.EditedApr 8 2021, 5:28 PM
In T279684#6984741, @mewoph wrote:

Hi @RHo — following up on the first issue:

For the negative space, I added 4px margin based on this requirement:

There should be a 4px negative space around these link suggestions to accommodate a tap target.

Should the margin be removed?

That's totally fine @mewoph. I missed a word here, I am referring only to padding around the"tag text". The 4px margin is OK. I will update task description to be more specific!

For the padding value, in the inactive state there's an additional 1px added to prevent the annotation from moving when it's focused since the active state has a 2px border whereas the inactive state has 1px border. outline can't be used here because of the border-radius. I'll investigate potential workarounds.

sgtm

RHo updated the task description. (Show Details)Apr 8 2021, 5:29 PM
gerritbot added a comment.Apr 8 2021, 11:29 PM

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

[mediawiki/extensions/GrowthExperiments@master] Add a link: update annotation styles based on design review

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

gerritbot added a project: Patch-For-Review.Apr 8 2021, 11:29 PM
• mewoph added a comment.Apr 8 2021, 11:36 PM

Thanks for the clarifications @RHo! I've posted a patch updating all of these. One thing I'd like to call out is that for active annotation, I followed the text color in the in-context mock (which as the text color override) rather than in the component. Let me know if the component style should take precedence.

Desktop accepted:

Screen Shot 2021-04-08 at 4.31.58 PM.png (100×274 px, 17 KB)

Desktop active:

Screen Shot 2021-04-08 at 4.32.01 PM.png (98×270 px, 15 KB)

RHo added a comment.Apr 13 2021, 9:14 AM
In T279684#6986283, @mewoph wrote:

Thanks for the clarifications @RHo! I've posted a patch updating all of these. One thing I'd like to call out is that for active annotation, I followed the text color in the in-context mock (which as the text color override) rather than in the component. Let me know if the component style should take precedence.

Desktop accepted:

Screen Shot 2021-04-08 at 4.31.58 PM.png (100×274 px, 17 KB)

Desktop active:

Screen Shot 2021-04-08 at 4.32.01 PM.png (98×270 px, 15 KB)

Hi @mewoph - that's correct, please follow the in-context mock which shows the different states (active with link suggested accepted show, active with link suggestion not decided, etc) , whereas the "base" component only shows a single state. I've gone ahead and added the different states to the mobile spec page to clarify, also added below:

Suggestion "tag" StateSuggestionLink suggestion text colourIcon (in colour)
InactiveUndecidedBase10Robot (Base10)
InactiveRejectedBase10Close (Red30)
InactiveAcceptedAccent50Check (Accent50)
ActiveUndecidedBase10Robot (Accent50)
ActiveRejectedBase10Close (Red30)
ActiveAcceptedAccent50Check (Accent50)

image.png (640×672 px, 56 KB)

kostajh moved this task from Ready for Development to Code Review on the Growth-Team (Sprint 0 (Growth Team)) board.Apr 13 2021, 2:27 PM
kostajh renamed this task from [Design review] Visual design tweaks for the suggested link tags in AI suggestions mode to [Design review] Visual design tweaks for the suggested link tags in Suggestions mode.Apr 14 2021, 9:13 AM
kostajh triaged this task as Medium priority.Apr 14 2021, 12:52 PM
kostajh moved this task from Code Review to QA on the Growth-Team (Sprint 0 (Growth Team)) board.Apr 14 2021, 8:10 PM
kostajh subscribed.

@RHo I've +2'ed the patch, but wanted to note the overlap between recommended link context items:

image.png (132×656 px, 66 KB)
image.png (132×656 px, 64 KB)

Not sure that we could do anything about that with the existing guidelines for padding + height.

kostajh moved this task from April 12 - April 16 to Done / QA on the Add-Link board.Apr 14 2021, 8:10 PM
gerritbot added a comment.Apr 14 2021, 8:22 PM

Change 678118 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Add a link: update annotation styles based on design review

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

ReleaseTaggerBot added a project: MW-1.37-notes (1.37.0-wmf.3; 2021-04-27).Apr 14 2021, 9:00 PM
Maintenance_bot removed a project: Patch-For-Review.Apr 14 2021, 9:10 PM
RHo added a comment.Apr 15 2021, 1:18 PM
In T279684#7000453, @kostajh wrote:

@RHo I've +2'ed the patch, but wanted to note the overlap between recommended link context items:

image.png (132×656 px, 66 KB)
image.png (132×656 px, 64 KB)

Not sure that we could do anything about that with the existing guidelines for padding + height.

Thanks @kostajh - I think this actually looks OK, esp. as the active tag is shown on overlapping on top.

• mewoph mentioned this in T279706: [BUG] Add link: link suggestion tag should not be split over two lines.Apr 15 2021, 5:11 PM
MBinder_WMF added a project: Growth-Team-Filtering.Apr 15 2021, 6:47 PM
• Rileych removed a project: Growth-Team-Filtering.Apr 20 2021, 4:44 PM
Etonkovidova moved this task from QA to Design Review on the Growth-Team (Sprint 0 (Growth Team)) board.Apr 21 2021, 1:58 AM
Etonkovidova subscribed.

For @RHo review - I also checked the actual specs, not only the overall look. All seem to be in place.

Issue detailsHow it looks now(previous) ActualExpected
i. More padding around the tag text than expectedDesktop:
Screen Shot 2021-04-20 at 5.42.33 PM.png (154×448 px, 31 KB)
Screen Shot 2021-04-20 at 5.45.07 PM.png (145×713 px, 43 KB)
Mobile:
Screen Shot 2021-04-20 at 6.23.26 PM.png (269×359 px, 56 KB)
Actual (Desktop):
Screen Shot 2021-04-07 at 4.25.48 PM.png (352×400 px, 70 KB)
Actual (Mobile):
image.png (580×666 px, 83 KB)
Expected:
image.png (530×1 px, 62 KB)
image.png (748×1 px, 85 KB)
ii. There should be a 2px border-radius around the tag (mobile and desktop)
Screen Shot 2021-04-20 at 6.31.40 PM.png (168×444 px, 28 KB)
Actual
image.png (112×228 px, 5 KB)
(no border radius)		Expected
image.png (256×952 px, 28 KB)
iii. Robot icon color on unselected tag should be Base20, not black. Also this is an icon (robot) that is available in the OOUI icons library so not sure if that could be used instead?
Screen Shot 2021-04-20 at 6.38.04 PM.png (486×731 px, 140 KB)
Actual
image.png (384×710 px, 54 KB)
Expected:
image.png (530×1 px, 62 KB)
iv. There is no underline on the active link tag
Screen Shot 2021-04-20 at 6.40.03 PM.png (205×580 px, 37 KB)
Actual
image.png (86×278 px, 5 KB)
Expected
image.png (800×700 px, 112 KB)
v. Active tag should have a dropshadow styling
Screen Shot 2021-04-20 at 6.43.10 PM.png (312×854 px, 89 KB)
Actual
image.png (86×210 px, 3 KB)
Expected
image.png (222×994 px, 37 KB)
vi. Accepted link suggestion text should be Accent50
Screen Shot 2021-04-20 at 6.49.05 PM.png (335×858 px, 67 KB)
Actual (betalab)
Screen Shot 2021-04-07 at 4.46.02 PM.png (233×609 px, 51 KB)
Expected
Screen Shot 2021-04-07 at 4.45.53 PM.png (236×891 px, 57 KB)
vii. Cross icon color on rejected tag should be Red30, not Red50 (#d33). Also this is an icon (Close) that is available in the OOUI icons library so not sure if that could be used instead?
Screen Shot 2021-04-20 at 6.57.59 PM.png (313×1 px, 100 KB)
Actual
image.png (180×620 px, 32 KB)
Expected:
image.png (266×980 px, 27 KB)
RHo moved this task from Design Review to In Progress on the Growth-Team (Sprint 0 (Growth Team)) board.Apr 21 2021, 7:00 PM

Thanks @Etonkovidova - all looks good except I've noticed the fix for item (v) has perhaps introduced a different issue in the active tag style, whereby the light blue background colour is now a muddy grey-blue colour instead:

Actual
image.png (196×606 px, 21 KB)
Expected
image.png (234×866 px, 31 KB)

I think this is partly due to the background colour having 0.5 opacity. @mewoph - would a simple fix be to amend the background-color on .ve-ce-annotation-active.ve-ce-linkAnnotation.mw-ge-recommendedLinkAnnotation from #EAF3FF @ 50% opacity to #F4F9FF?

In T279684#7022761, @Etonkovidova wrote:

For @RHo review - I also checked the actual specs, not only the overall look. All seem to be in place.

Issue detailsHow it looks now(previous) ActualExpected
i. More padding around the tag text than expectedDesktop:
Screen Shot 2021-04-20 at 5.42.33 PM.png (154×448 px, 31 KB)
Screen Shot 2021-04-20 at 5.45.07 PM.png (145×713 px, 43 KB)
Mobile:
Screen Shot 2021-04-20 at 6.23.26 PM.png (269×359 px, 56 KB)
Actual (Desktop):
Screen Shot 2021-04-07 at 4.25.48 PM.png (352×400 px, 70 KB)
Actual (Mobile):
image.png (580×666 px, 83 KB)
Expected:
image.png (530×1 px, 62 KB)
image.png (748×1 px, 85 KB)
ii. There should be a 2px border-radius around the tag (mobile and desktop)
Screen Shot 2021-04-20 at 6.31.40 PM.png (168×444 px, 28 KB)
Actual
image.png (112×228 px, 5 KB)
(no border radius)		Expected
image.png (256×952 px, 28 KB)
iii. Robot icon color on unselected tag should be Base20, not black. Also this is an icon (robot) that is available in the OOUI icons library so not sure if that could be used instead?
Screen Shot 2021-04-20 at 6.38.04 PM.png (486×731 px, 140 KB)
Actual
image.png (384×710 px, 54 KB)
Expected:
image.png (530×1 px, 62 KB)
iv. There is no underline on the active link tag
Screen Shot 2021-04-20 at 6.40.03 PM.png (205×580 px, 37 KB)
Actual
image.png (86×278 px, 5 KB)
Expected
image.png (800×700 px, 112 KB)
v. Active tag should have a dropshadow styling
Screen Shot 2021-04-20 at 6.43.10 PM.png (312×854 px, 89 KB)
Actual
image.png (86×210 px, 3 KB)
Expected
image.png (222×994 px, 37 KB)
vi. Accepted link suggestion text should be Accent50
Screen Shot 2021-04-20 at 6.49.05 PM.png (335×858 px, 67 KB)
Actual (betalab)
Screen Shot 2021-04-07 at 4.46.02 PM.png (233×609 px, 51 KB)
Expected
Screen Shot 2021-04-07 at 4.45.53 PM.png (236×891 px, 57 KB)
vii. Cross icon color on rejected tag should be Red30, not Red50 (#d33). Also this is an icon (Close) that is available in the OOUI icons library so not sure if that could be used instead?
Screen Shot 2021-04-20 at 6.57.59 PM.png (313×1 px, 100 KB)
Actual
image.png (180×620 px, 32 KB)
Expected:
image.png (266×980 px, 27 KB)
• mewoph added a comment.Apr 27 2021, 9:27 PM

Hi @RHo, that should address it. I'll update the background color to #F4F9FF

• mewoph moved this task from Done / QA to April 26 - April 30 on the Add-Link board.Apr 27 2021, 9:27 PM
gerritbot added a comment.Apr 27 2021, 9:33 PM

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

[mediawiki/extensions/GrowthExperiments@master] Add a link: Update background color value for active annotation

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

gerritbot added a project: Patch-For-Review.Apr 27 2021, 9:33 PM
• mewoph moved this task from In Progress to Code Review on the Growth-Team (Sprint 0 (Growth Team)) board.Apr 27 2021, 9:33 PM

Updated background color:

Screen Shot 2021-04-27 at 2.31.26 PM.png (664×952 px, 161 KB)

gerritbot added a comment.Apr 28 2021, 9:11 AM

Change 683090 had a related patch set uploaded (by Kosta Harlan; author: MewOphaswongse):

[mediawiki/extensions/GrowthExperiments@master] Add a link: Update background color value for active annotation & triangle

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

kostajh moved this task from Code Review to QA on the Growth-Team (Sprint 0 (Growth Team)) board.Apr 28 2021, 9:15 AM
kostajh moved this task from April 26 - April 30 to Done / QA on the Add-Link board.
gerritbot added a comment.Apr 28 2021, 9:25 AM

Change 683090 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Add a link: Update background color value for active annotation & triangle

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

Etonkovidova closed this task as Resolved.May 19 2021, 11:12 PM
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL