Tutti desiderano che i propri contenuti vengano letti, possibilmente parola per parola. Purtroppo, ciò avviene molto raramente. Sì, perché le persone nel mondo online leggono in modo molto più veloce e approssimativo. Da un lato, sicuramente l’ampia quantità di informazioni disponibili in rete spingono l’utente a fare una carrellata veloce della pagina e andare direttamente alla ricerca delle informazioni per lui più interessanti. Di norma, si dice che un utente non legga il contenuto di una pagina web, piuttosto la scansioni. Ciò significa che leggono solo quando qualcosa attira la loro attenzione. È proprio questo aspetto che va tenuto in considerazione nella progettazione dell’esperienza utente al fine di migliorare l’usabilità, la facilità d’uso e il piacere nell’usufruire del contenuto. In questo articolo vedremo il pattern Z e il pattern F utilizzati dell’UX design per impostare una pagina web centrata su una CTA e un contenuto con molto testo.
L’UX Design per il successo del contenuto
Nel creare un progetto web, è importante scegliere il giusto layout che ti permetta di raggiungere il tuo obiettivo. Per fare ciò chiediti quali sono le informazioni chiave che vuoi che l’utente veda nella pagina web, in quali ordine le informazioni devono essere visualizzate e cosa ti aspetti dall’utente in termini di azioni o risposta. Per attirare l’attenzione dell’utente, l’impostazione del contenuto, ovvero il suo design, possono essere modellati per creare “percorsi visivi” che guidino l’utente attraverso le informazioni. Negli ultimi anni si sono delineati diversi modelli. In questo articolo scopriamo come il pattern Z e il pattern F possano essere utilizzati per realizzare landing page o pagine web che assecondino l’occhio umano nella scansione del contenuto.
Qual è il ruolo dell’UX Design nel successo aziendale?
Il pattern Z: accompagna l’utente all’azione
Il pattern Z, come fa ben pensare la lettera, asseconda uno schema di osservazione tracciando un percorso a forma di Z. Questo layout si rivela efficace negli utenti che occidentali che utilizzano sistemi di scrittura dall’alto in basso, da sinistra a destra, poiché leggerebbero allo stesso modo una pagina cartacea. Gli utenti iniziano la scansione della pagina web dall’alto seguendo un percorso orizzontale da sinistra a destra, quindi portano lo sguardo in basso sul lato sinistro creando una linea trasversale. A questo punto, proseguono la scansione verso destra. Questa modalità crea quindi una forma immaginaria a forma di Z.
Per quale progetto utilizzare il pattern Z?
Puoi ottenere il meglio dal pattern Z con contenuti non focalizzati sul testo. Per quest’ultimi il pattern F, che vedremo in seguito, si addice maggiormente. Il pattern Z è la giusta soluzione per contenuti semplici con pochissimo testo ma con elementi chiave ben precisi su cui vuoi attirare l’attenzione. Parliamo quindi principalmente di landing page incentrate su uno o due elementi che rendano la scansione della pagina il più semplice possibile per i visitatori. Il layout Z è quindi la giusta scelta quando intendi avere un design all’insegna della semplicità in cui la Call-To-Action è l’elemento centrale.
Come utilizzare il pattern Z
In linea generale, il concetto può risultare piuttosto semplice: il pattern Z richiede che il layout del contenuto abbia la forma della lettera Z. Nella pratica, ciò vuole dire che le informazioni devono essere ordinate per grado di importanza all’interno della pagina. In alto le persone dovrebbero vedere quelle più importante e in basso quelle meno importanti. Il tutto deve essere inserito in un flusso che accompagna lo sguardo dell’utente da una parte all’altra della pagina. Puoi estendere il pattern Z creando anche “una serie di Z” all’interno della pagina.
Il tutto deve risultare in un flusso visivo che viene a crearsi quando riesci a trovare il giusto bilanciamento di peso e direzione visiva. Puoi trovare la giusta combinazione tra i due elementi seguendo questi punti:
- Parti dall’inizio, il primo punto su cui punterà lo sguardo dell’utente. Di solito è il posto giusto dove inserire il tuo logo.
- Qui si comincia a tracciare la (prima) linea orizzontale verso destra. Posiziona altre informazioni importanti, assegnando un maggiore peso visuale con un forte contratto in modo da catturare l’attenzione degli utenti. Non avere troppa fretta di inserire la CTA senza non aver ancora dato abbastanza informazioni.
Il centro della pagina nel pattern Z non ha un ruolo centrale a livello di contenuto, deve piuttosto mantenere vivo l’interesse, ma non deve distrarre dalla scansione. Un metodo molto comune è quello di utilizzare un’immagine hero, ovvero un’immagine di grandi dimensioni al centro della pagina tra le due linee orizzontale della lettera Z immaginaria.
- Ora devi guidare l’attenzione o informare maggiori informazioni affinché l’utente accetti la CTA. Ad esempio, in una landing page in cui promuovi il tuo prodotto, al punto 3 devi aggiungere delle informazioni che lo convincono all’acquisto.
- Il tuo obiettivo è che la scansione si concluda al punto 4 nella parte bassa a destra. È qui che inserirai la tua CTA per cui hai preparato il tuo utente lungo il percorso a Z.
Il pattern F: facilità la scansione del testo
Il pattern F è ideale per pagine ricche di testo e descrive la modalità di lettura degli utenti. In questo caso, F descrive la struttura della scansione, ma anche la modalità. F dall’inglese, fast, sta per veloce. Sì, perché gli utenti Internet “leggono” i contenuti con estrema velocità. Questo layout è stato studiato per la prima volta dal Nielsen Norman Group nel 2006 attraverso uno studio di eyetracking con 232 partecipanti a cui è stato chiedo di guardare migliaia di pagine web. I risultati hanno mostrato come il comportamento di lettura fosse essenzialmente simile per diversi compiti e pagine web. Da questo studio nasce il pattern di lettura F che si basa su queste tre assunzioni:
- Gli utenti leggono con un movimento orizzontale, di solito nella parte superiore del contenuto. Questo primo passo rappresenta la linea alta della lettera F.
- Lo sguardo scende dunque in passo e lo sguardo crea un’altra linea orizzontale, generalmente più breve della precedente.
- A questo punto, l’utente scansione il lato sinistro del contenuto verticalmente.
Naturalmente, non si tratta di uno schema fisso. Sono stati riscontrate modalità di scansione più simili a una lettera E o a una L capovolta. Lo studio condotto dal NNG con l’eyetracking dimostra come gli utenti (con sistemi di scrittura da sinistra a destra) in genere fanno una scansione in blocchi di contenuto. In studi più recenti sulle modalità di lettura online, il gruppo di ricerca ha registrato nuovi “pattern”, dati dall’evoluzione responsive del web design e dei contenuti Internet. Non è comunque cambiato è il fatto che gli utenti non leggono in modo lineare ma scansionano il contenuto.
Per quale progetto utilizzare il pattern Z?
Utilizza il pattern F per incentivare la scansione, non la lettura. Il pattern F è ideale per creare un design che crei una gerarchia visiva utile per accompagnare l’utente nella scansione della pagina web. Questo layout viene utilizzato per pagine web con ampi contenuti testuali. È quindi ideale per blog o siti di notizie.
Come utilizzare il pattern F
Puoi sfruttare il layout F per avere un maggior controllo sulle informazioni a cui desideri dare maggiore priorità. Quando hai stabilito quale debba essere l’ordine che i visitatori devono seguire per usufruire delle informazioni, poi posizionare il contenuto rispettivamente incentivando la loro naturale modalità di scansione. Ecco quindi qualche consiglio su come utilizzare il pattern F al meglio:
- I primi due paragrafi del contenuto avranno quindi un ruolo centrale. In generale, si dice che sono le prime righe a catturare l’attenzione dell’utente e convincerlo a proseguire la lettura. Ecco perché si rivela essenziale posizione il messaggio del contenuto nella parte superiore della pagina.
- Cerca utilizzare una parola chiave e spiegare un singolo concetto per paragrafo. Un consiglio è quello dunque di inserire le parole chiave fondamentali all’inizio dei due paragrafi della lettera F.
- Per catturare l’attenzione può essere opportuno inserire del peso visivo nell’area o nell’elemento a cui si desidera dare risalto. Basterà evidenziare le parole o utilizzare colori diversi.
- Gli elenchi puntati semplificano la scansione e sono dunque un elemento perfetto per un’ottima UX.
- L’attenzione è più alta ai lati della pagina. Fai in modo che il centro del tuo contenuto, come ad esempio la CTA, sia in questa posizione.
- Il blocco testuale può risultare altamente monotono è interrompere la labile volontà dell’utente a proseguire la scansione. Utilizza dunque elementi come le immagini per creare una pausa al blocco del contenuto.
Pattern Z e pattern F: conclusioni
Se così tanti siti web si affidano a questi due pattern è perché questo offrono molti vantaggi. Con questi layout può strutturare le informazioni in modo che all’occhio umano la scansione risulti il più naturale possibile. Bisogna però fare attenzione, affinché le informazioni siano presentare a seconda del grado di importanza e permettano all’utente di arrivare alla CTA con tutte le informazioni necessarie. Questi modelli basati anche su studi scientifici con tecnologia di eyetracking a posizionare al meglio gli elementi e le informazioni che vuoi che il tuo utente legga.
Come crea un sito aziendale di successo?
