F-Shaped Pattern: come si è evoluto il comportamento sulla pagine web
C’era una volta e forse c’è ancora… Il famigerato “F-shaped Pattern” narrato per la prima volta nel 2006 da Nielsen Norman Group. Serve un ripasso?
Attraverso test di eyetracking è possibile notare come gli utenti tendano a seguire un percorso standard:
- A partire dall’header della pagina, iniziano a leggere in senso orizzontale, da sinistra verso destra
- Proseguono tracciando con lo sguardo una linea parallela alla superiore, ad un livello più basso
- “Scannerizzano” il resto della pagina leggendo le prime porzioni di testo, scorrendo verticalmente con lo sguardo, più velocemente o soffermandosi su alcuni dettagli se qualcosa cattura la loro attenzione.
E il pattern ad F è servito, ma non in tutti i casi: capita che un contenuto a metà pagina risulti di particolare appeal, invogliando gli utenti a scannerizzare il paragrafo e le righe che lo compongono senza limitarsi ai primi elementi sulla sinistra, creando quindi un “pattern ad E” (E-Shaped Pattern).
“F” come “Fretta”: sul web il vero tiranno è il tempo
Secondo alcuni recenti studi, la tendenza a scannerizzare seguendo pattern di lettura definiti va ricondotta più all’ambito comportamentale che al tipo di device o tecnologia utilizzati, resistendo sia su desktop che mobile; le ragioni più comuni alla base di questa “abitudine del tutto umana” sono essenzialmente tre:
- Formattazione: chiunque navighi, per mare o nel web, teme i muri – specialmente quelli di testo nel secondo caso. Trovarsi di fronte ad una pagina di “puro testo” non indurrà il nostro utente a leggere e a dedicare qualche secondo in più al nostro sito.
- Fretta: internet è un mare, e il nostro sito una delle tante gocce che lo formano. I nostri utenti sono alla ricerca di risposte e contenuti d’interesse, nel minor tempo possibile.
- Strategia mancata: immaginiamo di trovarci coinvolti in una conversazione di scarso interesse, con un interlocutore che tuttavia pensavamo avrebbe potuto offrirci risposte adatte alle nostre aspettative. Nel mondo reale sfilarsi da circostanze simili è più difficile rispetto al web: il fantasma del “back button” è sempre presente, soprattutto se i nostri contenuti non riescono a coinvolgere il nostro pubblico.
Prepariamo un percorso, accompagniamo gli utenti per mano
Ogni UX Designer lo sa: l’utente è al centro della progettazione, dal wireframe al contenuto. Come possiamo guidarlo attraverso le tappe che abbiamo preparato per lui all’interno del nostro sito?
- Creiamo percorsi ideali all’interno delle pagine: attraverso visual che non siano solo riempitivi ma invitino a proseguire nel viaggio o dividendo il testo in paragrafi titolati.
- Utilizziamo titoli e sottotitoli che offrano parole-chiave dalle prime battute: aizziamo la curiosità!
- Ricorriamo ad elenchi puntati e numerati: le liste piacciono a tutti – non solo a Natale.
- Il grassetto è un trucco antico ma sempre efficace, in più è anche SEO-friendly: offriamo così una mappa “formattata” interna al testo dei concetti principali.
- Sfoltiamo, riduciamo, eliminiamo il superfluo: teniamolo a mente come buon proposito per il nuovo anno nella stesura dei contenuti. Essenzialità anzitutto!
Il nostro approccio: un esempio
Fin qui sembra tutto molto semplice. Ma come lo applichiamo alle diverse tipologie di pagine di cui dobbiamo prenderci cura?
Una best practise da uno dei nostri progetti.
SelleItalia.com
SelleItalia.com
Il problema: come creare engagement e promuovere il nuovo piano editoriale del sito web?
La soluzione? Da un visore full screen abbiamo diviso la porzione di home page visibile all’accesso in box verticali e orizzontali, mettendo in primo piano l’identità del brand e la CTA per coinvolgere il pubblico in iniziative social. Sfruttando le linee di navigazione principali abbiamo creato un percorso, dal brand al prodotto, che gli utenti si trovano a seguire in modo naturale. Assecondare i comportamenti comuni – studiati attraverso i nostri tool di user testing e monitoraggio UX – per arrivare a risultati ottimali.