Page MenuHomePhabricator

Article pagination
Closed, ResolvedPublic

Description

Why are we doing this?

Pixel scrolling without touch gestures can be tiresome, so we would like to provide a way for users to quickly page through a Wikipedia article without needing to rely on pixel scrolling.

User story

As a user, I want to easily navigate between article pages, so that I can read content easily on my small screen

Acceptance criteria

Dedicated hardware keys for 'next' and 'previous' to navigate through article pages

Proposed designs

Click through prototype

Coming soon

Mocks
Article title pageSecond page of articleThird page of article
https://zpl.io/25oJjKJhttps://zpl.io/V05Lko9https://zpl.io/agOQq3Q
Interaction details
ScreenD-pad centerD-pad up/downD-pad left/rightLSKRSK
Article headerSelects focused linkUp- N/A, Down - Moves to next page in articleCycles through header options (and links if there is no lead image)Returns to search resultsOpens menu
Article bodySelects focused linkMoves up and down through pages in articleCycles through linksReturns to search resultsOpens menu
Design details
  • Left and right hardware keys move the focus through the links on the page
  • Up and down hardware keys page back and forth in the article
  • Hardware back (end call) button moves user back in the stack
To be defined
  • Should the yellow scroll depth marker change in width based on article length or should it take larger jumps for shorter articles?

Event Timeline

AMuigai created this task.Oct 2 2019, 2:00 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptOct 2 2019, 2:00 PM
SBisson moved this task from Backlog to Q2 on the Inuka-Team board.Oct 4 2019, 2:42 PM
SBisson moved this task from Q2 to Kanban on the Inuka-Team board.Oct 21 2019, 2:50 PM
SBisson edited projects, added Inuka-Team (Kanban); removed Inuka-Team.
SBisson moved this task from Backlog to Ready for Dev on the Inuka-Team (Kanban) board.
cmadeo updated the task description. (Show Details)Oct 22 2019, 7:45 PM

Note: left-right links navigation is handled in T234625: Select links within an article
and the yellow scroll marker is T234627: Article progress indicator

SBisson claimed this task.Oct 23 2019, 8:56 PM
SBisson moved this task from Ready for Dev to Dev on the Inuka-Team (Kanban) board.
SBisson moved this task from Dev to QA on the Inuka-Team (Kanban) board.Oct 30 2019, 8:04 PM
SBisson added subscribers: Jpita, cmadeo.

I have implemented a first version of the pagination.

I'm not too happy with where pages are split by the browser but I will like @cmadeo, @AMuigai, and @Jpita to play with it on some articles before I make any more changes.

Jpita added a comment.Nov 7 2019, 5:48 AM

first page


second page

it seems to be cutting the article in a weird way, like the bottom part of the screen above the buttons is not being used

SBisson moved this task from QA to Dev on the Inuka-Team (Kanban) board.Nov 7 2019, 2:26 PM

@Jpita The white gap between the main content and the softkey bar is there because the browser doesn't have the device top bar (with clock, battery, etc). I could use some tricks to use all available space but it would make the height available for the article different between browser and device. You can set your browser mobile mode to 290px, which is the actual height available on the device.

Page break up is currently based on asking the browser to lay the content in columns and scrolling left/right between columns to simulate pages. There are directives to ask the browser not to break some elements in the middle (like the buttons section) but these are not very well supported on Firefox 37 or 48, which are the actual runtimes for KaiOS 1.0 and 2.5 respectively. We may have to try to parse the page and manually break the content into pages. It's a lot more work but we would have full control.

Something for @cmadeo to think about: how should this page flow when the article title is long and spans two or more lines?

cmadeo updated the task description. (Show Details)Nov 13 2019, 7:56 PM

@cmadeo what should this page look like when the article title or description is long and spans two or more lines?

@SBisson sorry for the delay, I've had to wrap up some work for iOS.

Could we allow the title and the title description to overflow? One thing that is important is keeping the quick actions (sections, quick facts and audio) as a discrete unit with their labels.

SBisson reassigned this task from SBisson to hueitan.Dec 3 2019, 3:08 PM

Follow up needed on

  • When looking at the section title page, the UP key goes to the first page of the previous section. The last page of the previous section would be more intuitive.
  • Relationship between Article, Pager, and useScroll is confusing. Could use some refactor.
  • When landing on a section title page, there is a flash of the previous title and image and it gets immediately replaced by the new content. Timing should be improved.

On the device, I noticed that if I click down quickly after landing on a new section I can skip it entirely and go to the next section. From there, if I click up to go to the previous section, I can click slowly and see all the pages of the section that was skipped.

SBisson moved this task from Dev to QA on the Inuka-Team (Kanban) board.Dec 8 2019, 8:11 PM
Jpita added a comment.Dec 17 2019, 6:35 PM

@AMuigai is it ok that the articles go back to the beginning when we reach the end (and continue scrolling down after that)?

AMuigai added a comment.EditedDec 19 2019, 12:46 PM

No, work is yet to be started on T236301: Article footer and read more

No, work is yet to be started on the article footer

The same questions apply with regards to the article footer. Is it at the end of the last section? Is it its own section with an entry in the TOC? What happens when you click down from the footer, do you go back to the beginning of the article?

The same questions apply with regards to the article footer. Is it at the end of the last section? Is it its own section with an entry in the TOC? What happens when you click down from the footer, do you go back to the beginning of the article?

The article footer should be a part of the 'About this article' section and should not be represented as an individual section in the TOC.
When you click down from the footer I'd propose that nothing happens as it is the end of the article.

The article footer should be a part of the 'About this article' section and should not be represented as an individual section in the TOC.

"About this article" is not a real article section. It is made up in the apps. My understanding now is that we DO want to create a special footer section available in the TOC.

Ah, sorry. I think I had just the legal footer in mind! Yes, we'll want all
of the added footer elements to be in one special section at the end of the
TOC

AMuigai closed this task as Resolved.Feb 6 2020, 11:19 AM