Report sul sondaggio di scorrimento 2021

Scarica il report del sondaggio di scorrimento 2021 oltre alle parole del team di Chrome su come questo influisce sulle priorità e sui piani per Chromium e il web.

Adam Argyle

Sam Dutton

Ad aprile, il team di Chrome ha pubblicato un sondaggio sull'azione di scorrimento e sul tocco basato sui principali problemi segnalati nel report MDN Web DNA del 2019. Il report del sondaggio sullo scorrimento 2021 è pronto e il team di Chrome vorrebbe condividere alcune riflessioni e attività che abbiamo raccolto dai risultati del sondaggio. Ci auguriamo che questi risultati aiutino i fornitori di browser e i gruppi di standard a capire come migliorare lo scorrimento.

Visualizza il report Sondaggio di scorrimento 2021.

Risultati degni di nota

Il sondaggio ha raccolto in forma anonima 880 contenuti inviati, di cui 366 hanno risposto a ogni domanda.

Anche se per iniziare a usare lo scorrimento c'è una riga di CSS, ad esempio overflow-x: scroll;, l'area superficiale delle API e delle opzioni di scorrimento è ampia e comprende JavaScript e CSS. I seguenti risultati aiutano a evidenziare i problemi riscontrati dagli sviluppatori web.

Soddisfazione generale per lo scorrimento web

Domanda 27

Questa domanda è stata inserita intenzionalmente verso la fine del sondaggio, dopo domande su 26 casi d'uso e funzionalità di scorrimento. Dalla risposta è chiaro che la community web ha difficoltà con lo scorrimento. Quasi la metà degli intervistati riferisce un livello di insoddisfazione generale.

Riteniamo che il sentiment generale relativo all'utilizzo dello scorrimento non debba essere così basso. Questa metrica deve essere modificata; è un segnale chiaro che c'è ancora del lavoro da fare.

Difficoltà a lavorare con lo scorrimento

Domanda 2

Dalla nostra ricerca, queste difficoltà provengono dalla moltitudine di casi d'uso dello scorrimento. Quando parliamo di scorrimento, possiamo includere: - Posizionamento degli elementi all'interno di aree scorrevoli - Scorrimento infinito - Animazione collegata a scorrimento - Caroselli - Spaziatura interna tramite scorrimento della visualizzazione - Scorrimento ciclico - Scorrimento virtualizzato

La mancanza di funzionalità del browser, il codice JavaScript complesso e la necessità di supportare modalità di input come tocco, tastiera e gamepad rendono tutto questo più difficile.

L'importanza delle interazioni touch

Domanda 3

Dato che le statistiche sulle visite sono ancora in aumento per gli utenti del web mobile, non sorprende che metà degli intervistati riferisca che il tocco è molto importante per il proprio lavoro sul web. Ciò ha segnalato che funzionalità web come l'agganciamento dello scorrimento CSS e touch-action richiedono ulteriore attenzione per consentire al web di offrire interazioni touch di alta qualità.

Difficoltà di navigazione con il tasto Tab o il gamepad

Domanda 5a

Lo scorrimento include metodi di navigazione come le frecce della tastiera, i tasti Tab, la pressione della barra spaziatrice e i gamepad e può essere difficile includerli quando si eseguono operazioni di scorrimento personalizzate. Quasi la metà degli intervistati riferisce che è un po' o estremamente difficile includere questi input.

Apprendimento attivo touch-action

Domanda 9

Alcune delle domande del sondaggio riguardano l'uso di determinate API con una possibile risposta di Sì, No o "Oggi ho imparato". Un feedback notevole è stato il numero di persone che hanno segnalato di aver appreso touch-action dal sondaggio, in quanto si tratta di una proprietà fondamentale per la creazione di gesti tattili personalizzati che devono interagire con lo scorrimento.

Scorrimento ciclico

Domanda 27

Questi numeri sono alti per una funzionalità di scorrimento con supporto scarso o nullo dalla piattaforma web. Per questo motivo, la funzionalità comporta spesso elevati importi di debito tecnico, con l'inserimento di duplicati o JavaScript per forzare l'effetto. È popolare per i caroselli di prodotti e per la selezione del tempo in secondi o minuti per offrire lo scorrimento ciclico.

Le aree scorrevoli sono importanti

Domanda 2

Gli intervistati si sono sentiti molto per l'importanza delle aree scorrevoli, dando un altro segnale delle difficoltà necessarie per garantire uno scorrimento di alta qualità.

Caroselli

Domanda 20

Quasi tutti gli intervistati pubblicano caroselli durante il lavoro sul web, mentre solo il 25% li trova facili da gestire. I caroselli pronti all'uso erano molto popolari durante la nostra ricerca, ma questa statistica ci ha sorpreso perché non sembra molto risoluta.

Scorrimento continuo

Domanda 22

Due terzi degli intervistati scorrono infinito nel loro lavoro sul web e la stessa quantità di dati è difficile da fare. Un altro esempio di utilizzo elevato abbinato a difficoltà elevata, che ci indica un'area che richiede attenzione.

Anche se content-visibility e contain-intrinsic-size possono essere combinati per ridurre i costi di rendering per le aree a scorrimento lungo, non sembra aiutare a "caricare più " l'UX con scorrimento continuo.

Animazioni collegate allo scorrimento o attivate dallo scorrimento

Domanda 24

Quasi la metà degli intervistati utilizza animazioni con orchestrazione a scorrimento e la metà degli intervistati riscontra delle difficoltà, associando nuovamente un utilizzo elevato alla difficoltà.

Competi con lo scorrimento integrato

Domanda 26

Le interazioni di scorrimento e tocco integrate delle applicazioni per telefoni e tablet sono spesso promosse come un luogo chiaro in cui il web può recuperare. Le funzionalità includono animazioni con link a scorrimento, interfacce programmatiche, integrazione vocale, suggerimenti di scorrimento e API pull-to-refresh.

Solo la metà degli intervistati ha ritenuto che solo a volte fosse possibile eguagliare l'esperienza dello scorrimento integrato.

Soddisfazione generale relativa alla creazione di interazioni di scorrimento sul web

Domanda 27

Conclusioni del sondaggio

I risultati del sondaggio sono segmentati in quattro categorie: compatibilità, formazione, API e funzionalità.

Compatibilità

Il team di Chrome ha dichiarato un obiettivo per ridurre il numero di problemi di compatibilità web, inclusa la compatibilità con lo scorrimento.

I primi tre problemi di compatibilità su cui concentrarsi: 1. Compatibilità con lo scorrimento orizzontale. 1. overscroll-behavior cross-browser. 1. Rimozione dei prefissi da -webkit-scrollbar e rispetto dello standard.

Istruzione

I risultati del sondaggio hanno mostrato che è necessaria una maggiore conoscenza di touch-action e delle proprietà logiche. Il browser è in prima linea nel layout internazionale e sembra che sia sottoutilizzato o frainteso.

Aree su cui concentrarsi: 1. touch-action 1. Proprietà logiche

API

L'utilizzo dell'agganciamento di scorrimento è in crescita e gli sviluppatori hanno risposto alla loro richiesta di utilizzare funzionalità in modo interoperabile con le librerie e i plug-in più diffusi. Riducendo questo divario tra le librerie CSS e dei plug-in contribuirà a soddisfare le esigenze degli sviluppatori e dell'esperienza utente con scroll Snap.

Ci concentreremo sul lavoro dell'API scroll-snap: 1. Disponibilità e compatibilità dell'API nei vari browser. 1. Inizia a lavorare con nuove API CSS come scroll-start. 1. Inizia a lavorare sui nuovi eventi JS come snapChanged().

Funzionalità

I risultati del sondaggio hanno mostrato che gli utenti hanno difficoltà con alcuni tipi specifici di componenti legati allo scorrimento sul web, in quanto la piattaforma non fornisce le primitive di cui hanno bisogno per crearli senza plug-in o un impegno elevato. Questo è un campo che speriamo di esplorare più a fondo.

Le funzionalità che gli sviluppatori faticano a creare includono: 1. Caroselli 1. Scorrimento virtuale 1. Scorrimento continuo

Risorse

• Report sondaggio sullo scorrimento
• Annuncio del sondaggio
• Report del DNA di Mozilla
• Compat2021: eliminare i cinque principali problemi di compatibilità sul web

Immagine in miniatura: foto di Taylor Wilcox su Unsplash.