Web Design Hint: Scroll, not Fold.
August 22nd, 2008 di Davide Casaliin design, scrolling, usabilità, web | Letture: 2182
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:
- La lunghezza della pagina non influenza il comportamento di scrolling.
- L’utente è propenso a usare lo scroll, frequentemente fino in fondo (22%, circa 1 su 5).
- E’ necessario fornire forti suggerimenti visuali indicanti che la pagina prosegue oltre la parte immediatamente visibile (”cut-off look”).
- 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.
August 22nd, 2008 at 6:16 pm
Ciao Davide, ho qualche perplessità sull’estratto dell’articolo di Jared M. Spool che hai citato: dal 1998 ad oggi infatti, i dispositivi I/O sono cambiati facilitando alcune forme di interazione come lo scrolling delle pagine.
Oltre ad un incremento costante della dimensione degli schermi dei device “fissi” degli utenti, entra in gioco anche la diffusione massiva della rotellina centrale del mouse e i sistemi equivalenti presenti su molti notebook. Dieci anni fa la maggior parte dei mouse aveva ancora uno, due o tre tasti, una sfera che rendeva più difficile il movimento rispetto ai sistemi ottici di tracciamento, ma nessuna rotella, neppure fuori posto.
Questo naturalmente non significa che ad oggi possiamo permetterci di presentare un form di dieci pagine di scroll per la richiesta di un preventivo RC auto, la maggiore facilità nello scorrere pagine web può però influire sulla gravità del disagio percepito dell’utente, soprattutto quando il format stesso del contenitore prevede solitamente lo scrolling (es quotidiani, blog, wiki, etc…). Tu che ne pensi?
August 23rd, 2008 at 3:35 am
Hai notato un punto interessante che ho lasciato come indizio nell’articolo: l’evidenza dello scrolling nasceva già nel 1998, quando le rotelline non erano così diffuse (anche se c’è stato il boom nel 1997 grazie al supporto di Microsoft con Intellimouse, Office ed Explorer, diciamo che il mainstream c’è stato intorno al 2001, più o meno).
Ora fra rotelline, touch scroll e analoghi l’interazione è estremamente migliorata, rendendo lo scroll ancora più “facile” (e farei notare anche che seppure possibile, raramente è così “flawless” lo scroll orizzontale).
Notato questo interessante passaggio, confermo quello che dici tu in conclusione ampliando la parte conclusiva dell’articolo: la progettazione deve capire l’importanza dello scroll senza rimanere nella visione ottusa che “tutto deve essere visibile”, ma senza cadere in errori di progettazione della pagina, che comunque è costituita da un grosso insieme di fattori concorrenti.
La pagina singola a mio avviso deve essere usata per gestire contenuti semanticamente omogenei, facendo in modo, nei limiti del possibile, che tutto uno stesso livello di approfondimento sia presente su una unica pagina.
In questo modo:
1. L’utente ha una visione completa ed esauriente del singolo argomento contenuto in quella pagina
2. L’utente sa che clickando andrà ad un altro contenuto (stesso livello di dettaglio), ad un approfondimento (discesa nel dettaglio), al contenitore precedente (salita nel dettaglio).
3. Se la pagina è costruita bene, tendenzialmente all’inizio sarà presentata la parte più interessante e pian piano scendendo aumenterà il livello di dettaglio, in modo analogo alla stesura dei report di buon giornalismo, dove il primo paragrafo dovrebbe dare la notizia nei termini generali e ogni paragrafo aggiunge dettagli.
Questa però è la prospettiva semantica senza considerare altri fattori, come quello che citi tu: il disagio da overload informativo.
In realtà è possibile, ed è l’ostacolo maggiore in assoluto. Il problema a questo punto è *come* quel contenuto è presentato. Perché se i vari pezzi sono organizzati internamente alla pagina con una gerachia chiara, con definizioni precise e un buon labeling, il semplice scroll della pagina, proprio come in un giornale, è estremamente più efficace di qualunque altra soluzione.
Questo discorso però è molto delicato se invece si parla di form, perché qui si rischia di spaventare l’utente. Allora, le ipotesi sono: lavoro alla cieca, acchiappando subito il cliente, facendogli sperare sempre che “alla pagina dopo avrà la risposta”, oppure gli chiarisco tutto subito. Psicologicamente, è meglio applicare la prima soluzione se proprio non sono possibili alternative di semplificazione.
In realtà per la RC auto alternative di semplificazione su due piedi mi vengono in mente, richiedono però un buon design e fondamentalmente un gran bel lavoro di infografica: un processo a due step, in cui il primo richiede pochi dati essenziali per dare un risultato imperfetto che poi in un secondo step vado a raffinare aggiungendo dati… o accontentandomi del risultato.
Ma nascono altri problemi: la compagnia di assicurazioni correrebbe il rischio di presentare un risultato approssimato? Dovrei informarmi, ma potrebbero esserci problemi legali da approfondire per non incapparci.
Senza dilungarmi troppo, lo sto già facendo: soluzioni esistono molto frequentemente anche considerando molti aspetti e problematiche concorrenti su più fronti, ma a quel punto entra in gioco la variabile economica: la compagnia di assicurazioni crede che spendere per fare un bel form di generazione preventivi valga la pena? E qui è difficile argomentare, servono sempre degli innovatori che “provino per primi”… per convincere gli altri che la differenza c’è.
P.S.: curioso peraltro che mi citi l’RC auto, perché giusto l’altro giorno ho fatto un breve benchmark in merito.
August 24th, 2008 at 9:29 pm
Ho citato le RC auto perchè anche io in questo periodo ci ho lavorato un bel po’ e perchè si tratta di un settore nel quale è possibile analizzare in modo molto semplice, ad esempio attraverso i sistemi di web analytics, le risposte degli utenti nei confronti di modifiche al sito in quanto, rispetto ad altri ecommerce, il processo di acquisto è decisamente più semplice.
Analizzando i dati di questo genere di siti emergono fenomeni molto interessanti e forse si potrebbe dedicare a questo tema un articolo proprio su Idearium