Usabilità dei testi per il web

Usabilità dei testi per il web Telecom Italia - confidenziale

Principi generali

Il lettore del web

Usability dei testi

Agenda

1) Principi generali

Il ruolo chiave dei contenuti

Nuovi lettori, nuovi autori

Scrivere sul web: nuove caratteristiche

Agenda

Principi Generali - Web: nuove caratteristiche dei fruitori del testo -

Fruizione individuale piuttosto che collettiva

(sul web le persone sono per lo più da sole)

Fruizione guidata da scopi

(sul web le persone cercano qualcosa, non vanno “a caso”)

Fruizione attiva piuttosto che passiva (sul web le persone “fanno”, non contemplano)

Fruizione bidirezionale invece che unidirezionale

(sul web le persone interagiscono e partecipano)

Fruizione selettiva piuttosto che omogenea (sul web le persone selezionano nella gamma delle informazioni)

Principi Generali - Testo scritto e testo digitale - Il supporto è in primo piano Il supporto va sullo sfondo Manipolabile Non manipolabile Non localizzato Localizzato Instabile Stabile Spaziale-pittorico Temporale Legato anche alla grafica Legato solo alla parola Ipertestuale e polivalente Lineare e unico Breve e poco gerarchizzato Lungo e gerarchizzato al suo interno In parte in mano al lettore Totalmente in mano all’autore Totalmente archiviabile Relativamente archiviabile Testo digitale Testo scritto

Principi Generali - Progettare testi, progettare interfacce - Interfaccia Testo “ trasparente” Etichette dei Menù Link Strilli cliccabili Pagine indice Articoli Schede tecniche Titoli e sottotitoli Il testo sul web è anche un’interfaccia di azione Diversi tipi di testo si dispongono in modo diverso nell’asse interfaccia/trasparenza Istruzioni per l’interazione

l’autore on line Da scrittore di testi a “ sceneggiatore” di ipertesti Da veicolo di informazione ad “attivatore” di dinamiche Da “creatore solitario” a membro di una community Principi Generali - L’autore online -

Principi Generali - Un precursore: Michail Bachtin - L’opera, come la replica del dialogo, è orientata verso la risposta dell’altro […] L’opera è un anello nella catena della comunicazione verbale; come la replica di un dialogo, essa è legata ad altra opere-enunciazioni: a quelle a cui essa risponde e a quelle che ad essa rispondono Il problema dei generi del discorso (1978)

Attenzione > Interesse Strilli formattazione Stile Contenuti Ipertesti Approfondimenti Divagazioni Link Feed-back Script E-collaboration Community > coinvolgimento > Interazione Principi Generali - I compiti dello scrittore online -

Principi Generali - Il continuum tra presentazione e partecipazione - Presentazione Partecipazione Web aziendali Siti istituzionali E-commerce Informazione online Intranet Wiki Blog Applicazioni 2.0 Diversi tipi di sito presentano diversi gradi di partecipazione Un certo grado di partecipazione del lettore è comunque richiesta sempre

1 - Contesto di lettura sul web e vincoli del mezzo 2 - Aspetti di Usability 4 - Aspetti di strutturazione 5 - Aspetti di stile 3 - Aspetti di formattazione Principi Generali - Il testo sul web è una cipolla -

Testo “ Paratesto” Testo “ Paratesto” Carta Web Principi Generali - L’inversione del rapporto testo/paratesto -

2) Il lettore del web

Mappe e discontinuità

Finalizzazione e interazione

Testo e contesto

Elementi di ancoraggio

Agenda

La pagina è una mappa Le informazioni sono viste come in un paesaggio visto dall’alto In questo paesaggio troviamo punti di riferimento : titoli, sottotitoli, Immagini, colori, link, grassetti, testi Il lettore del web - Un lettore particolare -

Il lettore del web - Caratteristiche principali della lettura web - L’occhio è attratto dalle discontinuità (spazi, colori...). Si cerca di circoscrivere il contesto (argomento, autore, data, testata, lunghezza documento...) Si cercano i punti di ancoraggio (link, grassetti, foto...) La lettura è molto finalizzata . La lettura è un’azione

La lettura “classica”… … e la lettura web Il lettore web è un vero lettore? L’ 80% dei lettori “scorre” la pagina Il lettore del web - Discontinuità: la lettura “a salti” -

Il lettore del web - Finalizzazione - Lettura come effetto di una determinata ricerca Processo di attenta selezione del testo da leggere

Il lettore del web - Testo/Azione - La lettura “classica”… … e la lettura web Invio una mail - Clicco - Cambio pagina – Commento - Aggiungo al carrello … Leggo

Il lettore del web - Perché è importante il “contesto”? - Chiunque può produrre un testo web Il testo sul web non è stabile Il testo non ha confini definiti Il testo non ha fisicità , non si può maneggiare

Il lettore del web - Il contesto in ogni pagina: la “prova google” - Chi sono questi? In che parte sono del sito? Chi è l’autore? Che data ha l’articolo?

? Il lettore del web - L’importanza del contesto - Il contesto dovrebbe rispondere alle domande: Cosa (argomento) Chi (autore) Quando (data pagina) Dove (sito o società da cui vengono le info) Quanto (quanto è lunga l’informazione)

Il lettore del web - Il contesto vince sul testo - 1 2 3

Gli elementi di contesto (header, sezioni, data, autore) precedono il testo, poiché servono dargli un senso

Dobbiamo trovare almeno:

Titolo sito

Titolo pagina

Autore

Data

1 2 3 4 Gli elementi di paratesto (Titoli sottotitoli, indici di sezione ecc..) precedono la lettura del testo perché servono come elementi discriminanti Il lettore del web - Apparato paratestuale prima del testo -

1 2 3 4 Le immagini e i titoli sono il primo elemento a cui si presta attenzione, indipendentemente dalla loro collocazione nella pagina Le immagini con i visi in maniera ancora più accentuata Il lettore del web - Ancoraggi: alle immagini la priorità -

1 2 3 4 All’interno del testo alcuni elementi vengono percepiti prima di altri: Titoli Sottotitoli Grassettature Link Punti-elenco Rappresentano una specie di “bussola” per il lettore e aiutano a “spezzare” il testo in tanti sottotesti Il lettore del web - Altri elementi di ancoraggio -

Il lettore del web - I movimenti oculari sulle home - L’esame dei movimenti dell'occhio sulle home rivela un modello comune Gli occhi fissano più spesso il primo riquadro a sinistra , girando intorno a quella zona prima di andare da sinistra alla destra. Solo dopo la lettura attenta della parte superiore gli occhi esplorano ulteriormente la parte bassa della pagina

Il lettore del web - Fattori che orientano il comportamento - Questo schema può essere “ forzato ” introducendo varianti nella pagina e creando dei “ punti caldi ” in altre zone. I fattori che influenzano la lettura: Presenza o meno degli strilli Dimensione dei font Presenza e tipo di immagini Parole particolari e argomenti di grande interesse

Il lettore del web - Gli strilli guidano la lettura - Fonte: Poynter Institute - 2004 http://www.poynterextra.org/eyetrack2004/ viewing.htm Gli “ strilli ” di testo hanno un ruolo determinante nel guidare il percorso dell’occhio La visione va oltre il triangolo della rilevanza “canonico”

Il lettore del web - L’effetto della dimensione dei font - Leggibilità “ Scannabilità” Se volete spingere a leggere più a lungo la home, usate font piccoli (10) se volete aiutare un rapido scan delle cose essenziali usate font grandi (12-14). Fonte: Poynter Institute - 2004 http://www.poynterextra.org/eyetrack2004/ fontsize.htm

Il lettore del web - I titoli piccoli incoraggiano lo scrolling verso il basso - I titoli più piccoli incoraggiano un comportamento di lettura più focalizzato (leggere le parole), e più prolungato Con i font grandi le persone guardano solo quello che li cattura sul momento I titoli piccoli spingono di più ad uno scrolling verso il basso Fonte: Poynter Institute - 2004 http://www.poynterextra.org/eyetrack2004/ headlinesize.htm

Il lettore del web - L’importanza delle foto - Le foto in basso attirano l’occhio al di sotto del triangolo della rilevanza

Agenda

3) Usability dei testi

Formattazione dei testi

Usabilità degli elementi grafici

Usability dei testi - Il testo sul web: necessità di riadattarlo - Sul video la leggibilità si riduce del 25% rispetto alla carta stampata ( Video: 72 dpi - stampa: 300 -1200 dpi) Il testo sul web fa adeguatamente formattato per renderlo usabile e adeguarlo alle caratteristiche del mezzo. Non si può limitarsi a “riversare” in html il testo concepito su altri supporti (carta, slide, word..)

Usability dei testi - Elementi di contesto - NO SI

Ogni pagina contiene gli elementi di contesto necessari ad orientarsi

Logo

intestazione

Menù di profondità

Footer (data – autore, ecc)

home Sezione Articolo Header Path Footer

Usability dei testi - Una sola colonna colonna - NO SI Il testo è disposto su di una sola colonna, come un “ rotolo ” virtuale

Usability dei testi - Larghezza della colonna - Fonte: Webstyle guide - 2002 http://www.webstyleguide.com/ type / lines .html Max 450-500 pixel SI 800 pixel NO

Usability dei testi - Un testo troppo “largo” -

Usability dei testi - Lunghezza dei testi -

Limitate la lunghezza dei testi degli articoli fra 500 e 3.000 caratteri per un massimo di 2 max 3 schermate

Le ricerche di Nielsen confermano che la maggior parte degli utenti non supera le 2,5 schermate

Nel caso di testi più lunghi è necessario

Un indice iniziale cliccabile

Un editing ipertestuale

Usability dei testi - Un testo lungo non “trattato” - 42.000 caratteri Nessun indice Nessun editing ipertestuale E’ un testo per la stampa, non per la lettura su web

Usability dei testi - Indici iniziali e “up” per i testi lunghi - Nessuno strumento di navigazione interna Indice cliccabile dei paragrafi all’inizio Bottoni per tornare in alto SI NO

Usability dei testi - Impaginazione “a bandiera” - Fonte: Webstyle guide - 2002 http://www.webstyleguide.com/ type / align .html ok

Usability dei testi - Effetti imprevisti del giustificato -

L’iniziativa vuole massimizzare gli utili e ridurre le spese L’INIZIATIVA VUOLE MASSIMIZZARE GLI UTILI E RIDURRE LE SPESE L’iniziativa vuole massimizzare gli utili e ridurre le spese L’iniziativa vuole massimizzare gli utili e ridurre le spese L’iniziativa vuole massimizzare gli utili e ridurre le spese L’iniziativa vuole massimizzare gli utili e ridurre le spese Usability dei testi - Maiuscolo, corsivo, sottolineature - NO SI NO SI NO SI

SI E’ VERIFICATO SPERIMENTALMENTE CHE LA LEGGIBILITÁ DI UN TESTO SCRITTO ESCLUSIVAMENTE IN CARATTERI MAIUSCOLI È MINORE DI QUELLA DI UN TESTO SCRITTO IN CARATTERI MAIUSCOLI E MINUSCOLI Si è verificato sperimentalmente che la leggibilità di un testo scritto esclusivamente in caratteri maiuscoli è minore di quella di un testo scritto in caratteri maiuscoli e minuscoli Usability dei testi - I difetti del maiuscolo - Pattern riconoscibili Conservazione dell’informazione

L’uso delle minuscole associa ad ogni parola un “ pattern ” riconoscibile dato dalle ascendenti e dalle discendenti Usability dei testi - Il minuscolo crea un pattern più leggibile - Fonte: Webstyle guide - 2002 http://www.webstyleguide.com/type/case.html

Il corsivo si legge male su video perché enfatizza l’effetto “sega” Usability dei testi - Il corsivo aumenta l’effetto “sega” -

Fonte: Hill, Scharff - 1997 http://hubel.sfasu.edu/research/AHNCUR.html Indipendentemente dal tipo di font e dal colore, il corsivo aumenta i tempi medi di lettura La leggibilità è data del tempo medio utilizzato da un campione di soggetti per leggere determinati brani di testo (es.: ricerca della prima occorrenza di una fra più parole date nel testo) Usability dei testi - Corsivo: esperimenti sui tempi di lettura -

Usability dei testi - Due tipi di font - Carattere con “grazie” Carattere a “bastoni”

L’iniziativa vuole massimizzare gli utili e ridurre le spese attraverso una accurata politica di investimenti a medio e lungo termine (times new roman) L’iniziativa vuole massimizzare gli utili e ridurre le spese attraverso una accurata politica di investimenti a medio e lungo termine (arial) L’iniziativa vuole massimizzare gli utili e ridurre le spese attraverso una accurata politica di investimenti a medio e lungo termine (Garamond) L’iniziativa vuole massimizzare gli utili e ridurre le spese attraverso una accurata politica di investimenti a medio e lungo termine (verdana) Usability dei testi - I font migliori (e i peggiori) - NO SI

Usability dei testi - Il Times New Roman peggiora la leggibilità -

Times Fonte: Bernard et al, 2001 http://psychology.wichita.edu/surl/usabilitynews/3S/font.htm Verdana Arial Usability dei testi - Verifiche sperimentali: percezione degli utilizzatori - N.B. La percezione può non coincidere con i tempi di lettura

Usability dei testi - Rapporto testo-sfondo - NO SI NO

Usability dei testi - Rapporto testo-sfondo - Nero su bianco Bianco su nero Bianco su Azzurro Blu su bianco Grigio su nero Nero su giallo Fucsia su blu Rosso su verde SI NI NO Nero su grigio Verde su giallo

Fonte: Lauren Scharff 1997 http:// hubel.sfasu.edu / research / survreslts .html Usability dei testi - Rapporto testo-sfondo: indagini empiriche -

Usability dei testi - Usare pochi colori e dare loro un significato - Gli obiettivi dell’iniziativa L’iniziativa vuole massimizzare gli utili e ridurre le spese attraverso una accurata politica di investimenti a medio e lungo termine NO SI Gli obiettivi dell’iniziativa L’iniziativa vuole massimizzare gli utili e ridurre le spese attraverso una accurata politica di investimenti a medio e lungo termine

Usability dei testi - Colori usati in modo giusto e sbagliato - OK No!

caratteri di colori lontani sullo spettro vengono messi a fuoco su piani diversi Usability dei testi - Non affiancate colori lontani nello spettro -

Esempio di rosso su sfondo blu Non si riesce a mettere a fuoco

Usare il colore in modo coerente Usare il colore per associare contenuti simili Usare pochi colori contemporaneamente Usare colori diversi e “strani” solo per richiamare l’attenzione su elementi significativi Tenere conto le associazioni correnti (che variano da cultura a cultura) Usability dei testi - Come usare il colore -

Usability dei testi - Niente animazioni nel testo - NO SI