Pubblicato il
Come migliorare la leggibilità del testo e l’user experience del sito web
La leggibilità del testo è un aspetto fondamentale per migliorare l’esperienza dell’utente sul sito web, sull’e-commerce o su un articolo del blog. Lavoriamo tanto sui Core Web Vitals, sulla velocità di caricamento delle pagine internet e su altri aspetti sostanziali. Tutto molto importante, chiaro.
Ma spesso dimentichiamo proprio questo: la qualità del contenuto dipende anche dalla sua fruibilità. Risultato di un testo poco leggibile? Alta frequenza di rimbalzo, tempo di permanenza basso.
In sintesi: poche conversioni. sembra impossibile ma è proprio così, a volte la leggibilità del testo è un disastro per l’user experience e il proprietario del sito web ne paga le conseguenze economiche.
Quindi la leggibilità dei contenuti che scriviamo e arricchiamo con immagini, video e altri elementi multimediali deve essere al centro delle nostre attenzioni. In primo luogo nella fase di definizione dei vari wireframe che introducono la struttura del sito web. Poi, durante la realizzazione dei mockup e delle pagine web ufficiali. Ma quali sono i dettagli per ottimizzare la redability in chiave user experience?
Indice dei contenuti
Elimina i muri di testo dalle pagine web
Iniziamo con uno dei pilastri della buona leggibilità del testo online: devi dividere il contenuto in blocchi significativi. Questo è utile per eliminare quel fastidioso effetto noto come muro di testo. Ovvero un blocco di parole che impressiona l’utente, lo respinge, vieta psicologicamente qualsiasi tentativo di iniziare la lettura. Il punto di partenza è questa: ogni idea deve essere compresa in un blocco di testo.
Questo blocco è composto da una manciata di frasi. E ogni elemento concettuale in un paragrafo costituito da uno o più blocchi introdotti da un heading. Ovvero un titolo che rispetti la gerarchia delle pagine web. Queste regole per la buona leggibilità dei testi online aiutano a orientare il lettore.
Se vuoi migliorare il risultato puoi aggiungere delle ancore interne per realizzare un menu di navigazione. I benefici: crei una sintesi iniziale in modo da suggerire subito al lettore cosa offri.
Da leggere: come migliorare il caricamento dei font
Crea una struttura di contenuti piramidale
Come suggerisce Jakob Nielsen, il padre dell’usabilità, gli utenti online non leggono ma scannerizzano. Certo, tante riflessioni hanno ripreso e adeguato questo passaggio ma c’è una verità di fondo.
Dobbiamo conquistare subito l’attenzione del pubblico. In primo luogo permettendo alle pagine web di caricare subito i contenuti. Ma anche comunicando nell’above the fold quello che serve per:
- Far capire qual è il tema principale.
- Suggerire ai motori di ricerca il topic.
- Definire i vantaggi nel continuare la lettura.
Si possono utilizzare delle tecniche di persuasive copywriting – tipo la PAS che individua il problema, lo agita e lo risolve – per migliorare l’aspetto creativo dell’introduzione. Ma bisogna sempre puntare su una sintesi introduttiva. Può essere una buona idea comprendere un blocco fatto da titolo e sottotitolo.
Questa soluzione è importante e utile per dare subito tutte le informazioni come suggerisce la piramide rovesciata del giornalismo: dai ciò che serve al lettore per capire cosa tratti nel contenuto.
Aggiungi grassetto e liste puntate
Due dettagli semplici per migliorare la leggibilità del testo su internet (ma non solo). In primo luogo devi usare il grassetto solo dove serve, sulle parole necessarie all’utente per capire come puntare sguardo.
Inutile usare interi blocchi di testo in neretto, peggio ancora evitarlo del tutto. Devi dosare con cura questo elemento della formattazione, preferendo <strong> a <b> che ha significato semantico.
Inoltre è giusto sfruttare le liste puntate per elenchi non ordinati e numerate per quelle che definiscono una sequenza ben definita. Questo aiuta a migliorare sensibilmente la leggibilità del testo online.
Come scegliere il font del testo online
La Leggibilità del testo in chiave user experience passa automaticamente dal carattere utilizzato per presentare i tuoi testi. Primo punto: ragiona da mobile. E, soprattutto, attraverso le necessità del tuo pubblico ma anche del progetto editoriale che proponi. Qual è il font più leggibile su internet?
Di sicuro un sans-serif ordinario tipo un Arial o un Verdana. Magari un Helvetica. In ogni caso un font bastoni pulito e comprensibile senza grandi sforzi. Però i modelli con grazie funzionano comunque bene, l’importante è scegliere soluzioni non esasperate. E soprattutto che rispettino alcuni parametri:
- Leading: distanza tra le linee (interlinea).
- Kerning: spazio tra le lettere (crenatura).
- Tracking: lo spazio tra le caratteri del testo.
In questo ginepraio di elementi è giusto trovare un equilibrio. Troppo spazio bianco tra i termini affatica la lettura, e per risolvere il problema di solito basta impostare la formattazione a bandiera. Motivo?
Semplice, questa soluzione permette di eliminare il vuoto disordinato e non omogeneo tra le parole. Per la crenatura e l’interlinea è utile ragionare su specifiche tabelle anche se, in linea di massima, nei temi standard più utilizzati questi aspetti sono già definiti a monte. Quello che bisogna valutare con cura?
La dimensione del font deve essere comoda. Devi considerare che la lettura avverrà soprattutto da mobile e che le aree devono essere facili da leggere, cliccare, evidenziale. Allora, qual è la grandezza minima? Secondo health.gov è 16 pixel la misura adatta per un body che si faccia leggere da tutti.
Scelta e uso degli heading (titoli)
Altro aspetto fondamentale per migliorare la leggibilità del testo e dare un contributo decisivo all’usabilità, ma anche alla SEO, riguarda l’uso degli heading. Ovvero i titoli che aiutano l’utente a comprendere qual è il tema di una determinata sezione del contenuto. Questi elementi vanno dall’H1 – ovvero il titolo, l’headline principale della pagina web, unico contenuto con questo tag – all’H6.
Dividendo il testo con questi titoli e utilizzando una logica gerarchica puoi creare un’esperienza di lettura sicuramente vantaggiosa. Però devi rispettare alcune regole per la formattazione dei titoli.
In primo luogo gli heading non devono essere usati per dare un valore estetico al testo. Se ti serve un font più grande devi aumentare il carattere e non usare un H2 o un H3. Idem se lo vuoi in grassetto.
Poi devi usare questo testo per un titolo e non una frase o un paragrafo: 3 o 4 parole bastano. Assicurati inoltre che ci sia una gerarchia di grandezze del font che rispecchi quella dell’header. Questo significa che l’H1 ha una dimensione del font superiore rispetto all’H2 che è subordinato e così via.
Ovviamente devono essere più grandi del font utilizzato per il body copy. Inoltre, è corretto ipotizzare uno spazio superiore tra l’ultimo paragrafo e il titolo rispetto a quello che intercorre tra l’header e il blocco di testo successivo. Questo permette di far capire a quale perte del testo l’heading appartiene.
Leggibilità del testo e contrasto
Qual è la soluzione migliore per garantire la leggibilità del testo? Devi puntare su un contrasto elevato, in modo che ci sia una buona capacità di comprensione dei vari elementi. Di base, la soluzione è chiara: nero su bianco funziona sempre. Se vuoi operare sui dettagli, puoi utilizzare un font color canna di fucile (quindi grigio scuro) e uno sfondo bianco leggermente sporco. Che non affatica gli occhi.
La vera sfida: riuscire a scrivere sulle immagini rimanendo sempre leggibili. Un visual adeguato è perfetto per invogliare il pubblico ad acquistare – o comunque a portare l’utente verso la conversione – ma se non migliori la leggibilità del testo sul visual rischi di vanificare gli sforzi. Qualche consiglio?
- Usa come sfondo immagini con ampie zone vuote.
- Non scrivere su sezioni ricche di dettagli.
- Utilizza uno sfondo oscurato per creare contrasto.
- Se necessario, sfoca l’immagine per creare uno sfondo.
- Preferisci font grandi e con un peso consistente.
- Evita testo con un carattere piccolo e leggero.
Tutto ciò aiuta a migliorare la leggibilità del testo. Ultimo consiglio: punta sulla semplicità. Vale non solo per scegliere il contrasto tra sfondo e font: per rendere la scrittura più efficace devi togliere.
Fonti utilizzate e link di approfondimento
Mirko Ciesco
Web Performer
Raccolgo dati dai siti per portarli ad un livello superiore! 🚀
Sono esperto in web performance, ottimizzo la SEO tecnica e miglioro l’usabilità dei siti internet attraverso la web analytics. Creo strategie vincenti partendo dai problemi delle Startup e delle aziende. Infine tengo corsi personalizzati online e in tutta Italia con la mission di rendere il web un posto migliore.