Page MenuHomePhabricator

Touch interactions and positioning
Closed, ResolvedPublic

Description

Goal

The goal of this task is to describe the open and close functionality for Wikipedia Preview on mobile as well as the position of the popup on the screen.

User

Reader on a partner's website

Interaction

  • A reader will tap on a hyperlink on the website they are visiting
  • A preview card will appear at the bottom of the phone screen as a bottom sheet
  • The card can either have a close button or the user can tap outside the screen to close the card

Design

Preview before tapPreview after tap
zeplin

https://app.zeplin.io/project/5edf645eef92dfb2dc2f8ce8/dashboard?seid=5edf6538786044b779ffa643

Interaction details

  • Users can view previews by tapping on links present in an article.
  • After tapping preview is in focus and rest of the screen area has an overlay.
  • Users can close the previews either by tapping outside or tap on the close button.
  • Background freezes when preview is active.

Event Timeline

AMuigai created this task.Apr 21 2020, 12:33 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptApr 21 2020, 12:33 PM
AMuigai moved this task from Backlog to Next up on the Inuka-Team board.Apr 21 2020, 12:56 PM
AMuigai moved this task from Next up to Kanban on the Inuka-Team board.Apr 27 2020, 8:19 AM
AMuigai edited projects, added Inuka-Team (Kanban); removed Inuka-Team.
SGautam_WMF added a subscriber: SGautam_WMF.
AMuigai triaged this task as Medium priority.May 14 2020, 1:01 PM
SGautam_WMF updated the task description. (Show Details)May 25 2020, 1:21 PM
SGautam_WMF updated the task description. (Show Details)May 26 2020, 4:26 AM
SGautam_WMF updated the task description. (Show Details)Jun 3 2020, 2:29 AM
SGautam_WMF updated the task description. (Show Details)Jun 3 2020, 10:33 AM
AMuigai updated the task description. (Show Details)Jun 3 2020, 1:11 PM
SBisson removed SGautam_WMF as the assignee of this task.Jun 3 2020, 8:57 PM
SGautam_WMF updated the task description. (Show Details)Jun 9 2020, 10:53 AM
SBisson renamed this task from Open and close actions for Wikipedia Preview on mobile to Touch interactions and positioning.Fri, Jun 26, 12:36 AM
SBisson updated the task description. (Show Details)
AMuigai updated the task description. (Show Details)Tue, Jun 30, 7:22 PM
eamedina claimed this task.Wed, Jul 1, 12:33 AM
eamedina moved this task from Ready for Dev to Dev on the Inuka-Team (Kanban) board.
SBisson added a subscriber: SBisson.Thu, Jul 2, 1:58 PM

@SGautam_WMF what do you think the layout should be on ipad or large touch devices?

I think it would be worth exploring preview for touch devices as a separate ticket as I believe it's size can change along with how we turn them on/off e.g. Wikipedia iPad app does have page preview available but then you are supposed to hold the tap for a couple of seconds before it triggers. So for now, we can consider using the existing layout for iPad or tablet devices and let preview be positioned around the hyperlinked word itself.

Also, @SBisson for iPad or tablet touch devices is it easy to change the preview card CTA from "Continue Reading" to "Read more on Wikipedia"? and then tapping on "Read more on Wikipedia" will open a new tab to show the Wikipedia article. As compare to phones we will have more real state on such touch devices so we can let users directly go on Wikipedia to read the entire article rather than expanding the preview card.

By the way, given that this ticket is very mobile-centric, I'm leaving here instructions on how to run/test local branch directly on your mobile phone:

  • Start the server with npm run dev as usual
  • Make sure your mobile is connected to the same wifi as your laptop
  • Find you IP address:
    • For MacOS, you can go to System Preferences > Network and should find your IP address listed as below [1]
  • Finally, to view the test page, you can visit the IP address in your browser by typing 'http://<IP address here>:8080' (or whatever port number)

This is how I tested for Safari, Chrome and Firefox directly on the phone. I also tested on an ipad I found at home, look as expected for touch devices.


[1]

@eamedina though in general, it's working as expected, however, I found some minor issues on different android devices, not sure we need news tickets or we can take care of them as part of this ticket.

A dotted blue line appears after taping on "Read more on Wikipedia". This is happening in Firefox(68.10.0).

Unable to view & scroll the long text preview header after tapping on "Continue reading". I only found it in an entry-level Xiaomi android phone.

Also is it possible to freeze the background when preview is active?

Unable to view & scroll the long text preview header after tapping on "Continue reading". I only found it in an entry-level Xiaomi android phone.

I believe there have been some commits since we last talked, could you try a git pull and test this scrolling again? As of right now, the last two commit from the git log should be:

emedina@Eduardos-MacBook-Pro-2 wikipedia-previews % git log
commit 33d3265b0cba5625ba9a6b58da1265d62c9e4920 (HEAD -> T250797-touch-interactions, origin/T250797-touch-interactions, origin/T250796-layout-touch, T250796-layout-touch)
Author: Eduardo <medina.eag@gmail.com>
Date:   Tue Jul 7 20:40:35 2020 -0400

    Fix tests by passing isTouch as argument

commit a086b4112b528c54c3183596106b1d374719e28a
Author: Eduardo <medina.eag@gmail.com>
Date:   Tue Jul 7 20:32:40 2020 -0400

    Add layout specifications for touch devices

Also is it possible to freeze the background when preview is active?

I was actually also thinking about the same here yea. So 'freeze background' as in enable the scrolling only on popup (if there's longer text) and no scrolling on the actual page on the back.

A dotted blue line appears after taping on "Read more on Wikipedia". This is happening in Firefox(68.10.0).

This I'm not able to replicate quite yet (with Firefox on an iphone with the Wikipedia app installed). When I click on read more CTA it opens the Wikipedia app, good to know that deep linking is working. Will continue trying

eamedina added a comment.EditedWed, Jul 8, 5:31 PM

I have pushed commits to address the scrolling/frozen background as well as minor styling (popup height), and now this PR is merged to master. The demo page on mobile show now display these changes: https://wikimedia.github.io/wikipedia-preview

A dotted blue line appears after taping on "Read more on Wikipedia". This is happening in Firefox(68.10.0).

Neither Huei nor I were able to replicate this bug, it's a good candidate for a separate ticket I think. It's probably very device+brower specifc.

eamedina moved this task from Code Review to QA on the Inuka-Team (Kanban) board.Wed, Jul 8, 5:31 PM

Note to QA :

PR https://github.com/wikimedia/wikipedia-preview/pull/18

This feature is being merged to master branch before the QA test, as other tasks require the mobile interaction to continue with.

SGautam_WMF updated the task description. (Show Details)Thu, Jul 9, 9:38 AM
Jpita moved this task from QA to Design sign off on the Inuka-Team (Kanban) board.Fri, Jul 10, 2:25 AM
Jpita added a subscriber: Jpita.

created T257645 to solve an issue found on this task.

AMuigai closed this task as Resolved.Tue, Jul 14, 4:47 PM