Recevez le rapport 2021 de l'enquête sur les défilements ainsi que des commentaires de l'équipe Chrome sur l'impact de cette enquête sur les priorités et les plans pour Chromium et le Web.
En avril, l'équipe Chrome a publié une enquête par défilement et action tactile basée sur les principaux problèmes signalés dans le rapport MDN Web DNA 2019. Le rapport 2021 Scroll Survey est prêt, et l'équipe Chrome souhaiterait partager quelques réflexions et mesures que nous avons tirées 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 2021 Scroll Survey.
Résultats intéressants
880 envois et 366 réponses ayant répondu à toutes les questions ont été recueillis de manière anonyme.
Bien que les premiers pas avec le défilement soient une ligne de CSS, comme overflow-x:
scroll;, la surface des API et des options de défilement est grande, 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 du Web
Question 27
45%
sont plutôt ou extrêmement mécontents dans l'ensemble
du défilement Web.
Cette question a été posée vers la fin de l'enquête intentionnellement, après des questions sur 26 cas d'utilisation et fonctionnalités de défilement. La réponse montre que la communauté Web rencontre des difficultés avec le défilement. Près de la moitié des répondants déclarent un niveau d'insatisfaction générale.
Nous pensons que l'utilisation du défilement ne devrait pas être si mauvaise. Cette métrique doit être modifiée ; c'est un signal clair que des efforts sont à faire.
Difficulté à travailler avec le défilement
Question 2
43%
a signalé qu'il est assez difficile ou
extrêmement difficile pour
de travailler avec le défilement.
D'après notre étude, ces difficultés découlent de la multitude de cas d'utilisation du défilement. Le défilement peut inclure les éléments suivants : - 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 vue de défilement - Défilement cyclique - Défilement virtualisé
L'absence de fonctionnalités du navigateur, le JavaScript complexe et la nécessité de prendre en charge des modes de saisie tels que l'écran tactile, le clavier et les manettes de jeu rendent tout cela plus difficile.
Importance des interactions tactiles
Question 3
51%
signaler que les interactions tactiles sont
très ou extrêmement importantes
pour leur travail.
Les statistiques sur les visites étant toujours en hausse chez les mobinautes, il n'était pas surprenant de constater que la moitié des personnes interrogées ont déclaré que le toucher joue un rôle très important dans leur travail sur le Web. Cela indique que des fonctionnalités Web telles que le défilement CSS et touch-action nécessitent une attention particulière afin que le Web puisse offrir une interaction tactile de haute qualité.
Difficulté à naviguer au moyen de la touche de tabulation ou de la manette de jeu
Question 5a
44%
signalent assez ou extrêmement difficile
à utiliser la manette de jeu et la navigation par onglets ;
Le défilement inclut des méthodes de navigation telles que les flèches du clavier, les touches de tabulation, l'utilisation de la barre d'espace et les manettes de jeu. Il peut être difficile de les inclure lorsque vous effectuez un 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%
signaler l'apprentissage de
`touch-action: manipulation`
de l'enquête.
Certaines questions de l'enquête portaient sur l'utilisation de certaines API avec la réponse possible "Oui", "Non" ou "J'ai appris aujourd'hui". L'un des commentaires notables a été le nombre de personnes ayant déclaré avoir découvert touch-action à l'aide de 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 avec le défilement.
Défilement cyclique
Question 27
58%
génèrent parfois, souvent ou pour tous les projets
à l'aide du défilement cyclique.
au bout de 60 secondes, elle recommence à 0.
Ces chiffres sont élevés pour une fonctionnalité de défilement qui ne prend que peu ou pas en charge la plate-forme Web. Cette fonctionnalité entraîne souvent des contraintes techniques importantes, avec des doublons ou des injections JavaScript pour forcer l'effet. Il est populaire pour les carrousels de produits et lorsqu'il sélectionne l'heure en secondes ou en minutes pour offrir un défilement cyclique.
Les zones déroulantes sont-elles importantes ?
Question 2
55%
très ou
extrêmement important
16%
signaler pas du tout
ou légèrement important
Les personnes interrogées étaient très attachées à l'importance des zones à faire défiler, ce qui constitue un autre indicateur des difficultés nécessaires pour proposer un défilement de haute qualité.
Carrousels
Question 20
87%
ont utilisé des carrousels.
24 %
indiquent qu'elles sont
faciles à gérer.
Presque toutes les personnes interrogées fournissent des carrousels dans leurs travaux sur le Web, tandis que seulement 25% les trouvent faciles à gérer. Les carrousels prêts à l'emploi ont été populaires pendant nos recherches, mais cette statistique nous a surpris, car elle ne semble pas être très résolue.
Défilement infini
Question 22
65%
l'utiliser parfois
pour chaque projet
60%
assez ou
extrêmement difficile.
Deux tiers des personnes interrogées effectuent un défilement infini dans leur travail sur le Web, et un nombre égal de rapports est difficile à réaliser. Autre exemple d'utilisation élevée associé à une difficulté élevée, ce qui nous indique un domaine nécessitant votre attention.
Bien que content-visibility et contain-intrinsic-size puissent être combinés pour réduire les coûts de rendu pour les longues zones que l'utilisateur peut faire défiler, il ne semble pas contribuer à "charger plus" l'expérience utilisateur à défilement infini.
Animations liées ou déclenchées par le défilement
Question 24
47%
l'utiliser parfois
pour chaque projet
56%
signale assez ou
très difficile
Près de la moitié des personnes interrogées utilisent des animations orchestrées par défilement, tandis que la moitié d'entre elles trouvent cela difficile et compromet une fois encore une utilisation intensive.
Mesurez-vous au défilement intégré
Question 26
32%
always ou
la plupart du temps
50%
parfois
Le défilement et les interactions tactiles intégrées 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 de programmation, l'intégration vocale, des indications de défilement et des API d'actualisation.
Seule la moitié des personnes interrogées estimaient qu'il n'était que parfois possible de faire correspondre l'expérience du défilement intégré.
Satisfaction globale concernant la création d'interactions avec le 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é, enseignement, API et fonctionnalités.
Compatibilité
L'équipe Chrome a déclaré un objectif visant à réduire le nombre de problèmes de compatibilité Web, y compris la compatibilité du défilement.
Les trois premiers problèmes de compatibilité sur lesquels nous concentrer :
1. Compatibilité avec le défilement horizontal
1. overscroll-behavior dans plusieurs navigateurs.
1. Suppression des préfixes de -webkit-scrollbar et conformité à la norme.
Enseignement
Les résultats de l'enquête ont montré qu'il faudrait mieux s'informer sur touch-action et les propriétés logiques. Le navigateur se situe à l'avant-garde de la mise en page internationale, et il semble qu'il soit sous-utilisé ou mal compris.
Les 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 répondu qu'ils souhaitaient utiliser les fonctionnalités de manière interopérable avec des bibliothèques et des plug-ins courants. En réduisant cet écart entre les bibliothèques CSS et les bibliothèques de plug-ins, vous améliorerez la satisfaction de l'ancrage du défilement et de l'expérience utilisateur.
Nous allons nous concentrer sur le travail des API sur scroll-snap :
1. Disponibilité et compatibilité des API avec différents navigateurs
1. Commencez à travailler sur de nouvelles API CSS telles que scroll-start.
1. Commencez à travailler sur les nouveaux événements JS tels que snapChanged().
Caractéristiques
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 beaucoup d'efforts. Nous espérons approfondir ce sujet.
Les fonctionnalités dont les développeurs ont du mal à créer sont les suivantes : 1. Carrousels 1. Défilement virtuel 1. Défilement infini
Ressources
- Faire défiler le rapport sur l'enquête
- Annonce concernant l'enquête
- Rapports Mozilla DNA
- Compat2021: éliminer les cinq principales difficultés de compatibilité sur le Web
Vignette: photo de Taylor Wilcox sur Unsplash.