Scrollabile non troppo

Mode e tendenze guidano troppo spesso la progettazione dei siti, compiuta con la voglia di fare come quel sito bello, invece di pensare chi lo visiterà? e che tipo di contenuti ospiterà? a scapito di una corretta user experience.

Spesso infatti troviamo siti che ricalcano soluzioni con scroll page (pagine a scorrimento verticale) anche quando non è necessario.

I siti infinite scrolling sono quelli composti da lunghe colonne di miniature o abstract di articoli e contenuti ospitati in altre pagine. Modelli di navigazione cui, in maniera subdola, ci hanno abituato alcuni dei più noti social network. A partire da MySpace, oggi con una interfaccia molto più raffinata, che nei primi anni del 2000 adottava l’impaginazione verticale di tutti i contenuti, altri social network hanno seguito il motto tutto in una pagina!, spesso proprio la home. Altri, come Facebook, fanno loro il must dello scroll verticale nella home e nella bacheca personale. Da lì si sono sviluppate le infinite scrolling page, poi mutate negli ultimi tempi in parallax scrolling, con pro e contro. È compito dei designer e dei developer scegliere la soluzione più adatta caso per caso.

L’interfaccia di MySpace oggi, ben lontana da quella del passato.

La soluzione infinite scrolling si basa sull’esigenza di mostrare contenuti in continuo aggiornamento disponendo in alto i più recenti e in basso (scroll down) quelli cronologicamente precedenti. Agli occhi dell’utente appare un flusso di contenuti ospitati in una pagina “infinita”. Più si scorre verso il basso e più contenuti vengono mostrati. Oltre ai socialnetwork sopra indicati, anche Pinterest, Twitter e Tumblr (solo per citarne alcuni) utilizzano questo approccio, raffinandolo a volte con il pulsante more in fondo alla pagina per mostrare altri contenuti e nuovi contenuti e aggiornamenti in cima alla pagina per indicare all’utente che sono stati pubblicati nuovi contenuti negli ultimi secondi.

Il design basato sull’infinite scrolling è sicuramente quello più adatto per siti e app in responsive mobile (ne abbiamo parlato anche in Come fare una app, dal flowchart al wireframe). Questo soprattutto perché l’esperienza utente in ambito mobile (smartphone o tablet) è intuitivamente guidata dallo scroll verticale e orizzontale. È però bene non trascurare la presenza di una tab bar o un ordinato hamburger button che permettano di accedere alle informazioni di solito ospitate nei più tradizionali footer. Proprio perché adatto in ambito mobile, Instagram ha adottato l’infinite scrolling per la sezione di ricerca dell’app.

L’infinite scrolling adottato da Instagram.

In questa sezione è possibile visualizzare tutte le miniature scelte da Instagram a seconda degli apprezzamenti (like) da noi indicati. Una miniatura premuta viene ingrandita e mostrata in primo piano rispetto alle altre, senza dover andare in un’altra sezione per indicarla come preferita e poi dover tornare all’elenco. È quello che in sostanza avviene anche nell’interazione con 3D touch di iOS.

E adesso la parallasse

Potremmo definire il parallax scrolling come una variante più moderna, che simula la profondità, dell’infinite scrolling. Una immagine, o un colore, viene posto come sfondo fisso sul quale scorrono a diversa velocità porzioni della pagina web, dando all’utente la percezione dello scorrimento verticale di diversi blocchi, come se fossero micropagine sovrapposte allo sfondo. Di solito i blocchi raccolgono diversi tipi di contenuti (per esempio menu principale, about, contatti, miniature eccetera). Ma la vera differenza con l’infinite scrolling è la lunghezza della pagina web, che risulta “finita” con l’ultimo blocco che ospita il footer. I siti web che adottano questa variante ospitano spesso, a destra o a sinistra, l’indicatore di blocchi di scorrimento e il pulsante torna su in fondo alla pagina.

Non tutti i siti sono adatti a questi approcci. Ad esempio i portali di notizie (tra i più noti Corriere.it, Repubblica.it, Espresso.it) sarebbero a dir poco scomodi da consultare se fossero realizzati in infinite scrolling o parallax. Per questi infatti è meglio lavorare su pagine composte da più colonne che distinguano i temi a seconda della rubrica.

In questo articolo, la scrittrice e web designer Carrie Cousins prova a riassumere i pro e i contro dell’infinite scrolling. Se invece volete scoprire cosa ne pensano altri guru del design, invito a leggere People Don’t Scroll pubblicato su UX Myths. Su AWWWARDS è possibile trovare diversi ottimi esempi di parallax scrolling.

Sebbene negli anni novanta le persone non fossero abituate allo scorrimento, oggi è un gesto assolutamente naturale. […] Per essere sicuri che il contenuto verrà scorso, deve seguire certe regole di design e risultare interessante. Ricordate che il contenuto della prima pagina otterrà comunque la maggior parte dell’attenzione ed è critico nella decisione di proseguire o meno la lettura.

Se quindi decidessimo quale tipo di tecnica di navigazione e impaginazione avrà il nostro sito, dovremmo prima di tutto sapere a chi ci stiamo rivolgendo e con quale tipo di contenuto. Per i contenuti generati continuativamente dagli utenti (come avviene nei social network) l’infinite scrolling potrebbe essere la soluzione migliore per la nostra home page o per una sezione specifica del sito (non è detto infatti che sia adatto per tutto il sito).

Se invece il sito è dedicato al lancio di un prodotto specifico (un film, un videogioco, un bene-servizio) forse il parallax scrolling lo potrebbe rendere più coinvolgente. L’importante è non dimenticare mai l’impaginazione a più colonne, i caroselli di immagini (ad esempio per gli articoli in prima pagina) e i paginator (indicatori del numero di pagine) come le soluzioni più adatte per altri tipi di siti come ecommerce, notiziari eccetera.