Page MenuHomePhabricator

[Design needed] In-article navigation for Minerva: ToC and sticky headers
Open, MediumPublic

Description

Background

Background in T363933

User story

  • As a mobile web reader, I want to be able to see and navigate between article sections so that I can read with the lowest possible cognitive load.

Requirements

  • Design a ToC implementation for Minerva
  • Revisit sticky headers in Minerva

Design

  • Add mockups and design requirements

Acceptance criteria

  • Designs have been critiqued in a design review
  • Designs have been reviewed by Web engineers
  • Designs have been reviewed by product stakeholders
  • Designs have been (in)validated in a usability study
  • Designs are ready to be implemented

Communication criteria - does this need an announcement or discussion?

  • Community discussion needed

This task was created by Version 1.0.0 of the Web team task template using phabulous

Event Timeline

Would a machine-generated summary of a section plus the section title be a sufficient navigational affordance for readers without expanding all sections by default?

Reminds me of old-timey chapter titles like this one from Mr. Midshipman Easy, by Frederick Marryat (1836), via Project Gutenberg and Metafilter:

CHAPTER I Which the reader will find very easy to read.
CHAPTER III In which our hero has to wait the issue of an argument.
CHAPTER XII In which our hero prefers going down to going up; a choice, it is to be hoped, he will reverse upon a more important occasion.

ToC would work better as a modal because we already have a floating sticky "bar" in the design, and we don't want two floating elements on top of eachother. You also don't need to scroll or read main article content while you're looking at the ToC.

ovasileva triaged this task as Medium priority.Aug 1 2024, 7:50 AM
ovasileva moved this task from Incoming to Groomed on the Web-Team-Backlog-Archived board.

Web team reviewed this today in quarterly grooming and this task is still valid and should be retained in backlog.
This is going to get folded into KR work at some point.

Assuming this lingering task with no active project tags is about the MinervaNeue codebase. Please add codebase project tags to tasks.

Downloaded the Android app for the first time and thought of this! I love having the floating actions bar at the bottom of the screen.

Screenshot_20251013-095925_Wikipedia.png (2×1 px, 818 KB)

Screenshot_20251013-100010_Wikipedia.png (2×1 px, 268 KB)

I struggle to use the Android app, though, because it doesn't handle tabs from external apps (e.g. Google search) in the background the way, say, a mobile web bubble browser can.

In a perfect world, logged in users on mobile web could customize a similar actions bar, but I think a default that includes things that are otherwise hidden on a small screen (like TOC) would be great and a lot simpler to start.