Page MenuHomePhabricator

Add a link: animate icon in recommended link annotation when acceptance changes
Open, MediumPublic

Description

When these icons change, there should be an animation with the icon pushing upwards from the bottom of the highlight area.

This can be a bit complicated since the annotation is destroyed when the acceptance status changes and a new one is created. In order to animate from one state to the next, the annotation would have to be aware of what its prior state was and animate accordingly.

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

MMiller_WMF added a subscriber: MMiller_WMF.

@mewoph @kostajh -- I am okay with this task being cut from initial scope if it's non-trivial. Do you agree?

@MMiller_WMF — I agree. I have some initial changes, but it's especially jarring given the presence of this issue T278450: Add a link: wrong annotation updated when accepting/rejecting recommendation so I would like to revisit after this issue is fixed.

kostajh triaged this task as Medium priority.Apr 7 2021, 10:38 AM
kostajh moved this task from Backlog to Post-release backlog on the Add-Link board.
RHo added a subscriber: RHo.

@mewoph @kostajh -- I am okay with this task being cut from initial scope if it's non-trivial. Do you agree?

I'm OK with this too, but could we please explicitly call this out for putting into leftovers on the original task in Design review before tasking out in future? Thanks.

Hi @RHo, I have a couple of clarification questions:

  • Should the icon animation apply to mobile as well? I wasn't sure if this would be necessary since with auto-advance, the annotation might no longer be in the viewport.
  • When the Accept/Reject buttons are toggled, should the icon animate downward?

Hi @RHo, I have a couple of clarification questions:

  • Should the icon animation apply to mobile as well? I wasn't sure if this would be necessary since with auto-advance, the annotation might no longer be in the viewport.
  • When the Accept/Reject buttons are toggled, should the icon animate downward?

Hi @mewoph - yes to both. The axure prototype may be helpful here to give indication of roughly desired timings for the toggle to occur first and then auto-advance to occur: https://o1ygce.axshare.com/#id=akxfol&c=1&c=1

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

[mediawiki/extensions/GrowthExperiments@master] Add a link: animate annotation icons when acceptance changes

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

Desktop animation:

annotationAnimation_desktop.gif (1×2 px, 3 MB)

Mobile animation:

annotationAnimation_mobile.gif (1×744 px, 1 MB)

Change 697877 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Add a link: animate annotation icons when acceptance changes

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

Etonkovidova added a subscriber: Etonkovidova.

For @RHo review - checked in testwiki wmf.11, all looks as in @mewoph gifs above.

Notes:
However, with the auto-advancing on mobile, the added animation adds too much action to the UI.

  • mobile ( screen resolutions 375-414) viewport for add link is really small, so the animation and the auto-advancing are happening in a more abrupt manner
  • For the last add link, after it was marked "Yes"/"No", the animation does not even finish when "Save your changes" overlay appears.

Here is the animated gif from `testwiki, the screen resolution=414:

animation4_gif.gif (850×434 px, 395 KB)

And here is only the last add link action:
animation5_gif.gif (850×434 px, 160 KB)

For @RHo review - checked in testwiki wmf.11, all looks as in @mewoph gifs above.

Notes:
However, with the auto-advancing on mobile, the added animation adds too much action to the UI.

  • mobile ( screen resolutions 375-414) viewport for add link is really small, so the animation and the auto-advancing are happening in a more abrupt manner
  • For the last add link, after it was marked "Yes"/"No", the animation does not even finish when "Save your changes" overlay appears.

Here is the animated gif from `testwiki, the screen resolution=414:

animation4_gif.gif (850×434 px, 395 KB)

And here is only the last add link action:
animation5_gif.gif (850×434 px, 160 KB)

Thanks @Etonkovidova - I agree the auto-advance is interfering with the animation. @mewoph - is it possible to tweak both the icon animation speed (maybe reduce time by 200ms), as well as delay the auto-advance a bit (say by 400ms?)?

Hi @RHo — yes, I'll make the changes along with the rest of the mobile animation work. Here's the latest animation w/auto-advance:

addlink_mobile_animation_autoAdvance.gif (1×752 px, 1 MB)