Grafica ed interfacce per la comunicazione Scienze della Comunicazione

Grafica ed interfacce per la comunicazione Scienze della Comunicazione Paola Vocca Lezione 17: Progettare il testo Lucidi tradotti e adattati da materiale presente su http://www.hcibook.com/e3/resources/ e http://www.robertopolillo.it

Scopo di questa lezione Fornire indicazioni su come presentare e comporre i testi per una migliore usabilità dei sistemi che li utilizzano Grafica ed interfacce per la comunicazione A.A. 2012/13 2

Introduzione I testi costituiscono una componente molto importante delle interfacce utente e possono influenzare grandemente la usabilità di un sistema Possono essere analizzati da diversi punti di vista: o struttura fisica (leggibilità fisica, piacevolezza, espressività, ) o struttura linguistica (comprensibilità, ) Grafica ed interfacce per la comunicazione A.A. 2012/13 3

Libro delle Ore, Francia, ca. 1440 4 Grafica ed interfacce per la comunicazione A.A. 2012/13

5 Grafica ed interfacce per la comunicazione A.A. 2012/13 Breviario Belleville (1323-26)

6 Grafica ed interfacce per la comunicazione A.A. 2012/13

9 Grafica ed interfacce per la comunicazione A.A. 2012/13 Home page, ca.2000

L usabilità del testo «Il grado con cui esso può essere usato da specificati utenti per raggiungere specificati obiettivi con efficacia, efficienza e soddisfazione in uno specificato contesto d uso» Per esempio: o Efficacia: comprensione accurata e completa o Efficienza: tempo medio impiegato nella lettura Grafica ed interfacce per la comunicazione A.A. 2012/13 10

Ciò che vorremmo Impostare degli studi sperimentali rigorosi che ci permettano di trarre delle indicazioni pratiche per comporre e presentare testi in modo «ottimale» In pratica: definire delle misure (o indici) e studiare come queste misure variano al variare di opportune variabili indipendenti (es. font, colore, lunghezza media delle parole, contesto di lettura, ecc.) Grafica ed interfacce per la comunicazione A.A. 2012/13 11

Legibility La facilità con cui riusciamo a discriminare le singole lettere che compongono un testo Considera la struttura tipografica, non i contenuti Può essere misurata sperimentalmente in modo relativamente semplice Grafica ed interfacce per la comunicazione A.A. 2012/13 12

Readability Misura la sua comprensibilità complessiva Considera quindi la struttura linguistica: ampiezza del lessico, sintassi e semantica Molto più difficile da misurare sperimentalmente Grafica ed interfacce per la comunicazione A.A. 2012/13 13

Paratesto Tutto ciò che sta accanto, di contorno al testo, al suo servizio Titoli, riassunti, tabelle, schemi, figure, decorazioni, ecc. Importantissimi per la usabilità complessiva del testo Grafica ed interfacce per la comunicazione A.A. 2012/13 14

Font (o tipi di caratteri) Un insieme di caratteri con un certo stile grafico, es.: Grafica ed interfacce per la comunicazione A.A. 2012/13 15

Font: esempi (dal primo Macintosh, circa1984) Grafica ed interfacce per la comunicazione A.A. 2012/13 16

Font: esempi Arial Arial black Arial narrow AvantGarde Book Antiqua Bookman Bookman Old Style Calisto MT Century Gothic Comic Sans MS Copperplate Gothic Bold Copperplate Gothic Light Courier Courier New Garamond Helvetica Helvetica Narrow Impact (Windows, circa 2000) Grafica ed interfacce per la comunicazione A.A. 2012/13 Lucida Console Lucida Handwriting Lucida Sans Lucida Sans Unicode Matisse ITC New York New Century Schlbk News Gothic MT OCR A Extended Palatino Tahoma Tempus Sans ITC Times Times New Roman Univers 45 Light Verdana Westminster ZapfChancery 17

Terminologia Grafica ed interfacce per la comunicazione A.A. 2012/13 18

Risoluzione La densità di punti elementari che compongono una immagine Esempi: Stampa su carta: almeno 300 dpi (dot per inch) (ma anche 2400+) Video: 72-96 130 ppi (pixel per inch) Grafica ed interfacce per la comunicazione A.A. 2012/13 19

Print font e screen font Screen font: progettati per essere ben leggibili sul video (si parte da una griglia, e solo in seguito si disegnano con tratti curvilinei) Grafica ed interfacce per la comunicazione A.A. 2012/13 20

Font diffusi Times New Roman font graziato più usato sulla carta stampata. fu progettato da Stanley Morrison per conto del giornale londinese The Times, che lo adottò nel 1932 in sostituzione del font Times Old Roman. Ben leggibile anche con caratteri di piccole dimensioni stampati sulla carta di cattiva qualità usata durante la Grande Depressione degli anni 30. Il disegno dei caratteri, alti e stretti, era concepito per ridurre i fastidiosi spazi bianchi derivanti dall allineamento «a pacchetto» dei testi nelle colonne del giornale Georgia: screen-font graziato, disegnato da Matthew Carter per conto della Microsoft nel 1993. Fu progettato per essere leggibile sui monitor anche in corpo piccolo, ed è molto simile al Times New Roman: le linee sono un po più spesse, e il loro spessore varia meno. A parità di dimensione,le lettere sono un po più larghe e alte; le grazie sono più larghe e con tratti meno obliqui. Non ci sono legature e le lettere sono più «verticalizzate», per permettere una migliore resa sul monitor. Arial font senza grazie adatto sia ai monitor sia alla carta stampata. Fu progettato nel 1982 ispirata a Helvetica. Arial fu usato da Microsoft in Windows 3.1, ed è oggi molto diffuso sul Web. Verdana screen-font senza grazie, diventato quasi uno standard di fatto per i testi su monitor. Progettato da Matthew Carter per la Microsoft per massimizzare la leggibilità anche in corpo piccolo (fino a 4 pt) e su monitor a bassa risoluzione, fu rilasciato nel 1996 per Windows 95. I caratteri sono larghi e ben spaziati, minuscole alte e ben leggibili, ed ha il vantaggio di differenziare bene i caratteri simili, come per esempio la i maiuscola (che per questo ha le grazie), la elle minuscola e la cifra 1. Grafica ed interfacce per la comunicazione A.A. 2012/13 21

Esempio Times New Roman (print font) Verdana (screen font) Grafica ed interfacce per la comunicazione A.A. 2012/13 22

Font proporzionali e non Un font i cui glifi sono di larghezza variabile è detto proporzionale, mentre un font con glifi di larghezza fissa è detto non proporzionale (o monospace o a larghezza fissa) I font proporzionali sono generalmente considerati più eleganti e più facili da leggere e sono quindi quelli più comunemente utilizzati sulla carta stampata e sui monitor. I font non proporzionali furono creati per le macchine per scrivere e per le stampanti a impatto, poiché lo spostamento del carrello dopo la stampa di un carattere era sempre della stessa misura. Grafica ed interfacce per la comunicazione A.A. 2012/13 23

Lettura su carta e sul video La lettura sulla carta e la lettura sul video sono molto diverse: o Supporto e angolo di lettura differenti o Il testo sul video ha risoluzione molto inferiore al testo a stampa (es. 72-96 vs 300+ dpi) o Su video a bassa risoluzione caratteri piccoli sono poco leggibili E opinione comune che leggiamo più lentamente e più faticosamente sul video che sulla carta ma con il miglioramento della tecnologia questa differenza si riduce molto velocemente Grafica ed interfacce per la comunicazione A.A. 2012/13 24

Il processo di lettura Fonte: Kevin Larson. The Science of Word Recognition Grafica ed interfacce per la comunicazione A.A. 2012/13 25

Video Eye tracking nella lettura di un testo sul video: http://it.youtube.com/watch?v=bw_zdileevy Grafica ed interfacce per la comunicazione A.A. 2012/13 26

Misurare la legibility Si può misurare sulla base del tempo medio utilizzato da un campione di soggetti per leggere determinati brani di testo Varie tecniche (es.: ricerca della prima occorrenza di una fra più parole date nel testo) Grafica ed interfacce per la comunicazione A.A. 2012/13 27

Legibility: che cosa si può dire Essa può dipendere da molti fattori: I tipi di caratteri (font) La dimensione dei caratteri Il numero di caratteri per riga Gli spazi (fra caratteri, parole, righe) e i margini Gli allineamenti Il contrasto fra i caratteri e lo sfondo (luminosità, tinta) Il colore (?) Questi fattori interagiscono in modo complesso, i risultati scientifici finora ottenuti sono a volte contradditori e non si riesce a ricavare regole generali semplici Grafica ed interfacce per la comunicazione A.A. 2012/13 28

Diffidate delle indicazioni che trovate sul web: sono spesso prive di fondamento scientifico Grafica ed interfacce per la comunicazione A.A. 2012/13 29

In sintesi, che cosa si può dire Normalmente si raccomanda di utilizzare su video font senza grazie Per quanto è possibile evitare il corsivo Per quanto è possibile evitare testi lunghi (perchè la lettura sul video è faticosa) Evitare testi lunghi in caratteri maiuscoli Usare preferibilmente caratteri in corpo 12 o maggiore Fare molta attenzione al contrasto fra colore del testo e colore dello sfondo (ma contrasto non è un concetto semplice) Preferire caratteri scuri su fondo chiaro Evitare sfondi con texture che ostacolino la lettura In un testo, non mischiare caratteri di colori spettralmente lontani (problemi di messa a fuoco contemporanea) Non veicolare le informazioni esclusivamente attraverso il colore (daltonismo, poca sensibilità al blu) Grafica ed interfacce per la comunicazione A.A. 2012/13 30

Esempio: un test di leggibilità (video) * * Tempo di lettura in sec 35 partecipanti, vista 20/20, monitor 1024x768, 2 pagine di testo (M.Bernard & M.Mills, So, What Size and Type of Font Should I Use on My Website?, Usability News, Summer 2000) Grafica ed interfacce per la comunicazione A.A. 2012/13 31

Un altro test di leggibilità (video) Arial Tahoma Courier Times Tempo medio di lettura in sec (testi di circa 2 pag, con font di 12 punti, 22 utenti) Grafica ed interfacce per la comunicazione A.A. 2012/13 (Bernard et al, 2001) 32

Il font Verdana Progettato da Matthew Carter per Microsoft (1996) per essere ben leggibile su video, anche per piccole dimensioni, oggi molto diffuso: Caratteri larghi e ben differenziati, minuscole alte e ben leggibili I (con grazie), l e 1 ben differenziati Grafica ed interfacce per la comunicazione A.A. 2012/13 33

Maiuscole o minuscole È POSSIBILE VERIFICARE CHE LA LEGIBILITY DI UN TESTO SCRITTO ESCLUSIVAMENTE IN CARATTERI MAIUSCOLI È MINORE DI QUELLA DI UN TESTO SCRITTO IN CARATTERI MAIUSCOLI E MINUSCOLI È possibile verificare che la legibility di un testo scritto esclusivamente in caratteri maiuscoli è minore di quella di un testo scritto in caratteri maiuscoli e minuscoli Grafica ed interfacce per la comunicazione A.A. 2012/13 34

Infatti... L uso delle minuscole associa ad ogni parola un pattern riconoscibile dato dalle ascendenti e dalle discendenti Grafica ed interfacce per la comunicazione A.A. 2012/13 35

Esempio Grafica ed interfacce per la comunicazione A.A. 2012/13 36

Corsivo Il corsivo comunque si legge male sul video, perchè enfatizza l effetto sega creato dai pixel discreti: Grafica ed interfacce per la comunicazione A.A. 2012/13 37

Corsivo: esempio Grafica ed interfacce per la comunicazione A.A. 2012/13 38

Dimensione dei caratteri: un esperimento (Williams, Scharff) Usare preferibilmente almeno caratteri in corpo 12 Grafica ed interfacce per la comunicazione A.A. 2012/13 39

Sinistra: Allineamenti Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Destra: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Centro: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Grafica ed interfacce per la comunicazione A.A. 2012/13 40

Allineamenti (segue) E opinione corrente che l allineamento a sinistra sia preferibile, in quanto fornisce una ancora visiva per i movimenti saccadici di ritorno a capo Tale opinione non sembra supportata da conferme sperimentali (Un recente esperimento da noi condotto non mostra alcuna differenza nei tempi di lettura di testi allineati a sx o a dx) Grafica ed interfacce per la comunicazione A.A. 2012/13 41

Impaginazione a pacchetto Può essere sgradevole in colonne strette (spazi vuoti) Grafica ed interfacce per la comunicazione A.A. 2012/13 42

Tinta Molte opinioni, ma poche supportate da esperimenti rigorosi Alcune opinioni diffuse sono fra loro contraddittorie Alcuni studi mostrano che la tinta non influisce significativamente sulla leggibilità, la quale invece risulta influenzata da luminosità e contrasto con lo sfondo; altri studi mostrano risultati diversi Grafica ed interfacce per la comunicazione A.A. 2012/13 43

Polarità Negativa: caratteri scuri su fondo chiaro Positiva: caratteri chiari su fondo scuro Anche in questo caso i risultati non sono univoci, ma sembra che prevalga la convinzione che la polarità negativa sia più leggibile Grafica ed interfacce per la comunicazione A.A. 2012/13 44

Ancora sui colori del testo - caratteri di colori lontani sullo spettro vengono messi a fuoco su piani diversi - l occhio è poco sensibile al blu (soprattutto negli anziani) Grafica ed interfacce per la comunicazione A.A. 2012/13 45

Messa a fuoco Blu Verde Rosso LUCE BIANCA LENTE A B C FUOCO SULLA RETINA Blu Verde Rosso A causa della diffrazione sul cristallino, difficoltà di messa a fuoco contemporanea, sulla retina, di colori diversi agli estremi dello spettro (immagine stereoscopoca, fatica) Quindi: evitare l uso di scritte in cui siano vicini caratteri di colori saturi agli estremi dello spettro (es.: rosso-blu; giallo-porpora) Grafica ed interfacce per la comunicazione A.A. 2012/13 46

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. Grafica ed interfacce per la comunicazione A.A. 2012/13 47

Readability Un problema molto più complicato Nel mezzo del cammin di nostra vita Mi ritrovai per una selva oscura Grafica ed interfacce per la comunicazione A.A. 2012/13 48

Readability indexes Cercano di «misurare» la comprensibilità di un testo utilizzando delle misure semplici (es.: numero di parole in una frase, ecc.) Grafica ed interfacce per la comunicazione A.A. 2012/13 49

L indice Gulpease Definito nel 1988 dal GULP dell Università di Roma La Sapienza, sulla base di ricerche di Costa e De Mauro, per la lingua italiana Considera solo la lunghezza delle parole e la lunghezza delle frasi (in lettere), ed è di facile calcolo Complementare all indice è la definizione del vocabolario comune della lingua italiana, che considera la «notorietà» del lessico (es.: vocabolario base noto a chi ha la licenza media inferiore, circa 7000 termini) Servizio di valutazione via mail su http://www.eulogos.net/it/censor/default.htm Grafica ed interfacce per la comunicazione A.A. 2012/13 50

VOCABOLARIO COMUNE VOCABOLARIO DI BASE (7000 lessemi) VOCABOLARIO FONDAMENTALE (2000 lessemi) 51 Grafica ed interfacce per la comunicazione A.A. 2012/13

Indice Gulpease (segue) Compreso tra 0 (leggibilità più bassa) e 100 (leggibilità più alta) - indice < 80: difficili da leggere per chi ha licenza elementare - indice < 60: difficili da leggere per chi ha licenza media - indice < 40: difficili da leggere per chi ha un diploma superiore Grafica ed interfacce per la comunicazione A.A. 2012/13 52

I manuali di stile Indicazioni per la redazione di «buoni» testi Ovviamente non hanno convalida sperimentale Grafica ed interfacce per la comunicazione A.A. 2012/13 53

Linee guida: esempio 1. Scrivere frasi brevi 2. Usare parole del linguaggio comune 3. Usare pochi termini tecnici e spiegarli 4. Usare poco abbreviazioni e sigle 5. Usare verbi nella forma attiva e affermativa 6. Legare le parole e le frasi in modo breve e chiaro 7. Usare in maniera coerente le maiuscole, le minuscole e la punteggiatura 8. Evitare neologismi, parole straniere e latinismi 9. Uso del congiuntivo 10. Usare in maniera corretta le possibilità di composizione grafica del testo Grafica ed interfacce per la comunicazione A.A. 2012/13 54

Il testo nel web Il processo di lettura di una pagina web è diverso da quello di un testo normale, ed è più simile alla lettura della pagina di un quotidiano L occhio «scorre» qua e là, soffermandosi brevemente su quegli elementi che forniscono «indizi» sui contenuti (vedi esperimenti di eye tracking) Il testo deve essere organizzato di conseguenza («scannable text») Grafica ed interfacce per la comunicazione A.A. 2012/13 55

Scannable text 1. Titoli e sottotitoli brevi e significativi 2. Parole chiave evidenziate (neretto, sottolineato, link ipertestuali, ) 3. Paragrafi brevi: un concetto per paragrafo 4. Pagine brevi: evitare o ridurre lo scrolling 5. Metà delle parole di un testo tradizionale 6. Inverted pyramid style 7. Get to the point Grafica ed interfacce per la comunicazione A.A. 2012/13 56

Stile a piramide invertita SINTESI link DETTAGLIO link MATERIALE AGGIUNTIVO Grafica ed interfacce per la comunicazione A.A. 2012/13 57

Stile a piramide invertita: esempi 1 2 3 58 Grafica ed interfacce per la comunicazione A.A. 2012/13

59 Grafica ed interfacce per la comunicazione A.A. 2012/13 Questo testo non è stato pensato per il web!

Wall of text Fonte: Jakob Nielsen, www.useit.com Grafica ed interfacce per la comunicazione A.A. 2012/13 60