Page MenuHomePhabricator

Add a link: link inspector animations
Closed, ResolvedPublic

Description

NOTE: this is not for initial release. Though it is keeping its association with its original parent, it has been pushed to T276517: [EPIC] Growth: "add a link" structured task improvements.

See also T269644: Add a link: link inspector

Or here's an animated gif (open fullscreen to view in phab):

Add link mobile animation.mov.gif (1×940 px, 805 KB)

Mobile prototype w/annotation animation + auto-advance https://o1ygce.axshare.com/#id=czkbz3&c=1&c=1&p=02_vara_article-dbp

For desktop, see T284260: Add a link: desktop animations

Event Timeline

kostajh added subscribers: MMiller_WMF, RHo.

We'll probably have to do T267706: Add a link in VE: Use a permanent context instead of VE's built-in context if we want these animations. The engineers discussed this in our meeting yesterday; we've identified this as a potential candidate for something to do after the initial release. cc @RHo and @MMiller_WMF

We'll probably have to do T267706: Add a link in VE: Use a permanent context instead of VE's built-in context if we want these animations. The engineers discussed this in our meeting yesterday; we've identified this as a potential candidate for something to do after the initial release. cc @RHo and @MMiller_WMF

Hi @kostajh - is there some other animation that is feasible in the interim? I am thinking something like the suggestion fading out and the next one fading in instead of sliding in on mobile.

We'll probably have to do T267706: Add a link in VE: Use a permanent context instead of VE's built-in context if we want these animations. The engineers discussed this in our meeting yesterday; we've identified this as a potential candidate for something to do after the initial release. cc @RHo and @MMiller_WMF

Hi @kostajh - is there some other animation that is feasible in the interim? I am thinking something like the suggestion fading out and the next one fading in instead of sliding in on mobile.

Now that I'm thinking about this more, I believe we could do the slide left / right without T267706: Add a link in VE: Use a permanent context instead of VE's built-in context, if I understand the proposal correctly. What we can't do is show the contents of two link inspector widgets at once, since they are only rendered one at a time. Our current mobile experience shows the link inspector animating up from the bottom, so I think we could implement the slide left/right for the previous / next buttons.

We'll probably have to do T267706: Add a link in VE: Use a permanent context instead of VE's built-in context if we want these animations. The engineers discussed this in our meeting yesterday; we've identified this as a potential candidate for something to do after the initial release. cc @RHo and @MMiller_WMF

Hi @kostajh - is there some other animation that is feasible in the interim? I am thinking something like the suggestion fading out and the next one fading in instead of sliding in on mobile.

Now that I'm thinking about this more, I believe we could do the slide left / right without T267706: Add a link in VE: Use a permanent context instead of VE's built-in context, if I understand the proposal correctly. What we can't do is show the contents of two link inspector widgets at once, since they are only rendered one at a time. Our current mobile experience shows the link inspector animating up from the bottom, so I think we could implement the slide left/right for the previous / next buttons.

Hi @Kosta - that sounds great if the mobile animation can be done. I've added an animation example for the mobile version to help clarify the behaviour.
You can try the live prototype here (tap "Next", then the back chevron "<"):
https://www.figma.com/proto/2SONd8P1tsexIB5coMOp8h/Structured-tasks-v1.0?node-id=1574%3A66383&viewport=289%2C-8463%2C0.35500138998031616&scaling=min-zoom&page-id=181%3A65

Or here's an animated gif (open fullscreen to view in phab):

Add link mobile animation.mov.gif (1×940 px, 805 KB)

RHo updated the task description. (Show Details)
MMiller_WMF renamed this task from Link inspector animations to Add a link: link inspector animations.Mar 30 2021, 7:39 PM
MMiller_WMF updated the task description. (Show Details)
kostajh triaged this task as Medium priority.Apr 26 2021, 7:53 PM

Currently on desktop, the scrolling is done via VE's scrollSelectionIntoView which happens when the selection changes. In the desktop prototype, the scroll occurs before the selection is applied, so I think we would need to manually scroll to the next annotation view then select the next suggestion.

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

[mediawiki/extensions/GrowthExperiments@master] Add a link: link inspector animations for mobile + cleanup

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

With latest changes:

mobile_linkInspectorAnimation.gif (1×746 px, 2 MB)

@RHo does that look good to you?

With latest changes:

mobile_linkInspectorAnimation.gif (1×746 px, 2 MB)

@RHo does that look good to you?

Is there still animation to scroll the article area to the next link missing? I'm missing that to highlight where the 'active' link suggestion is. I am particularly talking about the moment in the demo when the user selects "Yes" on indíani and it auto-advances to žlázy.

Hi @RHo — would it be ok for mobile to have the same sequence of interaction as desktop?

To clarify, here are the sequences (as I gather them) from your prototypes:

Desktop

  1. Click Next
  2. Scroll to recommendation in the article
  3. Link inspector for the next recommendation is shown

Mobile

  1. Click Next
  2. Link inspector for the next recommendation is shown
  3. Scroll to recommendation in the article

Unfortunately with the current setup, to achieve the sequence described here on mobile would require a fairly significant reworking of our code (since this would require us to "peek" the recommendation content or to show its content without selecting the corresponding annotation).

Here's what the flow looks like on mobile w/the same sequence as desktop.

mobile_linkInspectorAnimation_withScroll.gif (1×746 px, 3 MB)

Hi @RHo — would it be ok for mobile to have the same sequence of interaction as desktop?

To clarify, here are the sequences (as I gather them) from your prototypes:

Desktop

  1. Click Next
  2. Scroll to recommendation in the article
  3. Link inspector for the next recommendation is shown

Mobile

  1. Click Next
  2. Link inspector for the next recommendation is shown
  3. Scroll to recommendation in the article

Unfortunately with the current setup, to achieve the sequence described here on mobile would require a fairly significant reworking of our code (since this would require us to "peek" the recommendation content or to show its content without selecting the corresponding annotation).

Here's what the flow looks like on mobile w/the same sequence as desktop.

mobile_linkInspectorAnimation_withScroll.gif (1×746 px, 3 MB)

Thanks @mewoph - yes, having Mobile with the same sequence as Desktop (with link inspector animation last) works well.

@mewoph on Firefox, there's an empty-ish link inspector that appears on page load at the top left

@kostajh Thanks for pointing this out. I mistakenly removed showFirstRecommendation implementation for desktop (which fades in the link inspector when it's positioned).

Animation when buttons are in 2 lines:

addlink_mobileAnimation_overflowNav.gif (1×628 px, 1 MB)

Animation when buttons are in 2 lines:

addlink_mobileAnimation_overflowNav.gif (1×628 px, 1 MB)

Thanks for fixing that @mewoph! Looks good to me.


@RHo, I can't recall what our spec was, but do we want the inspector to auto advance when the user has toggled Yes/No? For example, the user taps Yes for the first recommendation, then goes back and taps Yes so both Yes and No are deselected. To me, it would make sense to *not* auto advance in that situation since it wasn't an explicit Yes/No action (and there is not a "Skip"/"Unsure" button).

Animation when buttons are in 2 lines:

addlink_mobileAnimation_overflowNav.gif (1×628 px, 1 MB)

Thanks for fixing that @mewoph! Looks good to me.


@RHo, I can't recall what our spec was, but do we want the inspector to auto advance when the user has toggled Yes/No? For example, the user taps Yes for the first recommendation, then goes back and taps Yes so both Yes and No are deselected. To me, it would make sense to *not* auto advance in that situation since it wasn't an explicit Yes/No action (and there is not a "Skip"/"Unsure" button).

Hi @kostajh - yes that is correct. The spec calls for auto-advance when on selection only, so the deselection action would not trigger auto-advance.

Animation when buttons are in 2 lines:

addlink_mobileAnimation_overflowNav.gif (1×628 px, 1 MB)

Thanks for fixing that @mewoph! Looks good to me.


@RHo, I can't recall what our spec was, but do we want the inspector to auto advance when the user has toggled Yes/No? For example, the user taps Yes for the first recommendation, then goes back and taps Yes so both Yes and No are deselected. To me, it would make sense to *not* auto advance in that situation since it wasn't an explicit Yes/No action (and there is not a "Skip"/"Unsure" button).

Hi @kostajh - yes that is correct. The spec calls for auto-advance when on selection only, so the deselection action would not trigger auto-advance.

Ah, already filed as T284230: Add a link: de-selecting Yes/No should not auto-advance (mobile) :)

Change 699282 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Add a link: link inspector animations for mobile + cleanup

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

Etonkovidova added a subscriber: Etonkovidova.

Checked in testwiki wmf.14 - the animation is smooth and logical (the card changes only after the scrolling to the next link comes to a full stop), and the timing feels balanced.