Page MenuHomePhabricator

[EPIC] in-article navigation using sticky section headers
Open, NormalPublic

Description

Background

When there are long pages, it takes a longer time to get back to the top. A circular button in the bottom right corner with the label "Top" would be good, which could appear a few seconds after scrolling away from the top. The mobile beta site solves this by showing a fixed position button in the bottom right corner.

The size is important, where it should be big enough that it could be pressable (48x48 is the suggestion by the Material Design Google Specs, and 44x44 by the old Apple iOS Human Interface Guidelines, but can't seem to find that anymore), but not too big that it could be accidentally pressed by accident (this defeats the purpose of the button by making it harder to scroll through pages).

We should work out what to do with this feature.

Current status

After a round of user testing of a number of different designs T193772: [Research] In-article navigation user testing, we have decided to go forward with promoting the sticky header prototype for in-article navigation

Design & prototype

https://in-article-navigation.firebaseapp.com/sticky-headers.html

Timeline

  1. Build and test sticky headers (Q1 2018)
  2. Deploy to beta (remove back to top button) (Q1 2018)
  3. Build instrumentation and test feature (Q1-Q2 2018)
  4. Discuss changes with communities (Q1-Q2 2018)
  5. Promote out of beta (Q2-Q3 2018)

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptNov 19 2016, 3:51 PM

This has been implemented in beta mode for some time. We're currently evaluating the design and bugs associated with the feature before moving it to stable.

Jdlrobson renamed this task from MobileFrontend should include a "Back to top" button for pages that are long to "Back to top" button for pages that are long.Nov 21 2016, 6:19 PM
Jdlrobson updated the task description. (Show Details)
Nirzar claimed this task.Nov 22 2016, 6:06 PM
Nirzar triaged this task as Normal priority.
Nirzar added a project: Design.
Nirzar added a project: Readers-Web-Backlog.
Nirzar moved this task from Incoming to Design on the Readers-Web-Backlog board.
Nirzar moved this task from Needs analysis to Next up on the Readers-Web-Backlog (Design) board.

Hey, @SamanthaNguyen thanks for pointing this out. I would like to get your feedback on few other ideas i have been playing around for in-article navigation which tries to solve similar issues you have mentioned here. We have also done usability research recently in the same vein. Let me compile all of that together so i can post it here.

@SamanthaNguyen https://phabricator.wikimedia.org/T149690 it's not back to top but it solves the problem of jumping in part of the articles.

Hey, so sorry for not seeing this earlier! I shall add my comment on the other task you pointed out :)

@SamanthaNguyen no worries. also it's very difficult to have feedback on the mocks itself so we are working on a quick prototype which can used on a phone so everyone can have a better idea.

Jdlrobson moved this task from Backlog to New adventures on the MinervaNeue board.Jul 13 2017, 6:04 PM
ovasileva renamed this task from "Back to top" button for pages that are long to Promote "Back to top" button out of beta.Apr 2 2018, 6:42 PM
Jdlrobson renamed this task from Promote "Back to top" button out of beta to [EPIC] Promote "Back to top" button out of beta.Jun 8 2018, 7:27 PM
Jdlrobson renamed this task from [EPIC] Promote "Back to top" button out of beta to [EPIC] Promote "Jump to top" button out of beta.
Jdlrobson added a project: Epic.
Jdlrobson moved this task from Incoming to Epics/Goals on the Readers-Web-Backlog board.
Jdlrobson added a subscriber: ovasileva.

@ovasileva given there is a task relating to this in "doing" should this be in the kanbanana board for visibility?

@ovasileva given there is a task relating to this in "doing" should this be in the kanbanana board for visibility?

That makes sense. Just noting that we're only in the research phase of this project.

ovasileva renamed this task from [EPIC] Promote "Jump to top" button out of beta to [EPIC] Promote new in-article navigation out of beta.Jun 19 2018, 6:15 PM
ovasileva updated the task description. (Show Details)
Jdlrobson changed the status of subtask T197718: Build sticky header navigation in beta from Open to Stalled.Jul 9 2018, 9:12 PM

Moving out of this column for the time being until we're able to set a schedule for the project

Jdlrobson added a subscriber: alexhollender.

@alexhollender is this epic relevant any more? Is there a newer epic?

@Jdlrobson I don't know of a newer epic. I believe our latest thinking here is to abandon the current jump-to-top feature and replace it with sticky section headers (T197718), which we've determined is a better solution for the general goal of improving in-article navigation. This makes T196641 and T187804 invalid/not worth addressing. It also means we should rename this epic (perhaps Improve in-article navigation).

alexhollender updated the task description. (Show Details)

moving this out of the design column since the design is complete with a prototype available here: https://in-article-navigation.firebaseapp.com/sticky-headers.html

ovasileva changed the status of subtask T187804: Jump to top is purposely hidden on iPhone from Open to Stalled.May 22 2019, 8:08 AM
alexhollender renamed this task from [EPIC] Promote new in-article navigation out of beta to [EPIC] Update in-article navigation & promote out of beta.Jun 18 2019, 8:49 PM
Jdlrobson renamed this task from [EPIC] Update in-article navigation & promote out of beta to [EPIC] in-article navigation using sticky headers.Jul 31 2019, 3:10 PM
alexhollender renamed this task from [EPIC] in-article navigation using sticky headers to [EPIC] in-article navigation using sticky section headers.Jul 31 2019, 4:08 PM
Quiddity added a comment.EditedAug 1 2019, 6:38 PM

Sidenote: There's a prototype gadget on Enwiki by TheDJ that enables sticky table headers. I've been using and loving it for a couple of years.

To test:


Code: