Le slide di una mai lezione agli editor web degli uffici scolastici regionali (ex provveditorati) con qualche rifacimento finale di titoli e strilli

1. MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
Usabilità e scrittura
dei testi per il web
Giacomo Mason, Febbraio 2010
Usabilità e scrittura dei testi per il web 1/165 Giacomo Mason – Febbraio 2010
Telecom Italia - confidenziale

2. MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Agenda
1) Principi generali
2) Il lettore del web
3) Usability dei testi
4) Formattare i testi
5) Strutturare i testi
Usabilità e scrittura dei testi per il web 2/165 Giacomo Mason – Febbraio 2010

3. MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Agenda
1) Principi generali
Usabilità e scrittura dei testi per il web 3/165 Giacomo Mason – Febbraio 2010

4. Principi Generali
- Il testo sul web è una cipolla -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
1 - Contesto di lettura
sul web e vincoli del
mezzo
2 - Aspetti di
Usability
3 - Aspetti di
formattazione
4 - Aspetti di
strutturazione
5 - Aspetti di stile
Usabilità e scrittura dei testi per il web 4/165 Giacomo Mason – Febbraio 2010

5. Principi Generali
- Progettare testi, progettare interfacce -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
Il testo sul web è anche un’interfaccia di
azione
Diversi tipi di testo si dispongono in modo
diverso nell’asse interfaccia/trasparenza
Etichette dei
Menù
Link Strilli
cliccabili Istruzioni
per l’interazione Articoli
Pagine
Interfaccia indice Titoli e Schede
sottotitoli tecniche
Testo
“trasparente”
Usabilità e scrittura dei testi per il web 5/165 Giacomo Mason – Febbraio 2010

6. MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" 1: più interfaccia che testo
Usabilità e scrittura dei testi per il web 6/165 Giacomo Mason – Febbraio 2010

7. MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" 2: a metà tra testo e interfaccia
Usabilità e scrittura dei testi per il web 7/165 Giacomo Mason – Febbraio 2010

8. MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" 3: più testo che interfaccia
Usabilità e scrittura dei testi per il web 8/165 Giacomo Mason – Febbraio 2010

9. MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Differenti usi del testo
Leggere la pagina
Fare lo scanning per vedere se è quella giusta
Fare lo scanning per localizzare un contenuto specifico
Scegliere una voce da una lista
Interagire con lo spazio web
Usabilità e scrittura dei testi per il web 9/165 Giacomo Mason – Febbraio 2010

10. Principi Generali
- L’inversione del rapporto testo/paratesto -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
Carta Web
“Paratesto”
“Paratesto”
Testo
Testo
Tutto ciò che sta “accanto”, “di contorno” al
testo, al “suo servizio”
Es.: titoli, riassunti, tabelle, schemi, figure,
decorazioni, ecc.
Usabilità e scrittura dei testi per il web 10/165 Giacomo Mason – Febbraio 2010

11. Principi Generali
- La parola visuale: la grafica -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
Sul web non ci sono solo parole: la grafica è parte
integrante del processo di scrittura. Il testo, quindi,
convive con:
• i colori
• gli spazi
• le immagini
• gli elementi grafici paratestuali
Usabilità e scrittura dei testi per il web 11/165 Giacomo Mason – Febbraio 2010

12. Principi Generali
- La parola visuale: dal web alla carta -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
Fonte: Luisa Carrada
Il mestiere di scrivere, Apogeo 2008
Usabilità e scrittura dei testi per il web 12/165 Giacomo Mason – Febbraio 2010

13. MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
Da Roberto Polillo
http://www.slideshare.net/rpolillo/12progettare-il-testo
Usabilità e scrittura dei testi per il web 13/165 Giacomo Mason – Febbraio 2010

14. Principi Generali
- Parola visuale: pagine dense -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
La densità provoca confusione
La densità allunga i tempi
La densità annulla l’informazione
Usabilità e scrittura dei testi per il web 14/165 Giacomo Mason – Febbraio 2010

15. Principi Generali
- Parola visuale: pagine dense -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
Usabilità e scrittura dei testi per il web 15/165 Giacomo Mason – Febbraio 2010

16. Principi Generali
- Pagine “ariose” -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
Usabilità e scrittura dei testi per il web 16/165 Giacomo Mason – Febbraio 2010

17. Principi Generali
- La parola visuale: esempi a confronto -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
Usabilità e scrittura dei testi per il web 17/165 Giacomo Mason – Febbraio 2010

18. MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Agenda
2) Il lettore del web
Usabilità e scrittura dei testi per il web 18/165 Giacomo Mason – Febbraio 2010

19. Il lettore del web
- Un lettore particolare -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
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
Da Luisa Carrada: scrivere per internet – Lupetti 1999
Usabilità e scrittura dei testi per il web 19/165 Giacomo Mason – Febbraio 2010

20. Il lettore del web
- Caratteristiche principali della lettura web -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
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
Usabilità e scrittura dei testi per il web 20/165 Giacomo Mason – Febbraio 2010

21. Il lettore del web
- Discontinuità: la lettura “a salti” -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
La lettura “classica”… … e la lettura web
Il lettore web è un vero lettore? L’80% dei lettori “scorre” la pagina
Usabilità e scrittura dei testi per il web 21/165 Giacomo Mason – Febbraio 2010

22. Il lettore del web
- Il rapporto “Eyetrack” -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
Osservazione sperimentale
dei comportamenti degli utenti
attraverso l’analisi dei
movimenti oculari, dei tempi
di permanenza e dei clic sui
link
http://www.poynterextra.org/eyetrack2004/index.htm
Usabilità e scrittura dei testi per il web 22/165 Giacomo Mason – Febbraio 2010

23. MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
Eye tracking nella lettura di
un testo sul video:
http://it.youtube.com/watch
?v=bW_zDILeevY
Usabilità e scrittura dei testi per il web 23/165 Giacomo Mason – Febbraio 2010

24. MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
Usabilità e scrittura dei testi per il web 24/165 Giacomo Mason – Febbraio 2010

25. MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Modelli classici e nuovi
Fonte: web style guide – 2008
25/165 Giacomo Mason – Febbraio 2010
Usabilità e scrittura dei testi http://webstyleguide.com/wsg3/3-information-architecture/4-presenting-information.html
per il web

26. MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Modello a “F”
http://www.useit.com/alertbox/reading_pattern.html
Usabilità e scrittura dei testi per il web 26/165 Giacomo Mason – Febbraio 2010

27. MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
http://webstyleguide.com/wsg3/3-information-architecture/4-presenting-information.html
Usabilità e scrittura dei testi per il web 27/165 Giacomo Mason – Febbraio 2010

28. Il lettore del web
- L’effetto della dimensione dei font -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
Leggibilità
“Scannabilità”
Se volete spingere a leggere più a lungo la home, usate font
piccoli (11)
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
Usabilità e scrittura dei testi per il web 28/165 Giacomo Mason – Febbraio 2010

29. Il lettore del web
- Titoli grandi e piccoli -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
Fonte: Poynter Institute - 2004
http://www.poynterextra.org/eyetrack2004/headlinesize.htm
Usabilità e scrittura dei testi per il web 29/165 Giacomo Mason – Febbraio 2010

30. Il lettore del web
- Finalizzazione -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
Lettura come effetto di una
determinata ricerca
Processo di attenta
selezione del testo da
leggere
Usabilità e scrittura dei testi per il web 30/165 Giacomo Mason – Febbraio 2010

31. Il lettore del web
- Testo/Azione -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
La lettura “classica”… … e la lettura web
Invio una mail - Clicco - Cambio
Leggo pagina – Commento - Aggiungo al
carrello …
Usabilità e scrittura dei testi per il web 31/165 Giacomo Mason – Febbraio 2010

32. Il lettore del web
- Ancoraggi: alle immagini la priorità -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
3 Le immagini e i titoli
sono il primo
elemento a cui si
presta attenzione,
indipendentemente
dalla loro collocazione
nella pagina
1 2
Le immagini con i visi
in maniera ancora più
accentuata
4
Usabilità e scrittura dei testi per il web 32/165 Giacomo Mason – Febbraio 2010

33. Il lettore del web
- Ancoraggi: titoli e strilli -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
Usabilità e scrittura dei testi per il web 33/165 Giacomo Mason – Febbraio 2010

34. Il lettore del web
- Altri elementi di ancoraggio -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
All’interno del
2 testo alcuni
elementi
vengono
percepiti prima
di altri:
Titoli
1 Sottotitoli
Grassettature
Link
4 Punti-elenco
Rappresentano
3
una specie di
“bussola” per il
lettore e aiutano
a “spezzare” il
testo in tanti
sottotesti
Usabilità e scrittura dei testi per il web 34/165 Giacomo Mason – Febbraio 2010

35. Il lettore del web
- Il contesto vince sul testo -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
Gli elementi di contesto
(header, sezioni, data,
autore) precedono il
testo, poiché servono a
collocarlo e da dargli un
senso
una pagina deve
funzionare anche “fuori
contesto” - dobbiamo
trovare almeno:
• Testata
• Argomento
• Autore
• Data
Usabilità e scrittura dei testi per il web 35/165 Giacomo Mason – Febbraio 2010

36. Usability dei testi
- Elementi di contesto -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
NO Header
SI
Ogni pagina
Path home Sezione Articolo contiene gli
elementi di
Titolo
contesto necessari
ad orientarsi
• Logo
• Tagline
• Titolo pagina
• Menù di profondità
(se possibile)
• Ritorno alla home
• Footer (data –
autore, ecc)
Footer
Usabilità e scrittura dei testi per il web 36/165 Giacomo Mason – Febbraio 2010

37. Usability dei testi
- Elementi di contesto -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
SI NO
Usabilità e scrittura dei testi per il web 37/165 Giacomo Mason – Febbraio 2010

38. Il lettore del web
- Un esempio con il comune di Venezia -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
Di quando è questa guida?
Usabilità e scrittura dei testi per il web 38/165 Giacomo Mason – Febbraio 2010

39. MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Agenda
3) Usability dei testi
Usabilità e scrittura dei testi per il web 39/165 Giacomo Mason – Febbraio 2010

40. Usability dei testi
- Il testo sul web: necessità di riadattarlo -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
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..)
Usabilità e scrittura dei testi per il web 40/165 Giacomo Mason – Febbraio 2010

41. Usability dei testi
- Una sola colonna colonna -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
NO SI
Il testo è
disposto su di
una sola
colonna, come
un “rotolo”
virtuale
Usabilità e scrittura dei testi per il web 41/165 Giacomo Mason – Febbraio 2010

42. Usability dei testi
- Larghezza della colonna -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
NO SI
Max
800 pixel 450-500 pixel
Fonte: Webstyle guide - 2002
http://www.webstyleguide.com/type/lines.html
Usabilità e scrittura dei testi per il web 42/165 Giacomo Mason – Febbraio 2010

43. Usability dei testi
- Larghezza della colonna adeguata alla lettura umana -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
Fonte: Web style guide
http://webstyleguide.com/wsg3/index.html
Usabilità e scrittura dei testi per il web 43/165 Giacomo Mason – Febbraio 2010

44. Usability dei testi
- Un testo troppo “largo” -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
Usabilità e scrittura dei testi per il web 44/165 Giacomo Mason – Febbraio 2010

45. Usability dei testi
- Un testo di larghezza corretta -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
Usabilità e scrittura dei testi per il web 45/165 Giacomo Mason – Febbraio 2010

46. Usability dei testi
- Usate un layout fisso per la larghezza della colonna -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
Fonte: Web style guide
http://webstyleguide.com/wsg3/index.html
Usabilità e scrittura dei testi per il web 46/165 Giacomo Mason – Febbraio 2010

47. Usability dei testi
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
- 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
Fonte: Web style guide
Usabilità e scrittura dei testi per il web 47/165 Giacomo Mason – Febbraio 2010
http://webstyleguide.com/wsg3/index.html

48. Usability dei testi
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" - 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
Usabilità e scrittura dei testi per il web 48/165 Giacomo Mason – Febbraio 2010

49. Usability dei testi
- Un altro esempio di testo lungo
non “trattato” -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
Da Roberto Polillo
Usabilità e scrittura dei testi per il web 49/165 Giacomo Mason – Febbraio 2010
http://www.slideshare.net/rpolillo/12progettare-il-testo

50. Usability dei testi
- Come suddividere il testo? -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
Dipende dalle caratteristiche del testo
(lunghezza, grado di autonomia delle singole
parti)
Dipende dal tipo di fruizione che si può
ipotizzare da parte del lettore (sequenziale,
granulare, focalizzata su alcuni punti)
Usabilità e scrittura dei testi per il web 50/165 Giacomo Mason – Febbraio 2010

51. Usability dei testi
- Le varie suddivisioni per i testi lunghi -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
Sommari Pagine
cliccabili sequenziali Sottopagine indici
Il testo è formato
Il testo sta
Il testo sta Il testo sta da tanti sottotesti
concettualmente su
concettualmente concettualmente autonomi e
più livelli di
su un solo su un solo omogenei
dettaglio
“livello” “livello”
Il lettore deve
Il testo deve
Il testo ha una Il testo è focalizzarsi solo su
adattarsi a lettori
sua unità e non è scomponibile in un frammento
che hanno diverse
scomponibile parti autonome
esigenze di
approfondimento
Il testo ha senso
Il testo deve Il testo ha senso anche se alcune
poter essere solo se letto parti non vengono
Il testo ha senso
stampato sequenzialmente lette
anche se alcune
parti non vengono
lette
Usabilità e scrittura dei testi per il web 51/165 Giacomo Mason – Febbraio 2010

52. Usability dei testi
- Indici iniziali e “up” per i testi lunghi -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
NO SI
Indice cliccabile
dei paragrafi
all’inizio
Bottoni per
tornare in alto
Nessuno strumento
di navigazione interna
Usabilità e scrittura dei testi per il web 52/165 Giacomo Mason – Febbraio 2010

53. Usability dei testi
- Impaginazione “a bandiera” -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
ok Fonte: Web style guide
http://webstyleguide.com/wsg3/index.html
Usabilità e scrittura dei testi per il web 53/165 Giacomo Mason – Febbraio 2010

54. Usability dei testi
- Il giustificato peggiora la leggibilità -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
Evitate di giustificare i
testi che vanno in Rete
Usabilità e scrittura dei testi per il web 54/165 Giacomo Mason – Febbraio 2010

55. Usability dei testi
- Effetti imprevisti del giustificato -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
Usabilità e scrittura dei testi per il web 55/165 Giacomo Mason – Febbraio 2010

56. Usability dei testi
- Effetti imprevisti del giustificato -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
Usabilità e scrittura dei testi per il web 56/165 Giacomo Mason – Febbraio 2010

57. Usability dei testi
- Il giustificato non aiuta la lettura -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
Usabilità e scrittura dei testi per il web 57/165 Giacomo Mason – Febbraio 2010

58. Usability dei testi
- Allineamento: al centro peggiora l’utilizzo -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
Analisi dei Sistemi Finanziari MAT/09 6
Analisi Matematica 2 MAT/05 6
Aspetti Epistemologici dell’Informatica INF/01 6
Basi di Dati (Complementi) INF/01 6
Bioinformatica INF/01 6
Business Intelligence MAT/09 6
Calcolo Numerico MAT/08 6
Cibernetica (Elementi di Teoria dei Sistemi) INF/01 6
Computazione Quantistica (Metodi Matematici ed Elementi) INF/01 6
Data Minino MAT/09 6
Economia e Organizzazione Aziendale ING/IND/35 6
Elaborazione delle Immagini (elementi) INF/01 6
Elaborazione Numerica dei Segnali INF/01 6
Fisica Generale 1 (Complementi) FIS/01 6
Fisica Generale 2 (Progettazione Logica Digitale) FIS/01 6
Fondamenti Logico-Matematici dell'Informatica (Elementi) INF/01 6
Gestione di documenti in ambiente WEB INF/01 6
Informatica Applicata (Controlli Automatici) INF/01 6
Informatica Applicata (Grafica) (*) INF/01 6
Informatica Medica INF/01 6
Psicologia Generale 1 (*) M-PSI/01 6
Nel caso di utilizzi particolari (come consultare un elenco)
l’allineamento a sinistra diventa una necessità
Usabilità e scrittura dei testi per il web 58/165 Giacomo Mason – Febbraio 2010

59. Usability dei testi
- Maiuscolo, corsivo, sottolineature -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
L’INIZIATIVA VUOLE MASSIMIZZARE GLI UTILI E RIDURRE LE
NO SPESE
L’iniziativa vuole massimizzare gli utili e ridurre le spese
SI
L’iniziativa vuole massimizzare gli utili e ridurre le spese
NO
SI L’iniziativa vuole massimizzare gli utili e ridurre le spese
L’iniziativa vuole massimizzare gli utili e ridurre le spese
NO
SI L’iniziativa vuole massimizzare gli utili e ridurre le spese
Usabilità e scrittura dei testi per il web 59/165 Giacomo Mason – Febbraio 2010

60. Usability dei testi
- I difetti del maiuscolo -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
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
Pattern riconoscibili
Conservazione
dell’informazione
Usabilità e scrittura dei testi per il web 60/165 Giacomo Mason – Febbraio 2010

61. Usability dei testi
- Il minuscolo crea un pattern più leggibile -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
L’uso delle minuscole
associa ad ogni parola
un “pattern” riconoscibile
dato dalle ascendenti e
dalle discendenti
Fonte: Web style guide
http://webstyleguide.com/wsg3/index.html
Usabilità e scrittura dei testi per il web 61/165 Giacomo Mason – Febbraio 2010

62. Usability dei testi
- Il minuscolo crea un pattern più leggibile -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
Usabilità e scrittura dei testi per il web 62/165 Giacomo Mason – Febbraio 2010

63. Usability dei testi
- Il corsivo aumenta l’effetto “sega” -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
Il corsivo si legge male su video
perché enfatizza l’effetto “sega”
Da Roberto Polillo
Usabilità e scrittura dei testi per il web 63/165 Giacomo Mason – Febbraio 2010
http://www.slideshare.net/rpolillo/12progettare-il-testo

64. Usability dei testi
- Il corsivo peggiora la leggibilità -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
Evitate di scrivere testi
tutti in corsivo
Usabilità e scrittura dei testi per il web 64/165 Giacomo Mason – Febbraio 2010

65. Usability dei testi
- Corsivo: esperimenti sui tempi di lettura -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
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)
Fonte: Hill, Scharff - 1997
http://hubel.sfasu.edu/research/AHNCUR.html
Usabilità e scrittura dei testi per il web 65/165 Giacomo Mason – Febbraio 2010

66. Usability dei testi
- Font -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
Fonte: Web style guide
http://webstyleguide.com/wsg3/index.html
Usabilità e scrittura dei testi per il web 66/165 Giacomo Mason – Febbraio 2010

67. Usability dei testi
- Due tipi di font -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
Carattere con
“grazie”
Carattere a
“bastoni”
Usabilità e scrittura dei testi per il web 67/165 Giacomo Mason – Febbraio 2010

68. Usability dei testi
- I font migliori (e i peggiori) -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
L’iniziativa vuole massimizzare gli utili e ridurre le spese attraverso
una accurata politica di investimenti a medio e lungo termine (times
new roman)
NO 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
SI
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 (verdana)
Usabilità e scrittura dei testi per il web 68/165 Giacomo Mason – Febbraio 2010

69. Usability dei testi
- Il Times New Roman peggiora la leggibilità -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
Usabilità e scrittura dei testi per il web 69/165 Giacomo Mason – Febbraio 2010

70. MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Font sbagliati
Usabilità e scrittura dei testi per il web 70/165 Giacomo Mason – Febbraio 2010

71. Usability dei testi
- Verifiche sperimentali: percezione degli utilizzatori -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
Arial
Verdana
Time
s
N.B. La percezione può non
Fonte: Bernard et al, 2001
coincidere con i tempi di lettura
http://psychology.wichita.edu/surl/usabilitynews/3S/font.htm
Usabilità e scrittura dei testi per il web 71/165 Giacomo Mason – Febbraio 2010

72. Usability dei testi
- Dimensioni e interlinea dei caratteri -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
Un esperimento: (Williams, Scharff)
Usare preferibilmente almeno caratteri in corpo 12
Da Roberto Polillo
Usabilità e scrittura dei testi per il web 72/165 Giacomo Mason – Febbraio 2010
http://www.slideshare.net/rpolillo/12progettare-il-testo

73. Usability dei testi
- Indagine di M. Bernard (2003) sui tempi di lettura -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
La resa migliore (tempo
medio di riconoscimento
lettere) si ha con i caratteri
in corpo 12 , in particolare
Thaoma e Verdana (ma
anche Times)
Fonte: Bernard et al, 2003
http://psychology.wichita.edu/optimalweb/text.htm
Usabilità e scrittura dei testi per il web 73/165 Giacomo Mason – Febbraio 2010

74. Usability dei testi
- Rapporto testo-sfondo -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
NO NO SI
Usabilità e scrittura dei testi per il web 74/165 Giacomo Mason – Febbraio 2010

75. Usability dei testi
- Rapporto testo-sfondo -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
SI NI NO
Nero su bianco Bianco su nero Rosso su verde
Bianco su Azzurro Nero su giallo Fucsia su blu
Blu su bianco Grigio su nero Verde su giallo
Nero su grigio
Usabilità e scrittura dei testi per il web 75/165 Giacomo Mason – Febbraio 2010

76. Usability dei testi
- Rapporti testo-sfondo sbagliati -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
Usabilità e scrittura dei testi per il web 76/165 Giacomo Mason – Febbraio 2010

77. Usability dei testi
- Contrasti che non favoriscono la leggibilità -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
Usabilità e scrittura dei testi per il web 77/165 Giacomo Mason – Febbraio 2010

78. Usability dei testi
- Evitate sfondi elaborati nel testo -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
Usabilità e scrittura dei testi per il web 78/165 Giacomo Mason – Febbraio 2010

79. Usability dei testi
- Rapporto testo-sfondo: indagini empiriche -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
Fonte: Lauren Scharff 1997
http://hubel.sfasu.edu/research/survreslts.html
Usabilità e scrittura dei testi per il web 79/165 Giacomo Mason – Febbraio 2010

80. Usability dei testi
- Usare pochi colori e dare loro un significato -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
NO
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
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
Usabilità e scrittura dei testi per il web 80/165 Giacomo Mason – Febbraio 2010

81. MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Troppi colori
Usabilità e scrittura dei testi per il web 81/165 Giacomo Mason – Febbraio 2010

82. Usability dei testi
- Colori a profusione -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
Usabilità e scrittura dei testi per il web 82/165 Giacomo Mason – Febbraio 2010

83. Usability dei testi
- Non affiancate colori lontani nello spettro -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
caratteri di colori lontani
sullo spettro vengono messi
a fuoco su piani diversi
Da Roberto Polillo 83/165 Giacomo Mason – Febbraio 2010
Usabilità e scrittura dei testi per il web
http://www.slideshare.net/rpolillo/12progettare-il-testo

84. MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
Esempio di rosso su sfondo blu
Non si riesce a mettere a fuoco
Usabilità e scrittura dei testi per il web 84/165 Giacomo Mason – Febbraio 2010

85. MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
Da questo esempio si vede la difficoltà di messa a fuoco
contemporanea del rosso e del blu: da molti le righe di questi
due colori vengono viste, per i motivi descritti, come se fossero
collocate a distanze diverse dagli occhi.
Questo fenomeno non si verifica se si usano due colori che
si trovino fra loro più vicini sullo spettro visibile, come si può
facilmente verificare da questo secondo esempio, che non
dovrebbe presentare l’effetto tridimensionale di cui sopra.
Usabilità e scrittura dei testi per il web 85/165 Giacomo Mason – Febbraio 2010
Da Roberto Polillo

86. Usability dei testi
- Niente animazioni nel testo -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
NO SI
Usabilità e scrittura dei testi per il web 86/165 Giacomo Mason – Febbraio 2010

87. MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Agenda
4) Formattazione
Usabilità e scrittura dei testi per il web 87/165 Giacomo Mason – Febbraio 2010

88. Usability dei testi
- Il problema dei blocchi di testo -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
I blocchi di testo troppo fitti spaventano il lettore
Sul web è difficile mantenere dei punti di
riferimento e l’occhio si stanca prima
E’ necessario spezzare l’omogeneità
introducendo elementi di rilevanza e
bussole di riferimento
Usabilità e scrittura dei testi per il web 88/165 Giacomo Mason – Febbraio 2010

89. MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
Usabilità e scrittura dei testi per il web 89/165 Giacomo Mason – Febbraio 2010

90. MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
Usabilità e scrittura dei testi per il web 90/165 Giacomo Mason – Febbraio 2010

91. Usability dei testi
- Spazi, blocchi, impaginazione -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
NO SI
Vari blocchi di testo il più
possibile uniformi
spazi tra i paragrafi e
all’interno della pagina
Impaginazione a
bandiera
Blocco unico di testo
Nessuno spazio
Impaginazione giustificata
Usabilità e scrittura dei testi per il web 91/165 Giacomo Mason – Febbraio 2010

92. Usability dei testi
- Blocchi di testo: meglio se molto corti -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
Blocchi corti
La ricerca rivela che
(4 - 5 righe) con blocchi di testo
medio lunghi (9-10
righe) l’efficacia si
riduce di più della
metà
Blocchi medio- (durata e numero di
lunghi fissazioni dello
(9 - 10 righe) sguardo)
Fonte: Poynter Institute - 2004
http://www.poynterextra.org/eyetrack2004/articlepages.htm
Usabilità e scrittura dei testi per il web 92/165 Giacomo Mason – Febbraio 2010

93. Usability dei testi
- Uso dei blocchi di testo -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
Ok NO
Usabilità e scrittura dei testi per il web 93/165 Giacomo Mason – Febbraio 2010

94. Formattazione e ancoraggi
- Uso dei blocchi di testo -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
NO NO
Usabilità e scrittura dei testi per il web 94/165 Giacomo Mason – Febbraio 2010

95. Usability dei testi
- Uso dei blocchi di testo -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
Usabilità e scrittura dei testi per il web 95/165 Giacomo Mason – Febbraio 2010