Page MenuHomePhabricator

Add a link: mobile swiping gesture in suggested edits feed
Open, MediumPublic

Description

NOTE: this task is not required for the release of "add a link", but would be nice to have. See T268708.

We've noticed in user tests that users instinctively want to swipe through the suggested edits feed, but right now, the only way to navigate is by tapping the arrows. In addition to the arrows, we want to add swiping:

  • Users can swipe left or right to navigate through their task feed.
  • When the user swipes, the task card should animate left or right off the screen, and the next card should animate on.
  • Move the existing left and right icons to the footer on either side of the Edit call to action button.

Example from Axure prototype:

Event Timeline

Does "animate" mean just that, or some kind of drag mechanics (where the card moves in sync with your finger so it feels like dragging paper)? The latter is common on mobile apps but probably more effort.

Does "animate" mean just that, or some kind of drag mechanics (where the card moves in sync with your finger so it feels like dragging paper)? The latter is common on mobile apps but probably more effort.

Preferably the latter with some haptic feedback.

RHo renamed this task from Add a link: mobile swiping in suggested edits feed (nice to have) to Add a link: mobile swiping gesture in suggested edits feed along with moving left and right arrows to footer (nice to have).Nov 25 2020, 11:36 AM
MMiller_WMF renamed this task from Add a link: mobile swiping gesture in suggested edits feed along with moving left and right arrows to footer (nice to have) to Add a link: mobile swiping gesture in suggested edits feed (nice to have).Nov 25 2020, 5:04 PM
MMiller_WMF updated the task description. (Show Details)
RHo renamed this task from Add a link: mobile swiping gesture in suggested edits feed (nice to have) to Add a link: mobile swiping gesture in suggested edits feed .Jan 26 2021, 3:03 PM
RHo updated the task description. (Show Details)
kostajh triaged this task as Medium priority.Apr 26 2021, 7:54 PM
MMiller_WMF added a subscriber: mewoph.

@mewoph -- this is a user interface improvement that is Ready for Development, and is a good candidate for our interlude period right now. My understanding is that nothing in Mediawiki works like this yet, and I imagine that the first order of business is just to get a sense of what it would take to make this "grabbing and swiping" gesture possible for our mobile web experience. After we assess that, we can decide whether/how to proceed.

Some rough ideas for swipe gesture implementation:

  • Calculate the delta of Touch.clientX via touchstart and touchmove events and use that to determine whether the swipe gesture was for left or right (will need to make sure to handle both LTR and RTL sites)
  • Make suggested-edits-card draggable, create drop areas on the sides and update the content upon drop

In either case, we probably need to render two cards at once instead of one so that when the top one moves, the second one appears.

Hi @RHo,

A couple of things:

  • Haptic feedback is not possible on iOS since iOS & Safari do not support Navigator.vibrate API, so haptic feedback would only be for Android.
  • The task description is not part of the card. Would the description for the new card just pop in when the next card becomes the top card?

Screen Shot 2021-07-02 at 3.48.35 PM.png (724×594 px, 268 KB)

Hi @RHo,

A couple of things:

  • Haptic feedback is not possible on iOS since iOS & Safari do not support Navigator.vibrate API, so haptic feedback would only be for Android.
  • The task description is not part of the card. Would the description for the new card just pop in when the next card becomes the top card?

Screen Shot 2021-07-02 at 3.48.35 PM.png (724×594 px, 268 KB)

hi @mewoph - yes that's right, the description should pop in if it's different on swiping forward/backward in the queue. I've added a screencast from the axure prototype as an indicative demo if that helps.

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

[mediawiki/extensions/GrowthExperiments@master] [WIP] Suggested Edits: Add mobile swiping gesture

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

Change 704634 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Suggested Edits: Add mobile swiping gesture for task feed

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

MMiller_WMF moved this task from QA to Design Review on the Growth-Team (Current Sprint) board.

I think this task should get design review from @RHo, so I'm reopening it and putting it in that column. Thank you!

Hi @mewoph thanks this looks good to me but it looks like there has been a slight regression where the card no longer has the border-radius 2px (you can still see it on desktop).
Would you prefer I open a new task or to keep on this one?

Hi @RHo, please open a new task. I don't think this is a regression. We never had the rounded corners for the mobile task card. Here's a screenshot from before this change was merged.

Screen Shot 2021-08-16 at 9.09.11 AM.png (1×1 px, 974 KB)

Hi @RHo, please open a new task. I don't think this is a regression. We never had the rounded corners for the mobile task card. Here's a screenshot from before this change was merged.

Screen Shot 2021-08-16 at 9.09.11 AM.png (1×1 px, 974 KB)

Got it, thanks I've created a task here T288979

@mewoph -- Thank you for adding this innovation to the suggested edits feed! I have a couple questions from testing this, and so I'm reopening to discuss. I can file additional tasks if needed.

  • In your implementation, the swipe gesture triggers the swipe animation, but the card does not "stick" to my finger as I swipe it. Is that "stick to finger" style something that's easy enough to implement? Or is that a different set of work?
  • I was thinking that it would be better if we speed up the swipe animation. I was comparing to the speed of swiping the home screen on my iPhone, or swiping app suggestions in the App Store from my iPhone. Could it be sped up?
  • On my iPhone SE in Safari, any direction of swipe triggers the swipe animation, even if directly up or down. In other words (using a clock analogy), swiping at 11:59 sends the card left, and swiping at 12:01 sends it right. I think that's likely frustrating to the user, because swiping up and down is actually necessary to see the whole card area sometimes. Is it possible to make the swipe-clock range something like the following? Or perhaps there are industry standards? See my video below for an example of what I'm experiencing.
    • Left = 8:00 to 10:00
    • Right = 2:00 to 4:00

Video: https://drive.google.com/file/d/1Stn2_O4RdYZYJuqK660yTpd3i0O4Mz9f/view?usp=sharing

Hi @MMiller_WMF,

Making the card stick to the touch would be a different set of work and might require a fairly significant reworking of the suggested edits screen. Can you file a separate task?

The timing of the animation can be updated easily. Reducing the sensitivity of the vertical swipe should be fairly straightforward as well. Updated via T289627: Suggested Edits: Improve swiping animation (mobile)

FYI I filed another task to make the topic & difficulty filters so the vertical scrolling should be less weird since only the content would scroll T288842: Suggested Edits: Topic & difficulty filters should be fixed along with header (mobile)