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 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 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 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 Principi Generali - Progettare testi, progettare interfacce - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Il testo sul web anche uninterfaccia di azione Diversi tipi di testo si dispongono in modo diverso nellasse interfaccia/trasparenza Etichette dei Men Link Strilli cliccabili Istruzioni per linterazione 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 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 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 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 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 Principi Generali - Linversione 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 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 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 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 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 linformazione Usabilit e scrittura dei testi per il web 14/165 Giacomo Mason Febbraio 2010 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 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 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 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 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 dallalto 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 Il lettore del web - Caratteristiche principali della lettura web - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Locchio 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 unazione Usabilit e scrittura dei testi per il web 20/165 Giacomo Mason Febbraio 2010 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? L80% dei lettori scorre la pagina Usabilit e scrittura dei testi per il web 21/165 Giacomo Mason Febbraio 2010 Il lettore del web - Il rapporto Eyetrack - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Osservazione sperimentale dei comportamenti degli utenti attraverso lanalisi 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 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 MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Usabilit e scrittura dei testi per il web 24/165 Giacomo Mason Febbraio 2010 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 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 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 Il lettore del web - Leffetto 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 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 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 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 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 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 Il lettore del web - Altri elementi di ancoraggio - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Allinterno 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 allinizio Bottoni per tornare in alto Nessuno strumento di navigazione interna Usabilit e scrittura dei testi per il web 52/165 Giacomo Mason Febbraio 2010 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 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 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 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 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 Usability dei testi - Allineamento: al centro peggiora lutilizzo - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Analisi dei Sistemi Finanziari MAT/09 6 Analisi Matematica 2 MAT/05 6 Aspetti Epistemologici dellInformatica 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) lallineamento a sinistra diventa una necessit Usabilit e scrittura dei testi per il web 58/165 Giacomo Mason Febbraio 2010 Usability dei testi - Maiuscolo, corsivo, sottolineature - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" LINIZIATIVA VUOLE MASSIMIZZARE GLI UTILI E RIDURRE LE NO SPESE Liniziativa vuole massimizzare gli utili e ridurre le spese SI Liniziativa vuole massimizzare gli utili e ridurre le spese NO SI Liniziativa vuole massimizzare gli utili e ridurre le spese Liniziativa vuole massimizzare gli utili e ridurre le spese NO SI Liniziativa vuole massimizzare gli utili e ridurre le spese Usabilit e scrittura dei testi per il web 59/165 Giacomo Mason Febbraio 2010 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 dellinformazione Usabilit e scrittura dei testi per il web 60/165 Giacomo Mason Febbraio 2010 Usability dei testi - Il minuscolo crea un pattern pi leggibile - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Luso 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 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 Usability dei testi - Il corsivo aumenta leffetto sega - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Il corsivo si legge male su video perch enfatizza leffetto 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 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 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 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 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 Usability dei testi - I font migliori (e i peggiori) - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Liniziativa vuole massimizzare gli utili e ridurre le spese attraverso una accurata politica di investimenti a medio e lungo termine (times new roman) NO Liniziativa vuole massimizzare gli utili e ridurre le spese attraverso una accurata politica di investimenti a medio e lungo termine (Garamond) Liniziativa vuole massimizzare gli utili e ridurre le spese SI attraverso una accurata politica di investimenti a medio e lungo termine (arial) Liniziativa 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 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 MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Font sbagliati Usabilit e scrittura dei testi per il web 70/165 Giacomo Mason Febbraio 2010 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 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 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 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 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 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 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 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 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 Usability dei testi - Usare pochi colori e dare loro un significato - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" NO Gli obiettivi delliniziativa Liniziativa vuole massimizzare gli utili e ridurre le spese attraverso una accurata politica di investimenti a medio e lungo termine SI Gli obiettivi delliniziativa Liniziativa 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 MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Troppi colori Usabilit e scrittura dei testi per il web 81/165 Giacomo Mason Febbraio 2010 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 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 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 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 leffetto tridimensionale di cui sopra. Usabilit e scrittura dei testi per il web 85/165 Giacomo Mason Febbraio 2010 Da Roberto Polillo 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 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 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 locchio si stanca prima E necessario spezzare lomogeneit introducendo elementi di rilevanza e bussole di riferimento Usabilit e scrittura dei testi per il web 88/165 Giacomo Mason Febbraio 2010 MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Usabilit e scrittura dei testi per il web 89/165 Giacomo Mason Febbraio 2010 MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Usabilit e scrittura dei testi per il web 90/165 Giacomo Mason Febbraio 2010 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 allinterno della pagina Impaginazione a bandiera Blocco unico di testo Nessuno spazio