Umfragebericht zum Scrollen 2021

Im Scroll-Umfragebericht 2021 erfährst du vom Chrome-Team, wie sich das auf Prioritäten und Pläne für Chromium und das Web auswirkt.

Adam Argyle

Sam Dutton

Im April hat das Chrome-Team eine Umfrage zu Scroll- und Touch-Aktionen veröffentlicht, die auf den am häufigsten gemeldeten Problemen aus dem MDN Web DNA-Bericht 2019 basiert. Der Bericht zur Umfrage zum Scrollen 2021 ist fertig. Das Chrome-Team möchte Ihnen einige Überlegungen und Maßnahmen mitteilen, die wir aus den Umfrageergebnissen gewonnen haben. Wir hoffen, dass diese Ergebnisse Browseranbietern und Standardsgruppen helfen, das Scrollen im Web zu verbessern.

Bericht zur Umfrage zum Scrollen 2021

Bemerkenswerte Ergebnisse

Im Rahmen der Umfrage wurden 880 Beiträge anonym eingereicht, von denen 366 alle Fragen beantworteten.

Für den Einstieg in das Scrollen reicht eine Zeile CSS wie overflow-x: scroll;. Die Auswahl an Scroll-APIs und -Optionen ist jedoch groß und reicht von JavaScript bis CSS. Die folgenden Ergebnisse sollen die Probleme aufzeigen, mit denen Webentwickler konfrontiert sind.

Gesamtzufriedenheit mit dem Scrollen im Web

Frage 27

Diese Frage wurde bewusst gegen Ende der Umfrage platziert, nach Fragen zu 26 Scroll-Nutzungsfällen und -Funktionen. Aus der Antwort geht hervor, dass die Web-Community Probleme mit dem Scrollen hat. Fast die Hälfte der Befragten gab eine allgemeine Unzufriedenheit an.

Wir sind der Meinung, dass die allgemeine Stimmung bezüglich der Arbeit mit Scrollen nicht so niedrig sein sollte. Dieser Messwert muss geändert werden. Er ist ein klares Signal, dass noch Arbeit ansteht.

Schwierigkeiten beim Arbeiten mit Scrollen

Frage 2

Unsere Recherchen haben ergeben, dass diese Schwierigkeiten auf die Vielzahl der Anwendungsfälle für Scrollen zurückzuführen sind. Scrollen kann Folgendes umfassen: - Positionierung von Elementen in scrollbaren Bereichen - Unendliches Scrollen - Scroll-Link-Animation - Karussells - Abstand in der Scrollleiste - Zyklisches Scrollen - Virtuelles Scrollen

Fehlende Browserfunktionen, komplexes JavaScript und die Notwendigkeit, Eingabemodi wie Touch, Tastatur und Gamepads zu unterstützen, erschweren diese Dinge.

Bedeutung von Touch-Interaktionen

Frage 3

Angesichts der zunehmenden Besuchsstatistiken über das mobile Web war es nicht überraschend, dass die Hälfte der Befragten angibt, dass Berührungspunkte für ihre Arbeit im Web sehr wichtig sind. Dies deutet darauf hin, dass Webfunktionen wie CSS-Scroll-Snap und touch-action besondere Aufmerksamkeit erfordern, damit das Web eine hochwertige Touch-Interaktion bieten kann.

Schwierigkeit der Navigation mit der Tabulatortaste oder dem Gamepad

Frage 5a

Das Scrollen umfasst Navigationsmethoden wie die Pfeiltasten, Tabulatortasten, die Eingabe des Leerzeichens und Gamepads. Es kann schwierig sein, diese bei benutzerdefinierten Scrollfunktionen zu berücksichtigen. Fast die Hälfte der Befragten gibt an, dass es etwas oder sehr schwierig ist, diese Eingaben zu berücksichtigen.

touch-action lernen

Frage 9

Einige der Umfragefragen betrafen die Verwendung bestimmter APIs. Die möglichen Antworten waren „Ja“, „Nein“ oder „Heute habe ich gelernt“. Ein wichtiges Feedback war die Anzahl der Nutzer, die berichteten, dass sie durch die Umfrage von touch-action erfahren haben, da dies eine wichtige Eigenschaft beim Erstellen benutzerdefinierter Touch-Gesten ist, die beim Scrollen mit dem Scrollen interagieren müssen.

Zyklisches Scrollen

Frage 27

Das ist viel für eine Scrollfunktion, die von der Webanwendung kaum oder gar nicht unterstützt wird. Dadurch entstehen oft hohe technische Schulden, da Duplikate oder JavaScript-Injections verwendet werden, um den Effekt zu erzwingen. Sie eignet sich gut für Produktkarussells und wenn Sie die Zeit in Sekunden oder Minuten auswählen, um ein zyklisches Scrollen zu ermöglichen.

Sind scrollbare Bereiche wichtig?

Frage 2

Den Befragten war die Bedeutung scrollbarer Bereiche sehr wichtig und sie gaben ein weiteres Signal zu den Herausforderungen an, die erforderlich sind, um qualitativ hochwertiges Scrollen zu ermöglichen.

Karusselle

Frage 20

Fast alle Befragten stellen in ihrer Webarbeit Karussells zur Verfügung, aber nur 25% finden sie einfach zu verwalten. In unserer Recherche waren vorgefertigte Karussells beliebt, aber diese Statistik hat uns überrascht, da sie nicht sehr zufriedenstellend klingt.

Unendliches Scrollen

Frage 22

Zwei Drittel der Befragten verwenden in ihrer Webarbeit das Scrollen ohne Ende und ebenso viele geben an, dass es schwierig ist, dies zu implementieren. Ein weiteres Beispiel für eine hohe Nutzung in Verbindung mit einer hohen Schwierigkeit, was uns darauf hinweist, dass hier Aufmerksamkeit erforderlich ist.

content-visibility und contain-intrinsic-size können zwar kombiniert werden, um die Renderkosten für lange scrollbare Bereiche zu senken, dies hat jedoch keine Auswirkungen auf die UX des „Mehr laden“-Infinite-Scroll-Elements.

Scroll- oder scroll-ausgelöste Animationen

Frage 24

Fast die Hälfte aller Befragten verwendet scroll-synchronisierte Animationen und die Hälfte der Befragten findet sie schwierig. Dies lässt sich wieder auf die hohe Nutzung und die damit verbundenen Schwierigkeiten zurückführen.

Mit integriertem Scrollen konkurrieren

Frage 26

Die integrierten Scroll- und Touch-Interaktionen von Smartphone- und Tablet-Anwendungen werden oft als Bereich genannt, in dem das Web aufholen kann. Zu den Funktionen gehören scrollbezogene Animationen, programmatische Oberflächen, Sprachintegration, Scrollhinweise und APIs zum Aktualisieren per Pull-to-Refresh.

Nur die Hälfte der Befragten war der Meinung, dass es nur manchmal möglich ist, das Scrollen mit der integrierten Funktion zu erreichen.

Allgemeine Zufriedenheit mit Scroll-Interaktionen im Web

Frage 27

Erkenntnisse aus der Umfrage

Die Umfrageergebnisse sind in vier Kategorien unterteilt: Kompatibilität, Ausbildung, APIs und Funktionen.

Kompatibilität

Das Chrome-Team hat sich zum Ziel gesetzt, die Anzahl der Webkompatibilitätsprobleme, einschließlich der Scroll-Kompatibilität, zu reduzieren.

Die ersten drei Kompatibilitätsprobleme, auf die wir uns konzentrieren sollten: 1. Kompatibilität mit horizontalem Scrollen: 1. overscroll-behavior Browser-unabhängig. 1. Präfixe aus -webkit-scrollbar entfernen und dem Standard folgen

Bildung

Die Umfrageergebnisse haben gezeigt, dass es mehr Informationen zu touch-action und logischen Eigenschaften geben muss. Der Browser ist beim internationalen Layout an vorderster Front und es ist offensichtlich, dass er nicht ausgelastet oder missverstanden wird.

Schwerpunkte: 1. touch-action 1. Logische Attribute

APIs

Die Nutzung von Scroll-Snapping nimmt zu und Entwickler haben uns mitgeteilt, dass sie Funktionen interoperabel mit gängigen Bibliotheken und Plug-ins verwenden möchten. Wenn diese Lücke zwischen CSS- und Plug-in-Bibliotheken geschlossen wird, wird die Zufriedenheit der Entwickler und Nutzer mit Scroll-Snap verbessert.

Wir konzentrieren uns bei der API-Entwicklung auf scroll-snap: 1. API-Verfügbarkeit und ‑Kompatibilität für alle Browser 1. Arbeiten an neuen CSS APIs wie scroll-start beginnen. 1. Beginnen Sie mit der Arbeit an neuen JS-Ereignissen wie snapChanged().

Funktionen

Die Umfrageergebnisse haben gezeigt, dass Nutzer mit bestimmten Arten von scrollbaren Komponenten im Web zu kämpfen haben, da die Plattform nicht die notwendigen Primitives bietet, um sie ohne Plugins oder großen Aufwand zu erstellen. Dies ist ein Bereich, den wir in Zukunft genauer untersuchen möchten.

Zu den Funktionen, die Entwicklern schwerfallen, gehören: 1. Karussells 1. Virtuelles Scrollen 1. Unendliches Scrollen

Ressourcen

• Scroll Survey Report
• Umfrage
• Mozilla DNA-Berichte
• Compat2021: Fünf häufige Probleme mit der Kompatibilität im Web beheben

Miniaturansicht: Foto von Taylor Wilcox auf Unsplash.