Perché i caratteri sono importanti: approfondimenti su UX e tipografia
Quando gli utenti arrivano sul tuo sito web, di solito arrivano con un obiettivo in mente. Questo obiettivo è raramente quello di individuare il meraviglioso design del tuo sito e goderne le funzionalità avanzate.
Gli utenti vengono più frequentemente per avere informazioni, che siano quelle su alcuni aspetti della vita in generale o su un prodotto che offri. Qui, la tipografia entra in gioco perché ha lo scopo di garantire la migliore percezione possibile delle informazioni sul tuo sito web. Oggi è il momento di approfondire l’intricata connessione tra UX e tipografia e tracciare l’impatto delle tue scelte di carattere sull’esperienza complessiva di navigazione del sito web.
Perché la tipografia conta così tanto per UX?
È stato riferito che oltre il 95% delle informazioni su Internet risiede sotto forma di testo (lingua scritta). Queste informazioni sono pensate per essere assorbite dalle persone e cercano di fare del loro meglio per elaborare quante più informazioni possibili. Qui la tipografia funziona come un amico di supporto che aiuta le persone a ottenere il massimo dal tempo e dallo sforzo di navigazione.
Una buona tipografia è spesso difficile da notare. Semplifica il processo di lettura e non ci presti attenzione. D’altra parte, cattive scelte tipografiche possono rovinare l’esperienza di navigazione e ridurre al minimo il tasso di percezione della lettura. Poiché a nessuno piace perdere tempo, la tipografia diventa una delle leve UX intrinseche che ha un forte impatto sull’esperienza complessiva dell’utente su un determinato sito web.
Modificando la tipografia del tuo sito web, migliori:
- leggibilità del testo;
- accessibilità dei contenuti;
- usabilità del sito web;
- e l’equilibrio grafico complessivo.
Qui stiamo discutendo solo del collegamento UX e tipografico, senza menzionare il ruolo della tipografia nella formazione della personalità visiva del sito Web, nella definizione del tuo marchio e nell’attirare l’attenzione del lettore. Dai un’occhiata a questo articolo per saperne di più.
La scelta della tipografia per questo sito Web della chiesa non solo aumenta l’esperienza utente sul sito Web, ma aiuta anche a plasmare l’identità visiva del marchio).
Come potenziare l’esperienza utente sul tuo sito Web ottimizzando la tipografia?
Esistono diversi modi per migliorare la UX sul tuo sito Web ottimizzando la tipografia. Poiché UX e tipografia sono strettamente collegate, ottimizzando la tipografia, ottimizzi anche la leggibilità del tuo testo e, quindi, aggiungi alla UX complessiva sul tuo sito web. Vediamo quali sono le regole per ottimizzare la tipografia:
1: ridurre al minimo il numero di caratteri utilizzati
Se vuoi che il tuo sito web appaia coerente e professionale, usa fino a tre caratteri (non di più). Caratteri diversi su un sito Web si scontrano e distraggono l’utente dalla lettura del testo. L’utilizzo di diversi caratteri dall’aspetto simile ti aiuta a creare coerenza di UX in tutte le pagine del tuo sito Web e libera gli utenti dall’adozione di frequenti cambiamenti di stile.
Questo è esattamente ciò che dovresti evitare sul tuo sito web.
Spesso è sufficiente l’utilizzo di un solo font. Se ritieni ancora di aver bisogno di un paio di caratteri, scegli i caratteri che hanno la stessa larghezza di carattere. In questo caso, i caratteri non differiranno troppo l’uno dall’altro e distrarranno il lettore.
Questo sito Web di rimodellamento utilizza il carattere non convenzionale Six Caps per aumentare l’identità visiva del sito Web. Questo tipo di carattere è combinato con Roboto Condensed per avere due tipi di carattere, le cui larghezze dei caratteri corrispondono.
Un’altra grande idea sulla combinazione di un paio di caratteri è quella di unire i caratteri che imitano la scrittura a mano con quelli normali. La tipografia scritta a mano aggiunge un tocco personale al design generale del tuo sito web e sviluppa il carattere visivo del tuo sito web.
Questo sito Web ha un aspetto morbido e femminile con il carattere Caveat Handwriting.
2: Scegli i caratteri Sans Serif per migliorare la leggibilità
I serif sono le piccole linee all’estremità dei tratti delle lettere. Nella tipografia stampata, i serif aiutano le persone a riconoscere le lettere stampate in modo più rapido ed efficiente. Tuttavia, sullo schermo, soprattutto su uno non Retina, i serif non sono così ben delineati come sulla carta, il che compromette parzialmente la lettura.
Oltre a garantire una migliore leggibilità, i caratteri sans serif parlano in modo più audace e minimale.
Qui, non sto sostenendo che dovresti abbandonare completamente i caratteri serif. Un consiglio migliore sarebbe quello di essere più cauti con loro e usare quelli che sono puliti e precisi.
Ad esempio, questo sito Web di fotografia creativa utilizza il carattere Open Sans sans serif che aiuta il sito Web a fare una dichiarazione audace, elegante e decisa.
3: Dimensione carattere decente
Lo spazio su Internet è illimitato. Ecco perché non è necessario salvarlo e utilizzare caratteri di piccole dimensioni che impongono un ulteriore affaticamento degli occhi agli utenti. I lettori con problemi di vista possono avere difficoltà a leggere testi piccoli, mentre anche i lettori con una buona vista provano affaticamento e devono fare delle pause per arrivare alla fine, diciamo, di un testo da 10 pt.
Se non vuoi che i tuoi utenti abbiano difficoltà a leggere il testo che presenti o ad ingrandirlo, scegli una dimensione dei caratteri di 16pt +. Tali dimensioni dei caratteri riducono al minimo l’affaticamento degli occhi e aiutano gli utenti a raggiungere il loro obiettivo sul tuo sito Web senza affaticamento visivo.
Il sito Web di Malcolmy utilizza una tipografia leggibile a 16 pt per la sua home page e le pagine del blog.
4: Osservare la lunghezza ottimale della linea
Sul tuo sito web, non dovresti riempire tutto lo spazio disponibile con il tuo testo. Prestando attenzione a una lunghezza di riga ottimale, ti attieni a elevati standard di esperienza di lettura. Se le righe sono troppo corte, gli occhi del lettore devono andare avanti e indietro durante la lettura del testo, il che impone un ulteriore affaticamento visivo. Se le righe sono troppo lunghe, è troppo difficile concentrarsi sulla parola esatta che stai leggendo e troppo facile perdersi.
Per evitare entrambe le situazioni avverse, attenersi a 60 caratteri per riga (per schermi di tablet/PC).
Questa immagine mostra che i testi con righe troppo corte o troppo lunghe sono più difficili da leggere rispetto ai testi che si attengono alla lunghezza della riga "centrale dorata" di ~ 60pt.
La lunghezza ottimale della linea per i dispositivi mobili (ad es. smartphone) è inferiore. Affinché il testo sia leggibile su schermi piccoli, la riga dovrebbe includere circa 30-40 caratteri.
5: scegli caratteri tipografici che funzionino bene in diverse dimensioni
Come sai, la dimensione delle lettere per le intestazioni è solitamente più grande di quella per il corpo del testo. Le intestazioni differiscono anche per le dimensioni, dalla più piccola alla più grande. Sul tuo sito web, dovrai scegliere dimensioni dei caratteri diverse per vari elementi (ad es. pulsanti, didascalie, elementi di navigazione, ecc.), nonché pesi dei caratteri diversi per dare enfasi.
Per garantire la distinguibilità degli elementi del tuo sito web, scegli un font disponibile in varie dimensioni e pesi. Se scegli uno dei caratteri standard, ad esempio il carattere tipografico Roboto di Google Fonts, vedrai tutte le varianti che ha. Alcuni font sono disponibili in più di 10 varianti, altri ne hanno solo un paio. Scegli un font che abbia un ricco set di varianti per garantire una rappresentazione diversificata dei contenuti sul tuo sito.
Diversi stili di carattere del carattere Roboto Google.
6: Fai scelte di colore intelligenti
I tempi dei siti web multicolori e urlanti sono passati. Ora, la leggibilità e il contrasto sono le forze dominanti che determinano le scelte cromatiche. Prima di tutto, i tuoi contenuti dovrebbero essere leggibili e la combinazione che per molti anni è stata considerata la migliore è il testo nero su sfondo bianco. Questa combinazione garantisce il massimo contrasto e risale ai tempi della tipografia classica.
Tuttavia, di recente, si è spesso sostenuto che il colore nero impone più affaticamento degli occhi rispetto a quello grigio scuro. Anche le sfumature di grigio scuro contrastano bene con lo sfondo bianco, ma sono un po’ meno dense e offrono un’esperienza di lettura più confortevole.
Queste sono le sfumature di grigio che superano il nero nel garantire un’esperienza di lettura confortevole.
Una pagina del sito web che utilizza il grigio scuro come colore del testo del dispositivo di scorrimento.
Quando scegli il colore, assicurati di testarlo su dispositivi diversi e in ambienti diversi. Il testo che è bello leggere in un tipico ambiente d’ufficio può essere difficile da distinguere su uno smartphone, soprattutto quando viene utilizzato all’aperto. È difficile tenere conto di tutti i fattori, ma il tuo obiettivo dovrebbe essere quello di tenere conto della maggior parte degli ambienti e offrire a diversi gruppi di utenti un’esperienza di navigazione confortevole.
7: Non sperimentare con l’altezza della linea
Ridurre al minimo l’altezza della riga per inserire più contenuti non è una buona pratica. Se le righe sono troppo vicine l’una all’altra, è più probabile che un lettore salti alla riga precedente o successiva e si blocchi. Lo spazio tra le righe (interlinea) deve essere maggiore del 30% rispetto all’altezza dei caratteri utilizzati. Tale guida garantisce la migliore leggibilità del contenuto e la sua chiara percezione visiva.
Quando l’altezza della riga diventa inferiore a 1,3 caratteri, il testo diventa difficile da leggere.
8: Lascia che siano i tuoi utenti a decidere
Quando attingi a UX e tipografia, è importante tenere a mente il tuo pubblico di destinazione e le sue esigenze. Scopri che tipo di lettori sono gli ospiti del tuo sito e quali sono le situazioni tipiche in cui scoprono i contenuti del tuo sito web. Ad esempio, se ti rivolgi ai giovani, presta maggiore attenzione alla UX mobile e regola la tipografia di conseguenza.
Esegui test A/B per le tue scelte tipografiche e vedi quale diminuisce la frequenza di rimbalzo e porta più conversioni. Preparati a regolare costantemente la tua tipografia per continuare a migliorare te stesso e rendere possibile l’esperienza dell’utente.
Per ulteriori informazioni sui test A/B, consulta questo articolo.
Conclusioni
Scavare nel collegamento tra UX e tipografia può portare a molteplici preziosi miglioramenti dell’esperienza utente sul tuo sito web. Se scegli le modifiche relative alla tipografia elencate sopra, sei destinato a ottenere un sito Web leggibile, la cui navigazione è un vero piacere. Ti auguro buona fortuna in questa impresa!
Mi sono perso qualcosa? Per favore fatemelo sapere nella sezione Commenti qui sotto. Anche le vostre domande relative all’argomento sono ben accette.
Rimani sintonizzato!