Lecture/Web/Améliorations du bureau/Fonctionnalités/Entête figé

This page is a translated version of the page Reading/Web/Desktop Improvements/Features/Sticky Header and the translation is 95% complete.

Dans le cadre du Projet d'améliorations bureau, nous introduisons une nouvelle manière d'afficher les outils les plus fréquemment utilisés qui auparavant se trouvaient en haut de la page. La nouvelle fonctionnalité permettra d'accéder à ces outils tout au long de la page via un entête « fixe » ou « figé ». Notre objectif est de faciliter l'accès des lecteurs et des contributeurs à ces outils. Nous nous rendons compte que, aujourd'hui, ils doivent souvent faire défiler la page au complet jusqu'à monter en haut.

Contexte et objectifs

Actuellement, de nombreuses fonctionnalités des pages wiki ne sont accessibles aux utilisateurs que situées en haut de la page, et/ou sur le panneau à gauche de la page. Cela devient problématique sur les pages plus longues, lorsque le défilement des premiers paragraphes oblige l'utilisateur à remonter pour accéder à nouveau aux outils et autres ressources. La méthode que nous proposons pour résoudre ce problème consiste à rendre l'entête du site « figé ». Cela signifie qu'il reste fixé tout en haut de l'écran (au-dessus du contenu) lorsque vous faites défiler la page vers le haut ou vers le bas.

En outre, nous offrons actuellement très peu d'orientation dans la page à nos lecteurs et contributeurs. Pour cela, distinguer entre une page et une autre devient compliqué.

Notre but :

  • Donner en même temps la fonctionnalité et le contexte tout au long de la page.
  • Réduire le temps que les lecteurs et les contributeurs passent à défiler la page vers le haut ou vers le bas pour des raisons de navigation.

Cas d'utilisation

  • En tant que lecteur, je veux savoir à tout moment quel article je suis en train de lire, afin de pouvoir m'orienter facilement sur le site.
  • En tant que contributeur, je veux pouvoir accéder à des fonctionnalités importantes (p.e. éditer, aller dans l'historique ou dans la page de discussion de l'article) à partir de n'importe quelle endroit de la page, sans perdre du temps en faisant défiler la page vers le haut.
  • En tant que lecteur multilingue, je veux pouvoir changer de langue à tout moment de ma lecture, de sorte que je puisse passer directement à l'autre après avoir trouvé un mot ou une phrase qui prête à confusion.

Description et prérequis de la fonctionnalité

Un entête fixe/figé apparaitra en haut de la page lorsque l'utilisateur aura dépassé l'entête actuel de la page.

  • Pour les utilisateurs anonymes, l'entête contiendra les éléments suivants :
    • Logo du wiki
    • Barre de recherche
    • Nom de la page
    • Titre de section
  • Pour les utilisateurs connectés, l'entête contiendra les éléments suivants :
    • Logo du wiki
    • Menu utilisateur (voir la page dédiée)
    • Barre de recherche
    • Nom de la page
    • Titre de section
    • Lien vers la page de discussion
    • Lien vers l'historique de la page
    • Lien vers l'édition du wikicode et/ou via l'éditeur visuel (selon les préférences des wikis eux-mêmes)
    • Sélecteur de langue

Le comportement de défilement de l'entête doit s'adapter aux besoins des utilisateurs connectés.

  • Note : nous sommes en train de tester plusieurs comportements de défilement et de déclenchement, notamment en permettant à l'entête d'apparaître lors du défilement de la page et du changement d'onglet. Nous allons tester aussi l'affichage de l'entête en permanence

L'entête doit pouvoir s'adapter aux résolutions d'écran faibles (inférieurs à 500px)

Exigences de design et recommandations

Prototype

https://people.wikimedia.org/~jdrewniak/dip/p4.html#/en/wiki/Moon

Utilisateurs anonymes

Note: for the first iteration of the sticky header, the header will only be available for logged-in users

 
Prototype de la fonctionnalité proposée de l'entête « figé » sur les wikis Wikimedia pour les utilisateurs anonymes

Utilisateurs connectés

 
Prototype de la fonctionnalité proposée de l'entête « figé » sur les wikis Wikimedia pour les utilisateurs connectés

Tests qualitatifs

Tests utilisateur

Nous avons effectué des tests utilisateur de l'entête fixe avec des lecteurs et des contributeurs de trois endroits et langues différentes, afin de déterminer quelle fonctionnalité devrait être incluse dans l'entête fixe en priorité. For the first iteration of the sticky header, we will be removing triggering behavior and making the sticky header persistent as per request of a number of the editors involved in the user testing. We will then evaluate the change once live. Nous avons également testé l'utilisabilité de notre prototype actuel.

Les résultats du test ont été utilisés pour déterminer les liens disponibles dans l'en-tête ainsi que le comportement de déclenchement et de persistance de l'en-tête. Voir les résultats complets de ce test.

Test du prototype

En mai 2021, nous effectuons des tests de prototype avec des utilisateurs connectés à travers 30 wikis. Le test a été conçu pour recueillir des commentaires sur la maniabilité et le fonctionnement de l'entête figé et du menu utilisateur.

Nos résultats préliminaires montrent qu'une écrasante majorité des participants au test ont fait une expérience positive avec un entête fixe. Notamment, les participants ont mentionné qu'ils appréciaient la possibilité d'accéder à des fonctionnalités importantes à partir de n'importe quel endroit de la page.

Cependant, une large partie des participants (~20%) a indiqué des problèmes avec l'apparence de l'entête fixe lui-même. La majorité de ces participants souhaitent que l'entête apparaisse en haut de la page en permanence plutôt que par divers déclenchements. Certains participants ont indiqué que, même s'ils appréciaient l'apparence de l'entête déclenché, ils avaient rencontré des problèmes avec l'entête qui apparaissait/disparaissait trop rapidement.

Dans les prochaines étapes, nous examinerons les déclencheurs qui permettent à l'entête d'apparaître et de disparaître. Nous prévoyons également de poursuivre l'expérimentation de l'entête figé qui apparaît de manière persistante sur la page. Ces changements devraient apparaître au cours de la première itération de l'entête figé sur nos wikis pilotes.

Tests quantitatifs

Avant et après, nous surveillerons l'usage des liens utilisateur sur les wikis primo-adoptants concernés par nos premiers déploiements. Nous nous attendons à voir une augmentation faible mais significative de l'accès à certains de ces liens, en particulier à la page de discussion et à la page de l'historique.

Results from A/B test on pilot wikis

From Jan 5 to Jan 31, 2022, we ran an A/B test to assess the impact of deploying the sticky header. The test ran on 22 of our pilot wikis. Logged-in users who were assigned to the treatment group with the new skin version saw the sticky header while users in the control group saw the old feature.

The primary goal of the AB test was to test the hypothesis that the sticky header decreases the need to stroll to the top of the page. We also studied following two questions:

  • What is the clickthrough rate (per pageview or per session) of each item on the sticky header?
  • What is the ratio of clicks of sticky header items to the corresponding items at the top of the page?

Overall, there was an average 15% decrease in scrolls per session by logged-in users on the 15 pilot wikis in the treatment group (with the new sticky header), compared to the control group (without the sticky header). This indicates that our hypothesis was correct - adding the sticky header to the page reduced the need to scroll to the top of the page significantly.

The full report is available at this link.


Integration notes for developers

My templates use sticky elements. How do I get them to work with the sticky header?

Add the .mw-sticky-header-element class to any elements that you want to stick to the bottom of the sticky header.

How do I add links to the sticky header?

mw.util.addPortletLink('p-personal-sticky-header', '#', 'test', 'myfeatureid')
mw.util.addCSS('.mw-ui-icon-vector-gadget-myfeatureid:before { background-image: url(/w/resources/lib/ooui/themes/wikimediaui/images/icons/code.svg); }' );

Voir aussi