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.
- 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.
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
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.
|Concept 1, Jump to top||Concept 2, Collapse all sections||Concept 3, Sticky section headers|
|Concept 4, Sticky TOC||Concept 5, Sticky headers + toc|
You can explore the various prototypes here
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.