2021 Scroll Survey Report (Rapport 2021 sur le défilement)

Obtenez le rapport de l'enquête 2021 sur le défilement, ainsi que des commentaires de l'équipe Chrome expliquant l'impact de cette nouveauté sur les priorités et les plans de Chromium et du Web.

Adam Argyle

Sam Dutton

En avril, l'équipe Chrome a publié une enquête sur le défilement et les actions tactiles basée sur les principaux problèmes signalés dans le rapport MDN Web DNA 2019. Le rapport de l'enquête sur le défilement 2021 est prêt. L'équipe Chrome souhaite partager quelques réflexions et points d'action issus des résultats de l'enquête. Nous espérons que ces résultats aideront les fournisseurs de navigateurs et les groupes de normes à comprendre comment améliorer le défilement sur le Web.

Consultez le rapport de l'enquête sur le défilement 2021.

Résultats notables

L'enquête a recueilli 880 réponses anonymes, dont 366 ont répondu à toutes les questions.

Bien que la prise en main du défilement ne comporte qu'une seule ligne de code CSS, comme overflow-x: scroll;, la surface des API et des options de défilement est vaste, allant de JavaScript à CSS. Les résultats suivants permettent de mettre en évidence les problèmes rencontrés par les développeurs Web.

Satisfaction globale concernant le défilement sur le Web

Question 27

Cette question a été posée intentionnellement vers la fin de l'enquête, après des questions portant sur 26 cas d'utilisation et fonctionnalités de défilement. La réponse montre clairement que la communauté Web a du mal avec le défilement. Près de la moitié des personnes interrogées indiquent un niveau d’insatisfaction globale.

Nous pensons que l'opinion globale sur le défilement ne devrait pas être aussi négative. Cette métrique doit être modifiée. C'est un signal clair qu'il y a du travail à faire.

Difficulté à travailler avec le défilement

Question 2

D'après nos recherches, ces difficultés proviennent de la multitude de cas d'utilisation du défilement. Lorsque nous parlons de défilement, cela peut inclure : - Positionnement d'éléments dans des zones à faire défiler - Défilement infini - Animation liée au défilement - Carrousel - Marge intérieure de la Scrollview - Défilement cyclique - Défilement virtualisé

L'absence de fonctionnalités de navigateur, le code JavaScript complexe et la compatibilité avec des modes de saisie tels que l'écran tactile, le clavier et les manettes de jeu ne compliquent pas l'ensemble de ces tâches.

Importance des interactions tactiles

Question 3

Les statistiques de visites des utilisateurs du Web sur mobile continuent d'augmenter. Il n'est donc pas surprenant que la moitié des personnes interrogées aient indiqué que l'écran tactile est très important pour leur travail sur le Web. Cela a indiqué que les fonctionnalités Web telles que le point d'ancrage du défilement CSS et touch-action nécessitent une attention particulière pour que le Web puisse offrir une interaction tactile de haute qualité.

Difficulté de la navigation à l'aide de la touche Tabulation ou de la manette

Question 5a

Le défilement inclut des méthodes de navigation telles que les flèches du clavier, les touches de tabulation, les pressions sur la barre d'espace et les manettes de jeu. Il peut être difficile de les inclure lorsque vous effectuez un travail de défilement personnalisé. Près de la moitié des personnes interrogées déclarent qu'il est assez ou extrêmement difficile d'inclure ces informations.

Apprentissage touch-action

Question 9

Certaines des questions de l'enquête portaient sur l'utilisation de certaines API, avec les réponses possibles "Oui", "Non" ou "J'ai appris aujourd'hui". L'un des commentaires les plus importants est le nombre de personnes ayant déclaré avoir découvert touch-action grâce à l'enquête, car il s'agit d'une propriété essentielle lors de la création de gestes tactiles personnalisés qui doivent interagir dans le défilement.

Défilement cyclique

Question 27

Ces chiffres sont élevés pour une fonctionnalité de défilement qui n'est que peu ou pas prise en charge par la plate-forme Web. La fonctionnalité entraîne souvent une charge technique élevée pour cette raison, avec la duplication ou l'injection de code JavaScript pour forcer l'effet. Elle est populaire pour les carrousels de produits et lorsque vous sélectionnez une durée en secondes ou en minutes pour proposer un défilement cyclique.

Les zones à faire défiler sont-elles importantes ?

Question 2

Les personnes interrogées ont insisté sur l'importance des zones à faire défiler, ce qui indique une nouvelle fois les difficultés à fournir un défilement de haute qualité.

Carrousels

Question 20

Presque tous les répondants utilisent des carrousels dans leur travail sur le Web, mais seuls 25 % d'entre eux les trouvent faciles à gérer. Les carrousels prêts à l'emploi étaient populaires lors de nos recherches, mais cette statistique nous a surpris, car elle ne semble pas très claire.

Défilement infini

Question 22

Deux tiers des personnes interrogées proposent le défilement infini dans leur travail sur le Web, et un nombre égal indique que c'est difficile à faire. Autre exemple d'utilisation élevée associée à une difficulté élevée, ce qui nous indique un domaine qui nécessite de l'attention.

Bien que content-visibility et contain-intrinsic-size puissent être combinés pour réduire les coûts de rendu des zones à faire défiler sur de longues périodes, cela ne semble pas aider à l'expérience utilisateur du défilement infini "Charger plus".

Animations liées à un défilement ou déclenchées par un défilement

Question 24

Près de la moitié des personnes interrogées utilisent des animations orchestrées par le défilement, et la moitié d'entre elles les trouvent difficiles, ce qui confirme une nouvelle fois que l'utilisation intensive est associée à des difficultés.

Rivalisez avec le défilement intégré

Question 26

Le défilement et les interactions tactiles intégrés des applications pour téléphone et tablette sont souvent présentés comme un endroit clair où le Web peut rattraper son retard. Ces fonctionnalités incluent des animations liées au défilement, des interfaces programmatiques, une intégration vocale, des conseils de défilement et des API de rafraîchissement par glissement.

Seule la moitié des personnes interrogées ont estimé qu'il n'était possible de reproduire l'expérience du défilement intégré que parfois.

Satisfaction globale concernant les interactions de défilement sur le Web

Question 27

Conclusions de l'enquête

Les résultats de l'enquête sont segmentés en quatre catégories : compatibilité, formation, API et fonctionnalités.

Compatibilité

L'équipe Chrome s'est fixé pour objectif de réduire le nombre de problèmes de compatibilité Web, y compris la compatibilité avec le défilement.

Voici les trois premiers problèmes de compatibilité à examiner : 1. Compatibilité avec le défilement horizontal. 1. overscroll-behavior multi-navigateur. 1. Suppression des préfixes de -webkit-scrollbar et respect de la norme.

Éducation

Les résultats de l'enquête ont montré qu'il fallait davantage d'informations sur touch-action et les propriétés logiques. Le navigateur est à la pointe de la mise en page internationale, et il est clair qu'il est sous-utilisé ou mal compris.

Domaines sur lesquels vous devez vous concentrer : 1. touch-action 1. Propriétés logiques

API

L'utilisation de l'ancrage du défilement est de plus en plus importante, et les développeurs ont indiqué vouloir utiliser des fonctionnalités de manière interopérable avec les bibliothèques et plug-ins populaires. Réduire cet écart entre les bibliothèques CSS et les plug-ins améliorera l'expérience utilisateur et la satisfaction des développeurs concernant le point d'ancrage du défilement.

Nous allons concentrer le travail sur l'API sur scroll-snap : 1. Disponibilité et compatibilité des API dans les différents navigateurs 1. Commencez à travailler sur de nouvelles API CSS comme scroll-start. 1. Commencez à travailler sur les nouveaux événements JavaScript tels que snapChanged().

Fonctionnalités

Les résultats de l'enquête ont montré que les utilisateurs rencontrent des difficultés avec certains types spécifiques de composants liés au défilement sur le Web, car la plate-forme ne fournit pas les primitives dont ils ont besoin pour les créer sans plug-ins ni effort important. C'est un domaine que nous espérons explorer plus en détail.

Voici quelques-unes des fonctionnalités que les développeurs ont du mal à créer : 1. Carrousels 1. Défilement virtuel 1. Défilement infini

Ressources

• Défilement du rapport d'enquête
• Annonce d'enquête
• Rapports Mozilla DNA
• Compat2021 : cinq principaux problèmes de compatibilité sur le Web éliminés

Vignette: photo de Taylor Wilcox sur Unsplash.