Usabilita E Scrittura dei Testi per il web

97,908 views

Published on

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

Published in: Education, Technology, Business
6 Comments
43 Likes
Statistics
Notes
No Downloads
Views
Total views
97,908
On SlideShare
0
From Embeds
0
Number of Embeds
83,199
Actions
Shares
0
Downloads
830
Comments
6
Likes
43
Embeds 0
No embeds

No notes for slide

Usabilita E Scrittura dei Testi per il web

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

×