Page MenuHomePhabricator

[EPIC] Fixed "sticky" site header
Open, HighPublic

Description

Background

As a part of the Desktop Improvements project, we are planning on introducing additional functionality that allows access to commonly used tools previously available only at the top throughout the page via a “sticky” or “fixed” header. Our goal is to make it easier for readers and editors to access the tools they frequently need without needing to scroll all the way to the top of the page.

Use Cases

As a reader, I want to know what article I’m reading at all times, so that I can easily orient myself within the site
As an editor, I want the ability to access important functionality (e.g. edit, go the the history page or the talk page of the article) from anywhere in the page, so that I do not waste time when scrolling up
As a multilingual reader, I want the ability to switch languages at any point of my reading experience, so that I can switch directly after I find a confusing word or sentence

Feature description and requirements

MVP
A sticky/fixed header will appear at the top of the page once a user scrolls past the current header on the page.
For logged-in users, the header will contain the following:

  • Wiki logo
  • User tools menu (see user tools page)
  • Search
  • Page name
  • Section name
  • Link to talk page
  • Link to history page
  • Link to source and/or edit (following the preferences of the wikis itself)
  • Language switching functionality

The scrolling behavior of the header must adapt to the needs of logged-in users. Initial scrolling behavior will be for the sticky header to be persistent once the header of the page has been scrolled through
The header must be adaptable at lower screen resolutions (down to 500px)

Second iteration
For anonymous users, the header will contain the following:

  • Wiki logo
  • Search
  • Page name
  • Section name

The scrolling behavior of the header must adapt to the needs of users. Adjustments to triggers might be made after first iteration of sticky header.

Bugs to the above features will be considered a part of the feature work for the feature. Any additional work outside the above requirements will be tracked in a separate epic.

Design

Prototype: https://di-community-round-2.web.app/Audre_Lorde

Quantitative testing

We will be monitoring the before and after usage of the links included in the sticky header on our pilot wikis following our initial deployments. We expect to see a small but significant rise in access to some of these links, in particular, to the talk page and history page.

Event Timeline