Come strutturare contenuti che si fanno leggere

Come legge un utente del web? 

L’80% degli utenti si limita a leggere il titolo di un articolo, ma anche chi intraprende la lettura del testo, si concentra tendenzialmente solo su una piccola percentuale di parole.

La gran parte di noi utilizzatori del web, infatti, adopera una modalità di lettura cosiddetta “scanning” o “lettura esplorativa” in cui lo sguardo effettua una scansione della pagina e viene catturato dagli elementi maggiormente appariscenti.

Secondo Nielsen(1), ben l’80% legge esattamente così e rileva e pone attenzione solamente al 20% delle parole.

Questo accade per 2 ragioni: 

1. possiamo entrare e uscire dai siti internet con un veloce clic del mouse e permetterci di agire impulsivamente: l’esplorazione è rapida e priva di rischi.

2. i contenuti del web sono illimitati, mentre le nostre risorse cognitive sono limitate: non possiamo dedicare attenzione e tempo a tutto, dobbiamo selezionare.

Esiste un termine coniato da Herbert Simon, scienziato sociale, che è: Satisficing (satisfy+suffice=essere sufficiente per soddisfare) che indica come ci si accontenti di un risultato minimo e sufficiente quando si effettua una ricerca online.

Quali parti della pagina vengono prese maggiormente in considerazione?

• La regola della F

Grazie a degli studi sul tracciamento del movimento oculare, si è osservato  che il lettore concentra l’attenzione sul testo di un sito disegnando un movimento a F con lo sguardo.

Le varie parti della pagina vengono viste in questo modo:

⮞  La parte alta della pagina cattura l’attenzione molto più della parte bassa.

⮞  La porzione di pagina che richiede di far scorrere la barra di lettura verso il basso, viene letta addirittura poco o nulla.

⮞  Il 70% del tempo viene dedicato al lato sinistro, contro il 30% dedicato al lato destro della pagina.

L’NNGroup ha pubblicato questi studi sul tracciamento del movimento oculare (per le culture che leggono da sinistra a destra) : le aree in rosso sono le più osservate, mentre le blu sono le meno viste. Le zone in grigio non vengono proprio considerate.

In conclusione, questo può darci ottime indicazioni su come disporre gli elementi del testo che vogliamo pubblicare online:

sarà opportuno posizionare ciò che vogliamo venga letto nelle aree “calde” rilevate dal tracciamento oculare.

• Lo schema a forma di Z

Quando la pagina web non è incentrata su un testo scritto (come un articolo) ma presenta invece una grafica contenente degli elementi chiave (come una home page di accesso), è stato evidenziato uno schema di lettura riconducibile ad una Z.

Come vanno utilizzate le linee della Z e i suoi 4 punti cardine?

Prendiamo ad esempio una home page molto popolare per osservare nella pratica questo pattern: Facebook.

• PUNTO 1   Da qui parte il viaggio dello sguardo ed è un’ottima posizione per il logo aziendale.
• PUNTO 2   Seguendo la forma della Z, l’attenzione di sposterà in alto a destra, dove possiamo mettere la “call to action” secondaria, ovvero il secondo bottone per importanza che vogliamo sia cliccato.
• PUNTO 3   Il terzo punto serve da tramite verso la call to action finale. Può contenere informazioni aggiuntive per aumentare l’interesse dell’utente. La parte centrale della pagina è solitamente dedicata anche a un’immagine che rafforza il concept del nostro prodotto.
• PUNTO 4   Lo sguardo arriva infine qui, dove più ci interessa. Qui va posizionata la call to action principale, il bottone “compra”, “iscriviti”, “inizia”.

Pertanto se la quantità di testo è minima e vogliamo attirare l’attenzione degli utenti su delle call to action, è consigliabile disporre gli elementi seguendo un’ipotetica lettera Z.

In breve: 

✐ Se dobbiamo pubblicare un contenuto scritto, utilizziamo la regola della F

✐ Se dobbiamo pubblicare un contenuto con poco testo e degli elementi chiave, utilizziamo la regola della Z

Come costruire la struttura interna del testo

Ecco alcuni suggerimenti che arrivano dagli studi di web usability e che possiamo sfruttare a nostro vantaggio:

• Il Layer-Cake Pattern - Lo schema a forma di torta a strati

Questo tipo di schema si applica partendo dal presupposto che il lettore web tende a scansionare la pagina soffermandosi sui titoli e sui sottotitoli, saltando il testo interno ai paragrafi: proprio come se la sua attenzione fosse a forma di una torta a strati.

Quindi, per non spaventare chi approccia il nostro testo, è importante suddividere i concetti in paragrafi con titoli, sottotitoli e qualche immagine.

Un testo unico e visivamente ampio dà l’idea di un muro da cui è difficile estrapolare i concetti e impedisce al lettore di analizzarlo a colpo d’occhio per riuscire ad orientarsi prima di affrontarlo.

• Spotted Pattern - lo schema a macchie

Questa tecnica serve ad agevolare la lettura di un testo e porre l'accento sui concetti più importanti.

L’occhio va alla ricerca degli elementi messi in evidenza, concentrandosi su dei punti e delle singole parole, seguendo uno schema “a macchie”.

Per facilitare la lettura e dare movimento al testo è perciò fondamentale inserire le sottolineature, il grassetto, il corsivo, dei link ed eventualmente parole di colore diverso.

• Allineamento dei titoli e uso degli spazi bianchi

Non è necessario che i titoli e i sottotitoli siano rientranti o giustificati (come nei libri) perché, utilizzando la suddivione in paragrafi, saranno quest’ultimi a delimitare i concetti.

Inoltre, mantenendo il testo sul lato sinistro, rispettiamo la “regola della F”.

E’ anche importante andare a capo al termine di una frase che esprime un concetto finito, per rendere più arioso il testo con degli spazi bianchi.

Prova ora ad applicare queste regole fondamentali per aumentare la leggibilità e le interazioni con i tuoi contenuti ..e lasciaci un commento se questo articolo ti è piaciuto!

(1) Jakob Nielsen, informatico, imprenditore, scrittore e consulente. Autore e inventore dei princìpi della web usability 

bibliografia: Daniele Fortis “Scrivere per il Web” Maggioli Editore ; dal sito web https://uxplanet.org gli articoli “Z-Shaped Pattern For Reading Web Content” e “F-Shaped Pattern for Reading Content” di Nick Babich ; dal sito web https://qabiria.com l’articolo “Tutto d’un fiato: cos’è la leggibilità e perché è importante per il tuo sito” ; dal sito web www.nngroup.com le immagini sugli studi e alcuni approfondimenti