Add Focus mode for Handbook
This issue is meant to record this proposal for attachment on Epic &326 - Improve GitLab handbook reading experience. Its content is copied from MR !74986 (closed)
Why is this change being made?
Reading large volumes of information on the Handbook at once is challenging, especially during onboarding. This is a proposal to add a “Focus Mode” on the Handbook UI, similar to the Reading Mode on apps like Instapaper or Pocket.
While Safari and Firefox browsers already provide native reader modes (with Chrome on the way), users might not know about these features, and baking it in the handbook UI enables us to provide a better experience, since we have full control of styles and layout.
How it works
“Focus Mode” could be enabled from a toggle button that would:
- Hide the navigation tree
- Hide the fixed header
- Centralize the text column
- Increase line height to improve readability -- akin to efforts on new typescale for docs site
Handbook page vs. Handbook page with focus mode enabled
Focus Mode Toggle Off (relatively positioned on sidebar) vs. Focus Mode Toggle On (fixed position near the bottom of the viewport)
Prototype
To see in more details, check this simple Figma Prototype or the corresponding file.
Request for Feedback
Before going into design details, here's the initial feedback I'm looking for:
- On a first look, does this iteration seems like something that brings value for users / readers of the content on the Handbook?
- What kind of problem validation would an iteration like this require, if any?
- Can you think of any risks in introducing this iteration? i.e.: hiding navigation might affect marketing metrics
- Are you aware of other similar iterations to this one, like the Docs typescale redo, and if so what would be the best way to combine efforts?