city of zoe

Le pagine di internet sono come belle donne, che bisogna sollecitare e titillare ed esplorare in ogni punto per poterle conoscere nell’intimo, e questa metafora non è così fantasiosa per chi si occupa di internet. Per me che navigo dal ‘99, da quando lo facevo per servire il grande schermo, le pagine del piccolo schermo sono una scoperta continua.
Così quest’articolo “The myth of the page fold: evidence from user testing” che ho trovato su twitter mi da particolare soddisfazione e sollecita il mio desiderio di condivisione.

Il testo parla di analisi di usabilità delle pagine attraverso test con gli utenti, incrociando i dati di navigazione con l’eye tracking. Per chi non lo sapesse l’eye tracking è un test che si compie con speciali apparecchiature che consentono di seguire i movimenti dell’occhio sullo schermo.
Il test raccontato nell’articolo si concentra sull’analisi del page fold (letteralmente “pie’ di pagina”), ovvero l’estremo margine della prima schermata.
Normalmente quando si progetta una interfaccia la prima richiesta che viene fatta è di visualizzare alcuni contenuti- anche solo in parte, anche solo le etichette che li annunciano – nella prima schermata, prima del page fold. E di mantenere uno scroll limitato. Spesso lo sforzo richiesto al grafico è di azzerare lo scroll.

Questa riflessione di Fiz Yazdi e Joe Leech spiega perchè queste accortezze possono essere fuorvianti.

La prima osservazione intelligente, che forse non ci voleva l’eye traking per esprimerla, è che l’utente web ormai è abituato allo scroll e anzi una parte dei suoi sguardi si concentrano lì, sulla barretta a destra, per tenere sotto controllo quanto ancora gli resta e quanti dati quindi ancora potrà visualizzare.

Questo contraddice l’assunto che le pagine debbano essere il più brevi e compatte possibile. Tutto dipende dagli obiettivi dell’editore e dagli obiettivi dell’utente mentre visita le nostre pagine. Ad esempio chi legge LaRepubblica lo sa che le ultime news sono dedicate alla cronaca cittadina e se è interessato al tema scorrerà fino in fondo, infischiandosene della lunghezza della barra verticale.
Mi viene da osservare anche che la quantità di scroll che siamo disposti a tollerare è direttamente proporzionale alla coerenza e necessità dei contenuti che sono riportati in una schermata. Schermate con molto scroll e contenuti ripetitivi o poco interessanti, sono perfettamente illegibili, ma anche pagine con poco scroll e contenuti ridotti all’osso risultano superflue se non aggiungono informazioni e interazioni di interesse dell’utente. A volte forse è meglio avere tutti i contenuti raccolti in una sola schermata estesa e ben organizzata, piuttosto che contenuti ridotti ad atomi in un flusso di navigazione inutilmente articolato.

Il secondo assunto dell’indagine è che meno contenuto si propone in testa alla pagina, prima del piè di pagina, e maggiore è l’esplorazione complessiva. Come a dire: prendetevi tutto l’agio, lo spazio e il tempo per catturare l’attenzione del vostro utente: non è che se non gli dite tutto subito quello scappa. Meglio anzi mantenere ingombri ariosi, con contenuti principali ben in evidenza, pochi e di buon impatto. Sarà la presenza della barra di scorrimento a destra a “dire” al lettore che c’è dell’altro.

Il terzo pensiero potrebbe essere ritenuto per lo meno sconvolgente: la presenza di etichette orizzontali che annunciano a tutta grandezza i contenuti a seguire poco sopra il piè di pagina possono scoraggiare lo scrolling piuttosto che incoraggiarlo. Come se avere una preview tramite queste ampie e ben visibili etichette (altre news, primo piano, focus, other info, eccetera eccetera eccetera) mettesse già l’utente in condizione di decidere che quanto segue non gli interessa.
Questo, presumo, perchè le linee orizzontali creano cesura, definiscono margini di inizio e fine e se sono utili nella scrittura, nella lettura indicano “inizio del capitolo successivo, se non vuoi leggere smetti adesso”. Il cervello è abituato a cogliere questi segnali per trovare delle vie di fuga dalle letture. Anche quando le letture lo interessano, sa che la linea trasversale è una linea di stop e lì da precedenza alle altre sue sollecitazioni.

L’escamotage suggerito dagli autori è non privare la pagina di punti di orientamento ma rendere la narrazione visiva più unitaria, consentendo all’occhio di sbirciare un po’ oltre il piè di pagina. Come uno spione che poi non può fare a meno di continuare la sua spiata.

Sul finale tre consigli:

“Less is more – don’t be tempted to cram everything above the fold. Good use of whitespace and imagery encourages exploration.”

Suona un po’ come la scoperta dell’acqua calda, ma l’aspetto interessante è che la frugalità è suggerita per incoraggiare l’esplorazione, non per ordine o pulizia. Come a dire: lo stile è per l’utente, non per lo stile in sé.

“Stark, horizontal lines discourage scrolling – this doesn’t mean stop using horizontal full width elements. Have a small amount of content just visible, poking up above the fold to encourage scrolling.”

Stesso discorso come sopra: le linee orizzontali non vanno cancellate ma usate con criterio. Se poi ogni tanto qualcuno si ricordasse anche che lo schermo è medium multimodale e interattivo e non solo una pagina da leggere dall’alto in basso sarebbe anche meglio.

“Avoid the use of in-page scroll bars – the browser scrollbar is an indicator of the amount of content on the page. iFrames and other elements with scroll bars in the page can break this convention and may lead to content not being seen.”

Qui si consuma la mia perenne battaglia con il “grafico” (leggi: l’essere umano che ha ruolo di grafico, chiunque egli sia) che cerca sempre di propinarmi scroll dentro scroll, trascurando o non volendo sapere che così mi divorzierà dall’utente, che puntualmente dalle finestre che scrollano dentro altre finestre si sente frustrato, tradito, anche un po’ preso per i fondelli. Tutta sta fatica per muovere il mouse fino in fondo, per poi scoprire che non era finita! Qualche creativo molto convinto potrebbe fare un’arte dell’uso dell’iframe, dal titolo “InFrame, ovvero come far impazzire l’utente”. Forse qualcuno l’ha già fatto. Amen.