Page MenuHomePhabricator

Add a link: mobile swiping gesture in link inspector
Closed, ResolvedPublicFeature

Description

Add swipe gesture to the centre area of the Add links inspector as an enhancement and for consistency with the suggested edits feed gesture on mobile.

Screen Shot 2021-09-15 at 8.40.25 AM.png (1×678 px, 277 KB)

Event Timeline

kostajh changed the subtype of this task from "Task" to "Feature Request".Sep 3 2021, 10:27 AM
kostajh added subscribers: MMiller_WMF, RHo.

@RHo / @MMiller_WMF leaving this for you two to decide on.

@RHo / @MMiller_WMF leaving this for you two to decide on.

Hi @Kosta - I agree this could be a good enhancement, but worry whether the fact that there are multiple different tap targets in the inspector sheet could be unwieldy to handle, so actually wonder if @mewoph could weigh in on how easy/hard this would be to implement without causing issues with people accidentally tapping something when trying to swipe and vice versa.

Hi @RHo I think it could work if we limit the tap area to be the container above the buttons since the only tap target here is the article title.

Screen Shot 2021-09-15 at 8.40.25 AM.png (1×678 px, 277 KB)

Hi @RHo I think it could work if we limit the tap area to be the container above the buttons since the only tap target here is the article title.

Screen Shot 2021-09-15 at 8.40.25 AM.png (1×678 px, 277 KB)

Cool cool, and assume you mean limit the swipe area to this central section? Let's do it, I'll update the task description now, though will leave to @MMiller_WMF to prioritise accordingly.

RHo triaged this task as Medium priority.Sep 15 2021, 4:07 PM
RHo updated the task description. (Show Details)
MMiller_WMF raised the priority of this task from Medium to High.Sep 21 2021, 2:19 AM

@RHo @MMiller_WMF A few clarifications:

  • For instrumentation, should we also add separate events (similar to in the suggested edits feed) or would the the existing back & next events be sufficient? (cc: @nettrom_WMF)
  • When the user swipes left on the last card, should the action be ignored or should that be the same as if they were to click Next (proceed to save / show skip all dialog etc)?

@mewoph -- I am okay with not adding new events for these swipes. It's a level of analytics granularity that I don't think we'll get to, since there are so many other things about "add a link" we need to analyze.

The question about swiping the last card is better for @RHo.

@mewoph -- I am okay with not adding new events for these swipes. It's a level of analytics granularity that I don't think we'll get to, since there are so many other things about "add a link" we need to analyze.

It would be helpful to know the usage of mobile gestures for the wider Design and Design systems team as we start adding these to more of our products. Would it be OK to add if it is minimal effort?

The question about swiping the last card is better for @RHo.

It makes sense to add it as well as consistent to the same behaviour as pressing the previous and next buttons so let's go with that please.

@mewoph -- I am okay with not adding new events for these swipes. It's a level of analytics granularity that I don't think we'll get to, since there are so many other things about "add a link" we need to analyze.

It would be helpful to know the usage of mobile gestures for the wider Design and Design systems team as we start adding these to more of our products. Would it be OK to add if it is minimal effort?

@MMiller_WMF @RHo It should be pretty minimal effort to add something like navigation_type: swipe to action_data (for existing back & next events) to distinguish these use cases. That way, the data is there in case we do need it but no new events are added.

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

[schemas/event/secondary@master] Add a link: Update action_data for back and next events to account for navigation type

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

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

[mediawiki/extensions/GrowthExperiments@master] Add a link: support swipe navigation in mobile link inspector

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

With latest changes:

Updated action_data:

event: {
  "action": "next",
  "action_data": "link_target=Kopulace;link_text=Páření;probability_score=0.6000307202339172;series_number=0;rejection_reason=;acceptance_state=undecided;navigation_type=swipe",
  "is_mobile": true,
  "active_interface": "recommendedlinktoolbar_dialog",
  "newcomer_task_token": "8b3c30075bcac4517ec7",
  "page_id": 1732,
  "page_title": "Kapybara",
  "homepage_pageview_token": "gl43tg9lusagh8ea0e1q93et1t1slq0m",
  "$schema": "/analytics/mediawiki/structured_task/article/link_suggestion_interaction/1.3.0",
  "meta": {
    "stream": "mediawiki.structured_task.article.link_suggestion_interaction",
    "domain": "192.168.86.22"
  },
  "dt": "2021-09-24T17:38:21.433Z"
}
event: {
  "action": "back",
  "action_data": "link_target=Voda;link_text=vodě;probability_score=0.5745410919189453;series_number=1;rejection_reason=;acceptance_state=undecided;navigation_type=swipe",
  "is_mobile": true,
  "active_interface": "recommendedlinktoolbar_dialog",
  "newcomer_task_token": "8b3c30075bcac4517ec7",
  "page_id": 1732,
  "page_title": "Kapybara",
  "homepage_pageview_token": "gl43tg9lusagh8ea0e1q93et1t1slq0m",
  "$schema": "/analytics/mediawiki/structured_task/article/link_suggestion_interaction/1.3.0",
  "meta": {
    "stream": "mediawiki.structured_task.article.link_suggestion_interaction",
    "domain": "192.168.86.22"
  },
  "dt": "2021-09-24T17:39:09.089Z"
}

LTR navigation:

addlink_swipe_inspector.gif (1×800 px, 1 MB)

RTL navigation:

addlink_swipe_inspector_rtl.gif (1×800 px, 668 KB)

Change 723601 merged by jenkins-bot:

[schemas/event/secondary@master] Add a link: Update action_data for back, next actions to account for navigation type

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

Change 723602 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Add a link: support swipe navigation in mobile link inspector

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

Etonkovidova added a subscriber: Etonkovidova.

Checked on testwiki wmf.2 - moving to Design review.

@RHo - could you do a quick review? If all looks ok - you may close the task as Resolved (I'll check it on group 1 and group 2 wikis, of course).
Two notes:

  • the area to swipe is rather too precise - the swipe gesture should be made exactly in the middle of the link inspector
  • the animation is sort of a two-step process: after a swipe, first, the text scrolls to the position of the link and, only then, the link inspector changes to the different card with a link. It's not noticeable when the recommended links are close to each other in the article.

Thanks @Etonkovidova for the ping! I think it's OK from my review – detailed responses to your notes below.
https://youtu.be/E0wo8FrRvJI

Checked on testwiki wmf.2 - moving to Design review.

@RHo - could you do a quick review? If all looks ok - you may close the task as Resolved (I'll check it on group 1 and group 2 wikis, of course).
Two notes:

  • the area to swipe is rather too precise - the swipe gesture should be made exactly in the middle of the link inspector

Yeah this is tricky but I think the more precise swipe area in the center is good, since swiping on the edges of (at least Chrome) mobile browsers triggers the browser back action so there might be some conflict with the built in brower swipe action if we make it extend too much.

  • the animation is sort of a two-step process: after a swipe, first, the text scrolls to the position of the link and, only then, the link inspector changes to the different card with a link. It's not noticeable when the recommended links are close to each other in the article.

Yes, but I think we want to maintain the consistency with this two-step animation when advancing via the next/prev buttons and tapping on non-sequential link tags in the UI.