Consultez le rapport de l'étude Scroll 2021 et découvrez l'avis de l'équipe Chrome sur l'impact de ces résultats sur les priorités et les plans pour Chromium et le Web.
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 de 2019. Le rapport de l'enquête sur le défilement 2021 est prêt. L'équipe Chrome aimerait partager quelques réflexions et points d'action que nous avons tirés 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 Web.
Consultez le rapport de l'étude 2021 sur le défilement.
Résultats intéressants
L'enquête a recueilli 880 réponses de manière anonyme, dont 366 ont répondu à toutes les questions.
Bien que les premiers pas avec le défilement se résument à une ligne de 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
45 %
sont assez ou très mécontents
de la navigation Web.
Cette question a été intentionnellement placée vers la fin de l'enquête, après les questions 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 se disent globalement insatisfaites.
Nous pensons que le sentiment général concernant le défilement ne devrait pas être aussi bas. Cette métrique doit être modifiée. Elle indique clairement qu'il y a du travail à faire.
Difficulté à faire défiler l'écran
Question 2
43%
ont indiqué qu'il était assez ou
extrêmement difficile
de travailler avec le défilement.
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 : - Positionner des éléments dans des zones de défilement - Défilement infini - Animation liée au défilement - Carrousels - Marge intérieure de la ScrollView - Défilement cyclique - Défilement virtualisé
L'absence de fonctionnalités de navigateur, la complexité de JavaScript et la nécessité de prendre en charge les modes de saisie, y compris le tactile, le clavier et les manettes de jeu, rendent toutes ces choses plus difficiles.
Importance des interactions tactiles
Question 3
51%
déclarent que les interactions tactiles sont très ou extrêmement importantes
pour leur travail.
Alors que le nombre d'utilisateurs du Web mobile continue d'augmenter dans les statistiques de visites, il n'est pas surprenant de constater que la moitié des personnes interrogées ont indiqué que le tactile était très important pour leur travail sur le Web. Cela indique que les fonctionnalités Web telles que l'alignement sur les limites de 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 navigation avec la touche de tabulation ou la manette de jeu
Question 5a
44%
Indiquez que la navigation au gamepad et au clavier est un peu ou extrêmement difficile
.
Le défilement inclut des méthodes de navigation telles que les flèches du clavier, les touches de tabulation, les touches d'espace et les manettes de jeu. Il peut être difficile de les inclure lors du 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 entrées.
Apprentissage touch-action
Question 9
50 %
Apprendre à propos de
`touch-action: manipulation`
à partir de l'enquête.
Certaines questions de l'enquête portaient sur l'utilisation de certaines API, avec les réponses possibles "Oui", "Non" ou "J'ai appris quelque chose aujourd'hui". Un commentaire notable concernait le nombre de personnes ayant indiqué avoir découvert la propriété touch-action grâce à l'enquête. Il s'agit en effet 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
58%
parfois, souvent ou sur chaque projet
à l'aide du défilement cyclique.
après 60 secondes, le décompte recommence à 0.
Ces chiffres sont élevés pour une fonctionnalité de défilement avec peu ou pas d'assistance fournie par la plate-forme Web. Cette fonctionnalité entraîne souvent une dette technique importante, avec une duplication ou un JavaScript injecté pour forcer l'effet. Il est souvent utilisé pour les carrousels de produits et pour sélectionner une durée en secondes ou en minutes afin de proposer un défilement cyclique.
Les zones de défilement sont-elles importantes ?
Question 2
55%
très ou
extrêmement important
16 %
indiquer que le rapport n'est pas du tout
ou peu important.
Les personnes interrogées ont insisté sur l'importance des zones de défilement, ce qui indique une fois de plus les difficultés rencontrées pour proposer un défilement de haute qualité.
Carrousels
Question 20
87%
ont utilisé des carrousels.
24 %
indiquent qu'ils sont
faciles à gérer.
Presque tous les répondants utilisent des carrousels dans leur travail sur le Web, mais seulement 25 % les trouvent faciles à gérer. Les carrousels prêts à l'emploi étaient populaires lors de notre étude, mais cette statistique nous a surpris, car elle ne semble pas très résolue.
Défilement infini
Question 22
65 %
parfois
à chaque projet
60 %
plutôt ou
extrêmement difficile.
Les deux tiers des personnes interrogées utilisent le défilement infini dans leur travail sur le Web, et une proportion égale indique que c'est difficile à faire. Il s'agit d'un autre exemple d'utilisation élevée associée à une difficulté élevée, ce qui indique un domaine qui nécessite une attention particulière.
Bien que content-visibility et contain-intrinsic-size puissent être combinés pour réduire les coûts de rendu des longues zones de défilement, cela ne semble pas aider avec l'expérience utilisateur de défilement infini "Charger plus".
Animations liées au défilement ou déclenchées par le défilement
Question 24
47%
l'utiliser parfois
à chaque projet
56%
signaler assez ou
extrêmement difficile
Près de la moitié des personnes interrogées utilisent des animations orchestrées par le défilement, et la moitié les trouvent difficiles à mettre en œuvre, ce qui établit une fois de plus un lien entre l'utilisation fréquente et la difficulté.
Concurrence avec le défilement intégré
Question 26
32%
toujours ou
la plupart du temps
50 %
parfois
Les interactions tactiles et de défilement intégrées des applications pour téléphones et tablettes sont souvent présentées comme un domaine où le Web peut rattraper son retard. Ces fonctionnalités incluent des animations liées au défilement, des interfaces programmatiques, l'intégration vocale, des indicateurs de défilement et des API de tirage pour actualiser.
Seule la moitié des personnes interrogées ont estimé qu'il n'était parfois possible de reproduire l'expérience de défilement intégré.
Satisfaction globale liée aux interactions de défilement sur le Web
Question 27
Points clés 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é du défilement.
Voici les trois premiers problèmes de compatibilité sur lesquels vous devez vous concentrer :
1. Compatibilité avec le défilement horizontal.
1. overscroll-behavior multinavigateur.
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 était nécessaire de fournir plus d'informations sur les propriétés touch-action et logiques. Le navigateur est à l'avant-garde de la mise en page internationale, et il est évident qu'il est sous-utilisé ou mal compris.
Points à améliorer :
1. touch-action
1. Propriétés logiques
API
L'utilisation de l'accrochage de défilement est en augmentation, et les développeurs ont indiqué qu'ils souhaitaient utiliser les 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 de plug-ins contribuera à améliorer la satisfaction des développeurs et l'expérience utilisateur concernant l'accrochage par défilement.
Nous allons concentrer nos efforts sur l'API scroll-snap :
1. Disponibilité et compatibilité des API avec les navigateurs.
1. Commencez à travailler sur de nouvelles API CSS comme scroll-start.
1. Commencez à travailler sur de nouveaux événements JS tels que snapChanged().
Fonctionnalités
Les résultats de l'étude 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 un effort important. Nous espérons pouvoir approfondir nos recherches dans ce domaine.
Voici les fonctionnalités que les développeurs ont du mal à créer : 1. Carrousels 1. Défilement virtuel 1. Défilement infini
Ressources
- Rapport sur l'enquête de défilement
- Annonce concernant l'enquête
- Rapports Mozilla DNA
- Compat2021 : éliminer les cinq principaux points de friction liés à la compatibilité sur le Web
Vignette : photo de Taylor Wilcox sur Unsplash.