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

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

« Précédent

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. Cela fait que 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 à faire 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.ex. éditer, aller dans l'historique ou dans la page de discussion de l'article) à partir de n'importe quel 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érieures à 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 l'utilisabilité 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.

Results from A/B test for edit button in the sticky header

To evaluate the impact of introducing an "edit" button within the sticky header, we ran two A/B tests. These two A/B tests were designed to help us learn how the new edit button within the sticky header impacted the likelihood:

People would publish the edits they started
The edits people published would get reverted

What follows are the conclusions we're drawing from these A/B tests and details about the Wikipedias that participated in them:

People were more likely to complete the edits they start using the sticky header
Of all the edits people initiated throughout both A/B tests, there was a 2.8% and a 6.8% increase in the percent of people who were able to successfully complete at least one edit using the edit button within the sticky header, in AB Test Experiment #1 and #2 respectively. This is in comparison to edits people started using other edit buttons present on the page.
Edits people initiated and published using the sticky header were less likely to be reverted
Of all the edits people published throughout both A/B tests, the edits people started using the new edit button within the sticky header were less likely to be reverted than edits started using other edit buttons present on the page.

Note: We are able to confirm that edits published using the sticky header were less likely to be reverted than edits publishing using other edit buttons present on the page. Hovewer, we are unable to confirm and share a specific percentage decrease in revert rates because of a relatively high margin of error. Learn more in the test report.

The first test ran between 6 July and 8 August 2022 on 15 Wikipedias. At these projects, 50% of people included in the A/B test were shown the sticky header without an edit button within it and 50% of people were shown the sticky header with an edit button within it.

The second test ran between 16 August and 1 September 2022 on two Wikipedias: Vietnamese and Indonesian. At these projects, there were three equally-sized test groups:

A control group that did not see or have access to the new sticky header
A treatment group that saw the new sticky header without an edit button within it
A treatment group that saw the sticky header with an edit button within it.

FAQ

Mes modèles utilisent des éléments fixes. Comment être sûr qu'ils ne sont pas recouverts par l'entête fixe ?

Ajoute la classe .mw-sticky-header-element à tous les éléments que vous voulez fixer au bas de l'entête figé.

Comment ajouter des liens au menu déroulant de l'entête figé ?

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); }' );

Comment ajouter des icônes à l'entête figé ?

Actuellement, nous ne prenons pas officiellement en charge l'extension de l'en-tête fixe de cette manière.

Pourquoi le bouton des langues n'apparaît-il pas dans mon entête figé ?

Allez dans vos Préférences, et cochez la case « Utiliser une liste compacte de langues, avec seules celles qui vous conviennent. » pour afficher les langues dans l'entête figé.

Pourquoi l'entête figé n'apparaît-il pas sur certaines pages ?

L'en-tête fixe est actuellement visible uniquement pour les utilisateurs connectés à l'aide de navigateurs modernes sur les actions autorisées et les espaces de noms autorisés lorsque l'utilisateur a fait défilé la page. A l'heure actuelle, il n'est activé que pour les espaces de noms : Principal, Discussion Principal, Utilisateur, Discussion Utilisateur, Wikipédia, Modèle, Aide, Catégorie, Portail, Module^[1] mais pas les anciennes révisions, les diffs, l'historique ou les pages d'édition^[2].

Voir aussi

Références

[1] ttps://github.com/wikimedia/Vector/blob/master/resources/skins.vector.es6/stickyHeader.js#L535

[2] ttps://github.com/wikimedia/Vector/blob/master/resources/skins.vector.es6/stickyHeader.js#L548

[1]

[2]