SCRIVERE IN MODO CHIARO PUÒ AIUTARE MOLTO I VISITATORI DEL TUO SITO E RIDURRE IL BOUNCE RATE.
Grazie alla diffusione dei webfonts e dei siti che rendono semplice la loro integrazione nei siti web (ad esempio i webfonts di Google, Fontsquirrel o Typekit), la tipografia sta progressivamente diventando un elemento di primo piano anche nel web.
I tempi in cui i caratteri tra cui si poteva scegliere spaziavano da un Verdana ad un Georgia sono giunti al termine e scrivere correttamente gli articoli del proprio sito (nella forma, non solo nel contenuto)sarà un elemento fondamentale per la comunicazione efficace ed il successo di qualsiasi sito web.
Ecco qualche consiglio utile!
L'importanza della leggibilità di un testo sul web
Per molto tempo la tipografia è stata intesa dai designer stessi come un semplice problema di tipo estetico: un testo doveva essere, prima di tutto, bello da vedere.
Caratteri elaborati, di impatto, per stupire il lettore.
Il problema sorge quando dopo un primo momento di meraviglia ci si accinge a leggere il testo, specialmente in un’epoca come questa dove i supporti tecnologici sono numerosi e tutti diversi fra loro, anche per quanto riguarda risoluzione e resa grafica.
Per quanto possa essere piacevole trovarsi di fronte a un testo esteticamente curato, il principale motivo per cui si effettuano ricerche e si deve leggere un testo è quello di avere informazioni: questo deve avvenire nel modo più semplice ed immediato possibile, pertanto le esigenze di funzionalità si trovano a superare quelle estetiche.
CONTENUTO, CONTESTO E UTENTE
Quando ci si appresta a redigere un testo per il sito web è fondamentale conciliare tre variabili fondamentali: il contenuto che si deve elaborare, il contesto in cui verrà inserito e, cosa più importante, l‘utente che dovrà usufruirne.
Tipografia web, perchè prestare attenzione ai contenuti
Il contenuto di un sito web deve essere analizzato per quanto riguarda comprensibilità, tempi di lettura e scopo. E’ da questi elementi che si deve partire per impostare un progetto tipografico.
L’impostazione grafica di un testo efficace…
- deve rispettarne il “tono” dei contenuti trattati
- deve rispettare i tempi di lettura dell’utente
- dovrebbe contenere punti elenco (come questo) per facilitare la lettura del contenuto
- dovrebbe essere integrata con note esplicative (magari collegate con anchor link alla fine dell’articolo) in grado di rendere comprensibile il testo anche a chi ha un limitato grado di conoscenza dell’argomento.
Tipografia web, perchè prestare attenzione al contesto
Per quanto riguarda il contesto, anch’esso riveste notevole importanza: se è vero che un contenuto può essere letto facilmente su ogni tipo di dispositivo siamo sicuri che ciò sia necessario? Un visitatore che arriva su FuturaImmagine attraverso uno smartphone davvero dovrebbe trovarsi davanti tutte le informazioni che si presentano ad un utente desktop comodamente seduto sulla propria scrivania?
NO! Pensateci bene, perchè è fondamentale questo punto. Se un hotel viene raggiunto da mobile la prima e unica cosa importante è il contatto telefonico e l’indirizzo… ogni informazione aggiuntiva è da considerarsi un extra perchè il nostro utente probabilmente è già in viaggio e ha bisogno di mettersi in contatto con la struttura per prenotare (o magari ha perso l’indirizzo).
QUANTO PIÙ SAREMO BRAVI A SOTTRARRE INFORMAZIONI NON FONDAMENTALI DA UN SITO MOBILE TANTO PIÙ SARÀ POSSIBILE RENDERE COINVOLGENTE L’ESPERIENZA DI UN UTENTE.
Tipografia web, perchè prestare attenzione all'utente
L’ultimo aspetto a cui prestare attenzione è il più importante: l’utente.
Qualsiasi contenuto deve essere adattato ad essere letto da chiunque, indipendentemente dal suo livello di preparazione. Come suggerivamo nel punto elenco qualche riga più in alto aggiungere note in calce potrebbe migliorare la possibilità che l’articolo sia compreso ma c’e’ un’altra cosa importante che potete fare:
Aggiungete i commenti di Google Plus!
Sono disponibili plugin ed estensioni per i maggiori cms (Wordpress, Joomla, Drupal) e la loro implementazione è abbastanza semplice. Tuttavia l’implementazione di questo tipo di plugin non deve essere un problema vostro, la cosa importante è che sappiate cosa dovete fare e siate convinti della strada da intraprendere… un modo o un tecnico poi si trovano in fretta.
Aggiungere i commenti di Google Plus nel sito è un contributo molto importante per la discussione. Il contenuto, grazie ai commenti, può essere condiviso sui profili e accendere discussioni utili sia ai vostri utenti (che hanno così la possibilità di chiedervi maggiori informazioni) che a voi. Misurarsi con domande e opinioni discordanti dalla propria è un valido test e una occasione di crescita importante.
Ma torniamo ai nostri contenuti e a quello che probabilmente vi aspettavate di leggere quando siete entrati in questo articolo 🙂
Scrivere in modo efficace
nel il proprio sito web
Quando si legge un testo nel web il nostro occhio percepisce le lettere in modo differente da quanto avviene su un libro o su una pagina stampata.
E’ quindi buona norma…
- Prediligere per il corpo del testo caratteri Sans serif, come ad esempio Arial o Helvetica, rispetto a caratteri Serif, come ad esempio Georgia o Times New Roman. Non è una questione di gusto. I serif servono per accompagnare l’occhio durante la lettura e seguire la riga ma su monitor (specie a bassa definizione) le grazie tendono ad impastarsi rendendo la lettura più difficoltosa.
- Evitare il giustificato. Se pensavate che un testo giustificato sia per l’utente più ordinato avete ragione ma è altrattanto vero che la differenza di lunghezza tra le righe aiuta il lettore a seguire meglio la lettura.
- Evitare il centrato. Specialmente se il testo è suddiviso in più righe è molto molto molto più faticoso da leggere rispetto ad un normale bandierato a sinistra.
- Evitare paragrafi lunghi più di due o tre righe: l’effetto mappazzone è letale.
- Utilizzate punti elenco e sottotitoli per spezzare il testo (questi ultimi se ben utilizzati sono anche utili dal lato SEO, che non fa mai male).
- Scegliete una interlinea e un corpo per il body aiuta la lettura. Io in questo articolo sto utilizzando una interlinea a 2 e un corpo 16.
- Evitare di pasticciare con l’editor. Nel vostro sito potete utilizzare con moderazione:
– Headings per dividere i paragrafi
– grassetto per rafforzare un concetto
– italico per evidenziare qualche parola chiave
– UN COLORE per marcare meglio tratti del discorso
…Ogni cosa in più è di troppo!
Un carattere tipografico deve essere piacevole da vedersi ma soprattutto funzionale,
adatto possibilmente a quanti più dispositivi possibili (anche a bassa risoluzione quindi!) e sempre coerente al contesto in cui è inserito e agli utenti a cui il contenuto è destinato.
Tipografia Web – La regola del 3 vale anche qui!
Per il vostro sito web, come in ogni creazione grafica, la regola sul carattere è sempre MASSIMO 3:
- UN font per il Menu
- UN font per gli Headings
- UN font per il body
Se siete Bravi e utilizzate caratteri adatti potete anche scegliere di utilizzare lo stesso carattere per il menu e gli headings e di tenervi un bonus da utilizzare con un carattere decorativo. Ad esempio nel progetto Mobili a Colori ho utilizzato un corsivo per rendere più forte la comunicazione del sito ma sono sempre rimasto nel limite dei 3 caratteri.
Webfonts, ancora un paio di cose da dire
Se scegliete di utilizzare webfonts nel vostro sito web sicuramente potrete conferire al sito un layout più chiaro, professionale e caratterizzante. L’unico limite a cui andate incontro (insieme alla regola del 3 di cui abbiamo parlato sopra) è il peso della pagina.
Questi font non sono infatti presenti nei dispositivi che visualizzano il sito e devono essere quindi inclusi nella pagina che, in questo modo, pesa di più. Con l’aumento delle visualizzazioni da parte di dispositivi mobili è molto importante mantenere un caricamento veloce delle pagine del sito web… quindi non esagerate e selezionate solo gli stili che pensate di utilizzare veramente.
Molti fonts sono disponibili ad esempio con diversi pesi (intesi come grandezza del corpo) ma è raro utilizzare un grassetto su una voce di menu o su un heading… quindi cercate di ridurre al minimo i set inclusi nelle vostre pagine.
Come utilizzare un webfonts
Per utilizzare un webfont nel vostro sito web potete visitare i seguenti siti web di riferimento:
Google Fonts è gratuito, Typekit è a pagamento (ma è più semplice da utilizzare) mentre FontSquirrel non l’ho mai provato (ma così a prima vista mi sembra gratuito).
Se volete orientarvi meglio nella ricerca dei fonts e sapere qualcosa in più sul meraviglioso mondo dei caratteri potete dare un’occhiata all’immagine qui sotto che spiega tutti gli elementi che compongono una lettera.
