To Infinite Scroll o Not to Infinite Scroll: Dove siamo arrivati ​​così lontano

Oggi stiamo approfondendo i fatti più rilevanti su come lo scrolling infinito sia diventato una tecnica così acclamata su tutto il web e perché, nonostante la sua popolarità, non sia ancora così ampiamente adottato nel web design.

Questa funzionalità è apparsa in un punto della storia di Internet quando la quantità di informazioni da presentare sulle pagine Web è aumentata e la velocità delle connessioni ha permesso al lettore di accedere e trasferire le informazioni a velocità maggiori. La questione dello scrolling infinito sulle pagine Web è uno degli aspetti coinvolti nella progettazione dell'esperienza utente e non è così semplice come si potrebbe pensare.

Inizi e divulgazione

In Google, si chiama scorrimento continuo e può anche essere definito scorrimento continuo. In breve, lo scorrimento infinito è una tecnica per fare in modo che il browser carichi automaticamente nuovi contenuti quando l'utente raggiunge la fine della pagina in modo che non sia necessario cercare i pulsanti di impaginazione per passare alla parte successiva; il tutto apparirà semplicemente ruotando la rotellina del mouse.

Questa tecnica è utilizzata in particolare nella pagina dei feed di notizie su Facebook; la pagina dei risultati della ricerca di immagini di Google e la sequenza temporale di Twitter. Un interessante esempio aggiornato pubblicato a scopo di riferimento è disponibile nella pagina demo del plug-in IsQuope jQuery.

hexaedro.eu sfrutta lo scrolling orizzontale infinito per illustrare l'evoluzione dell'umanità

Uno dei primi riferimenti a questo tipo di scorrimento è stato fatto nel 2005 da Bill Scott (direttore dell'ingegneria dell'interfaccia utente di PayPal) nel suo articolo Death to Paging! - Rilasciato Rico LiveGrid.

È stato sviluppato per presentare all'utente una tabella di dati molto ampia in una singola vista prima che dovesse passare a una sezione successiva e per prima cosa veniva chiamato griglia live a scorrimento. L'articolo includeva una sezione pro e contro, alcune considerazioni di progettazione e formulava gli elementi della domanda in parole chiare: paginazione contro scroll infinito.

La tecnica è stata raffinata e ha iniziato ad essere molto popolare sul web, causando un'improvvisa esplosione di entusiasmo al riguardo. Un anno dopo l'articolo di Scott, che annunciava la griglia live a scorrimento, era possibile trovare testi online che diffamassero il fenomeno del blocco di pagine e lodando la nuova pergamena con il motto “Non forzare l'utente a chiedere più contenuti: dai a loro."

A metà del 2008, il termine infinito scroll aveva già una sua vita e un sito con lo stesso nome dedicato a spiegare in dettaglio come funziona. Il sito offriva anche una manciata di plug-in per consentire lo scorrimento continuo su temi WordPress, pagine tramite librerie jQuery e componenti aggiuntivi "autopagerize" per Safari e Chrome che potevano aggiungere automaticamente la funzione di scorrimento ai siti normali.

"Non forzare l'utente a chiedere più contenuti: daglielo."

Anche nel 2012 la tecnica è ancora presentata come un'innovazione "per la gioia del tuo cuore" insieme all'implementazione di un design reattivo. Da un punto di vista più analitico, questo è stato un ulteriore passo avanti nella separazione tra l'esistenza del contenuto inizialmente stampata e la sua controparte elettronica. Dopotutto, l'idea di una pagina web proviene proprio dal mondo materiale di giornali, riviste e libri con pagine di carta reali.

Thomas Baekdal spiega la relazione tra pagine stampate e testi visualizzati su schermi digitali in Dissolving that Print Mentality. Baekdal fondamentalmente risolve il problema con una sorta di formula: formatta prima o contenuto prima. Nella sua analisi Baekdal afferma che i limiti dei supporti stampati non dovrebbero essere trasferiti sullo schermo digitale.

Apple ha anche reso omaggio alla tendenza allo scorrimento. Una delle caratteristiche principali del nuovo iBooks 3.0 è stata la possibilità di scorrere i libri in verticale. Ora il lettore potrebbe dimenticare l'effetto di cambio pagina e leggere i propri bestseller sfogliando le dita. Quella era precisamente un'implementazione del motto "sbarazzarsi dell'orso danzante" di Baekdal: consentire al lettore di essere liberato dal vecchio paradigma del libro fisico. Fortunatamente, c'era un'opzione per decidere tra il tema tradizionale di rotazione della pagina o quello a scorrimento continuo a volontà, quindi il lettore vecchio stile avrebbe ancora l'opportunità di imitare i libri veri all'interno del proprio dispositivo.

Perché evitare questo miglioramento UX?

Una delle poche eccezioni alla regola di abbracciare lo scrolling infinito è stata il caso di Dan McKinley a Etsy, dove una ricerca pratica che utilizzava la metodologia di test A / B ha mostrato che la tecnica non funzionava come previsto.

In effetti, lo scorrimento infinito è stato rimosso dal sito dopo che il numero di clic sui preferiti è diminuito e la funzione di ricerca non è stata più utilizzata. Nonostante un possibile pregiudizio sul metodo utilizzato per valutare le reazioni degli utenti, è chiaro che lo scrolling infinito non stava massimizzando l'attività da solo, o almeno che il solito pubblico del sito non era d'accordo con il cambiamento.

Google è un altro esempio in cui lo scorrimento continuo non è riuscito a essere implementato completamente. Solo la ricerca di immagini ha uno scorrimento infinito, e anche lì lo scorrimento è limitato con il pulsante "Mostra più risultati".

uno degli usi più creativi dello scrolling infinito è rappresentato nel sito distancetomars.com

I benefici

Più che essere semplicemente una caratteristica di fantasia, lo scorrimento infinito presenta vari vantaggi che lo rendono utile in molti casi:

• L'attenzione ininterrotta che un utente mantiene quando viene fornito automaticamente più contenuto è al centro dell'attrattiva dello scrolling infinito. Il lettore non dovrà smettere di pensare a dove trovare il pulsante successivo o quale numero di pagine dovrebbe arrivare, a seguito di una migliore attenzione.
• In termini psicologici, lo scrolling infinito sembra innescare risposte automatiche basate sulla curiosità e sull'alleviamento delle aspettative prodotte in attesa di nuove informazioni, il che provoca una sorta di eccitazione e volontà di continuare a scorrere per vedere cosa succede. Questo meccanismo psicologico merita una comprensione sufficiente poiché il vantaggio iniziale può trasformarsi in un problema. Ad esempio, i risultati di McKinley suggeriscono che lo scorrimento continuo della pagina dei risultati di ricerca in qualche modo ha scioccato o confuso gli utenti, sovraccaricandoli con sempre più informazioni al punto da evitare l'utilizzo della ricerca.
• I design dei modelli possono trarre vantaggio da una maggiore pulizia, più spazio per i contenuti e elementi meno fastidiosi come l'elenco di numeri per il paging.

Gli aspetti negativi

Naturalmente, ci sono anche una serie di problemi con lo scorrimento infinito che dovrebbero essere considerati:

• Tempo di caricamento della pagina aumentato: è ovvio che il contenuto aggiuntivo da aggiungere in fondo a una pagina richiede più tempo per essere scaricato. Gli utenti con connessioni remote o piani dati mobili scadenti avranno una capacità ridotta di navigare efficacemente quella pagina.
• Utilizzo della memoria: i browser, sia su computer desktop che su dispositivi mobili e tablet, possono potenzialmente esaurire la memoria e bloccarsi, specialmente quando la pagina carica tonnellate di immagini.
• L'aumento del tempo di caricamento insieme a una maggiore quantità di memoria di sistema richiesta e l'utilizzo del processore potrebbe inevitabilmente comportare una navigazione sgradevole e instabile.
• Compatibilità del browser: poiché lo scrolling infinito appartiene al regno del web design reattivo, dipende da librerie e plug-in che potrebbero non essere completamente compatibili con dispositivi o versioni di browser precedenti.
• Sia vedere sparire il piè di pagina che non riuscire a raggiungere può essere un'esperienza "traumatizzante" per l'utente. Inoltre, tutto il contenuto del piè di pagina, e quindi, la funzione del piè di pagina stesso svanirà.
• Mancanza di orientamento e riferimento spaziale: in uno schema impaginato gli utenti possono impostare un semplice riferimento visivo per orientarsi attraverso il contenuto della pagina e contrassegnare i luoghi in cui si trova qualcosa di interessante, quindi è possibile tornare rapidamente lì in seguito. Potrebbero esserci utenti che si sentono persi o confusi non sapendo dove si trovano realmente o mancando ciò che stavano cercando.
• Perdita dell'ultima posizione dell'utente nel flusso di dati, quando si preme il pulsante di aggiornamento o il pulsante Indietro. Poiché lo scrolling infinito mira a mostrare grandi quantità di voci, dovrebbe essere implementato anche un modo per recuperare la posizione effettiva nell'elenco, per evitare situazioni frustranti. La maggior parte dei reclami contro pagine infinite si riferisce a questi ultimi due punti poiché gli utenti stavano perdendo il controllo sulla pagina che visitano.
• I segnalibri tendono ad essere inutili poiché un punto di interesse non verrà contrassegnato su una pagina discreta ma fluttuerà da qualche parte nel flusso delle voci.
• Sebbene non sia necessariamente una cosa negativa, le classifiche potrebbero variare notevolmente nelle pagine di ricerca poiché quei risultati limitati dopo il numero di pagina 2 appariranno quindi sul numero di pagina 1 semplicemente scorrendo abbastanza a lungo.

Ecco perché, nonostante la loro grande popolarità, le pagine infinite non sono sempre la migliore opzione per ogni sito o anche per lo stesso sito visualizzato su dispositivi diversi.

Qualche soluzione alternativa

Gli sviluppatori trovano costantemente soluzioni alternative per questi inconvenienti, rendendo più efficace lo scorrimento infinito. Il caso ben documentato della nuova app LinkedIn per iPad offre un buon case study su problemi e soluzioni durante l'implementazione dello scroll infinito.

L'applicazione doveva avere uno scorrimento infinito in un elenco centrale per mostrare notizie e immagini grandi; questo ha creato la necessità di un modo conveniente di gestire tutti gli elementi senza influire sulle prestazioni dello scorrimento. Trucchi HTML5 e CSS sono stati combinati per ottenere il risultato finale di un'app che mostra il contenuto senza intoppi.

Indubbiamente, questo miglioramento dell'esperienza dell'utente ha ancora un buon modo di evolversi, ma gli utenti godono già di una migliore esperienza di navigazione, in particolare quando si tratta di navigare in pagine con molte informazioni, grafica e testo.

Zona del deposito

Lo scorrimento infinito è qui per rimanere, quindi è consigliabile conoscere diversi metodi per farlo funzionare:

Enhantsy: la manciata di persone a cui è piaciuta l'implementazione dello scrolling infinito su Etsy.com può riattivarla sulla propria pagina installando questo plugin dalla pagina Enhantsy. Il plugin offre diverse altre funzioni oltre a ripristinare lo scorrimento continuo in tutte le pagine di Etsy.

Soluzioni WordPress: i blog sono forse i candidati preferiti per lo scrolling infinito. Forse una piccola parte degli utenti non può ancora gestire il piè di pagina mobile semitrasparente che WordPress posiziona quando lo scorrimento infinito è abilitato, ma per la grande maggioranza a cui piace la tecnica, Infinite-Scroll è un plugin che attiverà la modalità di scorrimento infinito nella maggior parte di temi WP e richiede poca esperienza o capacità di programmazione. Il plug-in Jetpack offre anche lo scrolling infinito come un ulteriore tra dozzine di funzionalità. Tuts + ha pubblicato un tutorial su come ottenere lo scrolling infinito usando jQuery; questo tutorial è indirizzato ai trilli più coraggiosi disposti a implementare lo scrolling infinito inserendo il codice stesso.

Discussione e raccomandazioni: StackOverflow offre molti tutorial su qualsiasi aspetto immaginabile correlato allo scorrimento infinito.

Alternative mobili: lo scorrimento infinito funziona bene con i dispositivi mobili a causa della natura dei loro schermi touch. È possibile ottenere l'effetto su Android utilizzando Android-Binding. I metodi per lo scorrimento delle immagini utilizzati nelle app sono anche disponibili, ad esempio, per funzionare su iPhone.