The Old Intense Minimalism

Web Design Hint: Scroll, not Fold.

E’ da tempo che sto ricercando uno studio analitico che risponda al quesito: è meglio inserire un contenuto più sotto nella stessa pagina (scroll) oppure posizionarlo in una seconda pagina (next)? in che situazioni?

Ringrazio quindi Cyanto per aver fatto un post che segnala alcune numeriche e studi qualitativi in merito. Tre sono stati pubblicati da ClickTale, basati su analisi effettuate a partire dal loro servizio di tracciamento (2006/12, 2007/10, 2007/12). Due invece sono del sito User Interface Engineering, che fa alcune osservazioni qualitative (1998/07, 2006/08).

Analisi Quantitative (ClickTale)

La prima ricerca (2006/12), eseguita su un campione di 120.000 views, riporta una evidenza interessante. Nelle pagine in cui è presente una scrollbar la maggior parte degli utenti (22%, più di 1 su 5) visualizza il 100% della pagina indipendentemente dall’altezza della stessa, con un divario notevole rispetto a tutte le altre percentuali:

Il secondo dato interessante che si nota su questi dati è che non c’è correlazione fra la quantità di pagina vista e la lunghezza della stessa, come si nota da questo grafico (notate comunque la fluttuazione verso l’alto sulle prime tre altezze minori):

La ricerca successiva del 2007/10 esegue analisi più complesse su un campione più ampio ma conferma questi dati. Interessante invece quella del 2007/12 che aggiunge il fattore tempo, ovvero correla i dati precedenti con la quantità di tempo che gli utenti spendono su una determinata parte della pagina.
ClickTale cita il tempo speso come “attention” (“attenzione”) ma credo sia un errore stabilire una correlazione diretta fra i numeri analizzati e l’attenzione dell’utente. Preferisco usare “permanenza”:

Il grafico in questo caso è un po’ confuso, si notano però alcune caratteristiche interessanti. La prima è il picco intorno ai 500 pixel, quasi ovvio visto che è lo spazio che appare immediatamente caricata la pagina. Successivamente c’è un rapido declino (esponenziale) fino ai 1000 pixel (si vede meglio sugli altri grafici riportati da ClickTale) e dai 1000 in poi il calo è lineare, con un nuovo picco a fondo pagina, probabilmente perché spesso è presente un footer navigabile e in generale l’utente si interroga su come proseguire la navigazione.

Queste analisi numeriche non rispondono alla mia domanda iniziale (“scroll o next?”), ma sono un interessante insight su alcune dinamiche che avvengono e buoni suggerimenti su come progettare la pagina.

Analisi Qualitative (UIE)

L’articolo del 1998 di Jared M. Spool “As the Page Scrolls” inizia così:

Users say they don’t like to scroll. As a result, many designers try to keep their web pages short.

But one of the most significant findings of our research on web-site usability is that users are perfectly willing to scroll. However, they’ll only do it if the page gives them strong clues that scrolling will help them find what they’re looking for.

L’introduzione è già di per sé una ottima sintesi del resto dell’articolo: sintetizza sia il problema cognitivo degli utenti sia la risposta progettuale.

L’evidenza di queste affermazioni è stata portata alla luce da alcuni test utente fatti su due versioni di un sito: uno con pagine lunghe, l’altro con pagine che stavano perfettamente nello spazio visuale del browser (quindi, senza barre di scorrimento).
Il risultato è che l’utente non ha avuto alcuna percezione di miglioramento in quella senza barre e al contrario è riuscito a raggiungere più facilmente l’obiettivo quando i contenuti erano presentati su una sola pagina.

Il problema evidenziato è che nel caso di pagine corte gli utenti per reperire informazioni dovevano continuamente fare una navigazione a rimbalzo, ovvero continuare a clickare avanti, tornare indietro, clickare avanti e così via.

Una pagina lunga diventa ancora più efficace se viene fatto un raggruppamento logico e funzionale sia dei link che portano altrove, sia dei contenuti interni, in modo che l’utente con un colpo d’occhio è in grado di localizzare l’informazione che richiede. Non dimentichiamo infatti che in media gli utenti non leggono, scansionano.

L’articolo seguente sempre di Jared M. Spool, “Utilizing the Cut-off Look to Encourage Users To Scroll”, fornisce una ultima indicazione: dare alle pagine lunghe un look “tagliato” (“cut-off look”), in modo che vi sia l’affordance visuale di un contenuto che prosegue.

In Sintesi, i Principi

Da tutta questa discussione possiamo rilevare alcuni punti interessanti:

1. La lunghezza della pagina non influenza il comportamento di scrolling.
2. L’utente è propenso a usare lo scroll, frequentemente fino in fondo (22%, circa 1 su 5).
3. E’ necessario fornire forti suggerimenti visuali indicanti che la pagina prosegue oltre la parte immediatamente visibile (“cut-off look”).
4. La lunghezza della pagina è quindi determinata solamente dal contenuto: se ci sono tante informazioni correlate è meglio che siano raggruppate assieme, altrimenti si possono separare in differenti pagine.

In generale io propendo alla presentazione panottica dei dati, perché consente all’utente di vedere meglio la struttura dell’informazione e quindi migliora la sua possibilità di scelta, gli da controllo. Più in generale, le informazioni presentate simultaneamente su un ampio spazio sono più fruibili di piccoli contenuti spezzati.

Spesso questa tesi viene contraddetta dicendo che l’utente vuole poche informazioni e si “spaventa” se ci sono troppe informazioni: è vero, ma questo è un problema di presentazione, non di quantità. A parità di contenuti ci sono molti modi di veicolare il messaggio: alcuni semplici, altri complicati. Come sempre accade fare una cosa semplice è difficile ed è il motivo per cui nella maggior parte dei casi le pagine lunghe sono anche caotiche.

Una piccola precisazione su questo ragionamento: utilizzare più spazio rende più fruibili le informazioni, ma spesso questo si scontra con i problemi di gestione dello spazio stesso: un giornale è scomodo da sfogliare, a causa delle sue dimensioni. Un libro invece sta nello zaino. E un cellulare in tasca. Bisogna quindi tenere in considerazioni anche questi fattori, come sempre trovando un bilanciamento. Ovvero, il ruolo del designer.