Page MenuHomePhabricator

[EPIC] Improve in-article navigation
Open, MediumPublic

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)

Related Objects

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
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 edited projects, added Web-Team-Backlog; removed Web-Team-Backlog (Design).
Jdlrobson moved this task from Incoming to Epics/Goals on the Web-Team-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)

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_WMF.

@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_WMF 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

alexhollender_WMF 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_WMF 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

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:

image.png (799×1 px, 289 KB)

Code:

T216789 suggests expanding all sections by default which adds a new dimension to how we go about solving the in-article navigation problem. Depending on how important we view that need it would be necessary to re-evaluate potential solutions here.

@alexhollender this is for mobile site but has a lot of overlap with T277717. One possible outcome of that ticket is we have a Vue component that can be applied to the mobile site. Could this task be repurposed so that it builds on top of T277717 in some way, or should it be merged into it?

@alexhollender this is for mobile site but has a lot of overlap with T277717. One possible outcome of that ticket is we have a Vue component that can be applied to the mobile site. Could this task be repurposed so that it builds on top of T277717 in some way, or should it be merged into it?

hm, I think it might make sense to keep this task separate. Perhaps it could be a subtask of T277717, because as you say this task might be enabled by that work, but I think they are quite different so merging them doesn't make sense to me (at least initially). Also I assume additional tasks would be needed (such as adding the sticky header to mobile, repurposing it to meet the needs of this request) even after we complete T277717, before we could deliver on this task.

Removing inactive assignee. (Please update such things as part of offboarding - thanks.)