T259233: Wikipedia Preview card dragging gestures

[medied]

https://phabricator.wikimedia.org/T259233

Problem

Currently, users need to tap 'Continue reading' button expand preview card. We would like to improve the user experience by allowing users to also be able to drag on mobile to interact with preview card

Solution

Allow users to drag up to expand preview card, drag down to close it, following specified requirements:

• To drag up and reveal more content, user should be able to drag up from either the body or header of the card
• To drag down and close the Wikipedia Preview card, users should only be able to drag down the card header. This is to not interfere with any possible text scrolling
• The tap gesture should remain unchanged

Solution inspired from #56

---

TODOs

• Design clarification: swipe up initial touch position
• Design clarification: swipe down gesture when scrolling text is present

[hueitan]

Something missing and recommend to do it

1. Before expand, drag down should close the popup
2. After expand, does drag down more than 60px too less? too sensitive?
3. once drag match the threshold, apply the animation drag to the expanded (closed) position
4. Tap CTA (Continue reading) doesn't expand the card height
5. "throw" event that require duration calculation.

[hueitan]

insert the code e.preventDefault() here (touchmove) to prevent lagging sometimes

[medied]

Looks like adding e.preventDefault() messes with the text scrolling actually

[hueitan]

Opsss, then better don't have this code.

[medied]

Before expand, drag down should close the popup
After expand, does drag down more than 60px too less? too sensitive?
Tap CTA (Continue reading) doesn't expand the card height

Cool, addressed 1, 2 & 4

once drag match the threshold, apply the animation drag to the expanded (closed) position
"throw" event that require duration calculation.

Could you please elaborate on 3 & 5?

[hueitan]

Could you please elaborate on 3 & 5

3. once drag match the threshold, apply the animation drag to the expanded (closed) position

Currently, when the touchend event apply, the preview card is instantly expanded or hide, it's better to have the animation (transition in css) instead of sudden appear sudden hide

5. "throw" event that require duration calculation.

quick swipe within the given threshold, similar to gallery slider, quick swipe to get the next image instead of swiping more than 40% of the image, this gives a better experience for user who knows how to swipe.

[medied]

Could you please elaborate on 3 & 5

1. once drag match the threshold, apply the animation drag to the expanded (closed) position

Currently, when the touchend event apply, the preview card is instantly expanded or hide, it's better to have the animation (transition in css) instead of sudden appear sudden hide

1. "throw" event that require duration calculation.

quick swipe within the given threshold, similar to gallery slider, quick swipe to get the next image instead of swiping more than 40% of the image, this gives a better experience for user who knows how to swipe.

Alright I'd like to share this exploration sub-branch and have at least you and Sudhanshu play with it and see how it feels:

T259233-swipe-more-content-animation-exploration: 24d75c2

Some observations & thoughts:

• The transition on dragging up feels about right to me. There's transition when the card is dragged within the threshold as well.
• What could need some more refinement is the transition when dragging down, past the threshold to close the card
  • Since we actually switch the visibility to hidden, it still may feel a bit sudden
    • https://stackoverflow.com/questions/27900053/css-transition-with-visibility-not-working
  • Doing some research and looking around at some solutions, what may feel better is to apply a slight "reverse animation" where the card height reduces to some point and then visibility gets set to hidden
  • Would we want that same animation when a user clicks outside card though? Just another thing to think about
  • But I want you all to play with it first for feedback, it may be the case as well that it feels fine the way it is right now in T259233-swipe-more-content-animation-exploration
• Given the current threshold, it's possible the "quick swipe/drag" is not necessary. Would like to get Sudhanshu's input on that as well.

[hueitan]

Nice gesture!