Page MenuHomePhabricator

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

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)

Event Timeline

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.

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

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

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)

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 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 added a subscriber: kostajh.

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

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

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

Etonkovidova added a subscriber: Etonkovidova.

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)

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?

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)

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

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

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

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