Report sul sondaggio di scorrimento 2021

Ricevi il report del sondaggio sullo scorrimento del 2021 e il commento 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 su scorrimento e azioni tocco basato sui problemi più segnalati nel report MDN Web DNA 2019. Il report del sondaggio sullo scorrimento del 2021 è pronto e il team di Chrome vorrebbe condividere alcuni pensieri e azioni che abbiamo tratto 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 del web.

Visualizza il report del sondaggio sullo scorrimento del 2021.

Risultati degni di nota

Il sondaggio ha raccolto in forma anonima 880 invii, di cui 366 hanno risposto a tutte le domande.

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

Soddisfazione generale per lo scorrimento del web

Domanda 27

Questa domanda è stata inserita intenzionalmente verso la fine del sondaggio, dopo le 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 ha espresso un livello di insoddisfazione generale.

Riteniamo che il sentiment generale nei confronti dello scorrimento non debba essere così basso. Questa metrica deve essere modificata: è un chiaro segnale che c'è del lavoro da fare.

Difficoltà a lavorare con lo scorrimento

Domanda 2

Dalla nostra ricerca, queste difficoltà derivano dalla moltitudine di casi d'uso per lo scorrimento. Quando parliamo di scorrimento, ci riferiamo a: - Posizionamento degli elementi all'interno delle aree scorrevoli - Scorrimento infinito - Animazione collegata allo scorrimento - Caroselli - Spaziatura interna della visualizzazione a scorrimento - Scorrimento ciclico - Scorrimento virtualizzato

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

Importanza delle interazioni touch

Domanda 3

Poiché il numero di utenti web mobile è in costante aumento nelle statistiche sulle visite, non è stato sorprendente vedere che la metà degli intervistati ha dichiarato che il tocco è molto importante per il loro lavoro sul web. Ciò ha indicato che le funzionalità web come lo scorrimento istantaneo CSS e touch-action richiedono maggiore attenzione, in modo che il web possa offrire un'interazione touch di alta qualità.

Difficoltà di navigazione con il tasto Tab o il gamepad

Domanda 5a

Lo scorrimento include metodi di navigazione come frecce della tastiera, tasti Tab, pressioni della barra spaziatrice e gamepad e può essere difficile includerli quando si esegue lo scorrimento personalizzato. Quasi la metà degli intervistati dichiara che è abbastanza o estremamente difficile includere questi input.

Apprendimento touch-action

Domanda 9

Alcune domande del sondaggio riguardavano l'utilizzo di determinate API con una possibile risposta Sì, No o "oggi ho imparato". Un feedback degno di nota è stato il numero di persone che hanno dichiarato di aver appreso informazioni su touch-action dal sondaggio, in quanto si tratta di una proprietà fondamentale quando si creano gesti tattili personalizzati che devono interagire all'interno dello scorrimento.

Scorrimento ciclico

Domanda 27

Questi numeri sono elevati per una funzionalità di scorrimento con un supporto minimo o nullo fornito dalla piattaforma web. Per questo motivo, la funzionalità spesso comporta un debito tecnico elevato, con duplicazione o inserimento di JavaScript per forzare l'effetto. È una scelta popolare per i caroselli di prodotti e quando si seleziona il tempo in secondi o minuti per offrire lo scorrimento ciclico.

Le aree scorrevoli sono importanti

Domanda 2

Gli intervistati hanno sottolineato l'importanza delle aree scorrevoli, fornendo un altro segnale delle difficoltà richieste per offrire uno scorrimento di alta qualità.

Caroselli

Domanda 20

Quasi tutti gli intervistati utilizzano i caroselli nel loro lavoro sul web, mentre solo il 25% li trova facili da gestire. I caroselli pronti all'uso erano molto apprezzati durante la nostra ricerca, ma questa statistica ci ha sorpreso, in quanto non sembra molto risolutiva.

Scorrimento continuo

Domanda 22

Due terzi degli intervistati utilizzano lo scorrimento infinito nel proprio lavoro sul web e un numero uguale di persone afferma che è difficile da implementare. Un altro esempio di elevato utilizzo abbinato a un'elevata difficoltà, che indica un'area che richiede attenzione.

Sebbene content-visibility e contain-intrinsic-size possano essere combinati per ridurre i costi di rendering per le aree scorrevoli lunghe, non sembra che aiutino con l'esperienza utente di scorrimento infinito "Carica altro".

Animazioni collegate o attivate dallo scorrimento

Domanda 24

Quasi la metà di tutti gli intervistati utilizza le animazioni coordinate dallo scorrimento e la metà degli intervistati le trova difficili, collegando ancora una volta l'uso elevato alla difficoltà.

Competi con lo scorrimento integrato

Domanda 26

Le interazioni di scorrimento e tocco integrate delle applicazioni per smartphone e tablet sono spesso considerate un punto in cui il web può recuperare terreno. Le funzionalità includono animazioni collegate allo scorrimento, interfacce programmatiche, integrazione vocale, suggerimenti per lo scorrimento e API pull-to-refresh.

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

Soddisfazione complessiva per la creazione di interazioni di scorrimento sul web

Domanda 27

Principali risultati del sondaggio

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

Compatibilità

Il team di Chrome ha dichiarato l'obiettivo di ridurre il numero di problemi di compatibilità web, inclusa la compatibilità dello 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 è necessario fornire maggiori informazioni su touch-action e sulle proprietà logiche. Il browser è all'avanguardia nel layout internazionale ed è evidente che è sottoutilizzato o incompreso.

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

API

L'utilizzo dello scorrimento agganciato è in aumento e gli sviluppatori hanno risposto che vogliono utilizzare le funzionalità in modo interoperabile con librerie e plug-in popolari. Ridurre questo divario tra le librerie CSS e dei plug-in contribuirà a migliorare la soddisfazione degli sviluppatori e l'esperienza utente dello scorrimento agganciato.

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

Funzionalità

I risultati del sondaggio hanno mostrato che gli utenti hanno difficoltà con alcuni tipi specifici di componenti correlati allo scorrimento sul web, in quanto la piattaforma non fornisce le primitive necessarie per crearli senza plug-in o un elevato livello di impegno. Si tratta di un'area 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 sul sondaggio di scorrimento
• Annuncio del sondaggio
• Report di Mozilla DNA
• Compat2021: eliminazione dei cinque principali pain point di compatibilità sul web

Immagine miniatura: foto di Taylor Wilcox su Unsplash.