Facilitare la lettura

Pubblicato il da

Questo articolo fa parte di un corso gratuito di design web ospitato su questo sito.

Leggere una pagina web non è facile, gli occhi si stancano molto più rapidamente della lettura su carta, se poi ci sono dei problemi di vista diventa quasi impossibile.

Parliamo di come fare l’editing di un testo in Internet considerando le esigenze dei navigatori, ma non dimentichiamo coloro che non navigano per problemi alla vista.

I caratteri – Per lo schermo, per la stampa e le dimensioni

Nonostante l’enorme varietà di font a disposizione, nelle macchine degli utenti sono installati solo alcuni tipi di carattere, quelli più comuni. Quando dovete scegliete il font di una pagina tenete presente che in Internet si legge più agevolmente se il testo è scritto con un carattere a bastone, cioè con un carattere lineare: le lettere sono più grandi, tonde e staccate e si distinguono bene le une dalle altre.

Per la pagina destinata alla stampa il tipo di font più adatto è invece quello a grazie come ad esempio Times New Roman, dove le lettere sono generalmente più piccole, ma le linee sono più curve e armoniose.

Due font, uno per il testo e uno per il titolo, aiutano il visitatore a distinguere immediatamente le diverse parti della pagina, attenzione però a non usare diversi caratteri all’interno del testo: non è soltanto brutto da vedere ma obbliga il visitatore ad abituarsi improvvisamente ad un altro carattere e rallenta la lettura.

In generale consigliamo non più di tre tipi di carattere per pagina: uno per il testo, uno per il titolo e sottotitolo ed eventualmente uno per le didascalie, l’ordine della pagina stimola la lettura. L’editing scelto deve essere coerente in tutto il sito.

Dimensione dei font

La dimensione dovrebbe essere stabilita in percentuale per dare la possibilità d’ingrandire il testo con le opzioni dei browser e permettere a tutti di leggere.

Risalto – Colore e grassetto per evidenziare

In Internet la prima lettura si fa scansionando lo schermo. Inevitabilmente l’occhio cade sulle frasi o sulle parole evidenziate. Per dare rilievo ad una frase o ad una parola chiave consigliamo di usare il grassetto.

Attenzione a non usare la sottolineatura poiché si confonde con i link, lo stesso vale per l’aggiunta di colore; una parola o una frase colorata possono essere lette come link, se così non è l’utente è deluso di non poter avere ulteriori informazioni.

Il colore può essere usato per evidenziare parti di un testo. Una frase o un titolo possono essere riquadrati, staccati dal testo ed evidenziati con uno sfondo colorato, questa è stata la scelta di Fucinaweb.com per mettere in rilievo i diversi articoli di ogni sezione.

Sconsigliamo il MAIUSCOLO che uniforma le lettere in una massa compatta e poco distinguibile per l’occhio ed è sinomimo di “URLARE”.

Alcuni buoni consigli per facilitare la lettura – Allineamento, larghezza delle righe, spazi bianchi

  • Allineamento a sinistra (a bandiera) aiuta ad ancorare l’occhio in un lato e accorcia la lunghezza delle righe
  • Righe brevi, massimo 50 caratteri, la lettura rallenta se si deve cercare l’inizio della riga successiva
  • Organizzare il testo secondo dei contrasti visivi in modo da aiutare la comprensione immediata del testo: gli spazi bianchi aiutano ad organizzare la pagina e gli elenchi puntati o numerati permettono la scansione dei contenuti.
  • Gli spazi bianchi sono consigliati:
    • per facilitare la lettura allo schermo
    • per permettere la scansione della pagina
    • per distinguere i paragrafi
    • per metter in evidenza una frase staccandola visivamente dal testo
  • L’interlinea consigliato per la leggibilità è di 2 punti in più del carattere (es. carattere 10, interlinea 14)
  • I rientri sono utili per far capire l’inizio di un nuovo paragrafo o per mettere in evidenza una frase. Modificando la larghezza delle righe di una frase si comunica una particolarità del testo

Solo testo non è accessibile

Pubblicato il da

Molti designer sono convinti che l’approccio migliore per rendere un sito accessibile sia la costruzione di una versione parallela, di solo testo.

In un articolo [nuova finestra] pubblicato da Usability InfoCentre, Mark Magennis nota come non sempre questo sia l’approccio corretto:

  • esistono delle patologie per le quali immagini e colori sono di aiuto invece che di impedimento
  • una versione arricchita aiuta anche chi ha problemi d’apprendimento
  • una versione solo testo corre il rischio di essere considerata dal disabile una versione per l’utente di serie B

Magennis sostiene che, a parte rari casi, non ci sono scusanti per includere le regole di accessibilità direttamente nella versione principale del sito. Rendere un sito accessibile significa infatti aggiungere, più che togliere, funzionalità.

Cos’è l’Information Architecture

Pubblicato il da

L’Information Architecture (IA) è

“l’arte e la scienza di organizzare e classificare le informazioni per migliorarne la ricerca e la navigazione”

Lo sostiene Louis Rosenfeld, autore dell’eccellente manuale “Information Architecture For The World Wide Web“, una pietra miliare adottata da moltissimi web designer.

Louis ha reso disponibile gratuitamente una presentazione tenuta presso la Michigan State University, dal titolo “Why Johnny Can’t Find” (Powerpoint – 2.93 MByte) con cui introduce il ruolo e l’evoluzione dell’Information Architecture nella realizzazione di un sito web.

Il documento è molto chiaro ed interessante anche privati dell’autore che illustri i 54 lucidi. Tra gli argomenti presentati:

  • i campi emergenti nella società dell’informazione e da dove nascono
  • le aree di intervento dell’IA (utenti, contenuti, contesto)
  • l’IA applicata a un sito universitario
  • alcuni suggerimenti nell’applicare l’IA

Le buone notizie non si fermano qui. Louis Rosenfeld insieme a Peter Morville sta terminando la stesura di “Information Architecture For The World Wide Web 2“, la cui uscita è prevista per Luglio 2002.