Reading/Web/Projects/In-page Navigation

On the mobile website there is currently (often) a lot of scrolling required to move between sections. For example: if I scroll halfway into a long section (e.g. China#Geography), and I want to get into a different section, I have to scroll either to the top of the section to collapse it, or to the bottom of the section (if I happen to know the section I want to go to next is below it).

The goal of this project is to help readers navigate between different sections of pages more easily, so that they can target the content they are most interested in with less navigational scrolling. This could be achieved either by providing an easily accessible table of contents, or some other UI component that enables readers to easily move between sections.

Previous research[edit]

A collection of various research related to the question Which parts of an article do readers read (last updated 26 June 2017)‎

Collapsed vs uncollapsed section view on mobile web (published June 2016)
There is currently a beta feature available for Android devices, which adds a “jump to top” button to all pages. The button appears once the user has scrolled down a bit, and when tapped jumps the user back to the top of the page. We don’t currently have information about how often the button is tapped, or what users are doing after tapping the button.

Audience[edit]

The primary audience of this feature is readers of the mobile website.

Contributors are a secondary audience given their heavy use of Talk pages, which tend to have a lot of sections and therefore require a lot of scrolling. There are likely solutions more closely tailored to this use case that we’re not exploring here.

Project goal and success criteria[edit]

Goal: enable readers to navigate between different sections of pages more quickly so that they can find the content they want, in less time and with less scrolling.

Success criteria (proposed): readers do less navigational scrolling (we think a decent proxy for this might be scrolling up, or alternatively scrolling quickly). We are still investigating the feasibility of measuring this.

Design concepts[edit]

Concept 1, Jump to top	Concept 2, Collapse all sections	Concept 3, Sticky section headers
User is presented with a floating jump to top button. This is meant to mimic the existing Android "Jump to top" beta feature, with the added functionality of an explanatory tooltip, and the floating button only appears when the user starts scrolling up in order to reduce distraction from reading.	When a reader expands any section a floating button appears and persists. When tapped it collapses all expanded sections, and scrolls the page to the top of all sections (just below the bottom of the lead section).	As readers scroll through an article the section heading (h2's only) for the section they are in remains fixed to the top of the screen. If they tap on it the section collapses, allowing them to easily open another section.
Concept 4, Sticky TOC	Concept 5, Sticky headers + toc
While a reader is scrolling through any open section the header of that section sticks to the top of the screen. When tapped it collapses the respective section, allowing readers to easily collapse sections regardless of where they are within them.	A combination of the previous two concepts. The section headers of open sections are sticky, and when in the stuck position they become triggers for the toc element.

You can explore the various prototypes here

Research[edit]

See In-page navigation/Research

Recommendation[edit]

Implement sticky section headers (concept 3), as they are easily discoverable, positively reviewed by testers, and easier to implement (than concept 5) from an engineering perspective.

As a follow-up we should continue to explore giving readers access to a table of contents, whether it is triggered through the sticky section headers or some other mechanism. One option might be to just add a tooltip (or similar on-boarding component) to concept 5, do a bit more testing, and move forward with that.