Your SlideShare is downloading. ×
13.Progettare il testo
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

13.Progettare il testo

869
views

Published on

Slides delle lezioni del corso di Interazione Uomo Macchina - Università di Milano Bicocca - Prof.R.Polillo - A.A.2012-13 …

Slides delle lezioni del corso di Interazione Uomo Macchina - Università di Milano Bicocca - Prof.R.Polillo - A.A.2012-13
Lezione del 30 aprile 2013
Vedi anche www.rpolillo.it

Published in: Education

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
869
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
63
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Corso di Interazione Uomo MacchinaAA 2012-2013Roberto PolilloCorso di laurea in InformaticaUniversità di Milano BicoccaDipartimento di Informatica, Sistemistica e ComunicazionePROGETTARE IL TESTO1
  • 2. Queste slides…… si basano sul libro “Facile da usare”, dell’autore, dove si trovanotutte le necessarie spiegazioni. Vedi www.rpolillo.itQueste slide sono disponibili con licenza Creative Commons(attribuzione, non commerciale, condividi allo stesso modo) achiunque desiderasse utilizzarle, per esempio a scopodidattico, senza necessità di preventiva autorizzazione:http://creativecommons.org/licenses/by-nc-sa/3.0/it/deed.itLa licenza non si estende alle immagini fotografiche e alle screenshots, i cui diritti restano in capo ai rispettivi proprietari, che sonostati indicati, ove possibile, nelle didascalie del libro. L’autore siscusa per eventuali omissioni, e resta a disposizione percorreggerle.R.Polillo - Marzo 20132
  • 3. Scopo di questa lezioneFornire indicazioni su come presentare ecomporre i testi per una migliore usabilità deisistemi che li utilizzano3R.Polillo - Marzo 2013
  • 4. IntroduzioneR.Polillo - Marzo 20134I testi costituiscono una componente moltoimportante delle interfacce utente e possonoinfluenzare grandemente la usabilità di unsistemaPossono essere analizzati da diversi punti divista: struttura fisica (leggibilitàfisica, piacevolezza, espressività, …) struttura linguistica (comprensibilità, …)
  • 5. Libro delle Ore, Francia, ca. 14405 R.Polillo - Marzo 2013
  • 6. Breviario Belleville(1323-26)6 R.Polillo - Marzo 2013
  • 7. 7 R.Polillo - Marzo 2013
  • 8. 8 R.Polillo - Marzo 2013
  • 9. 9 R.Polillo - Marzo 2013
  • 10. Home page, ca.200010 R.Polillo - Marzo 2013
  • 11. L’usabilità del testoR.Polillo - Marzo 201311“Il grado con cui esso può essere usato daspecificati utenti per raggiungere specificatiobbiettivi con efficacia, efficienza esoddisfazione in uno specificato contestod’uso”Per esempio: Efficacia:comprensione accurata e completa Efficienza: tempo medio impiegato nella lettura
  • 12. Ciò che vorremmo Impostare degli studi sperimentali rigorosi che cipermettano di trarre delle indicazioni pratiche percomporre e presentare testi in modo “ottimale” In pratica: definire delle misure (o indici) e studiarecome queste misure variano al variare di opportunevariabili indipendenti (es. “font”, “colore”, “lunghezzamedia delle parole”, “contesto di lettura”, ecc.)12R.Polillo - Marzo 2013
  • 13. “Legibility”La facilità con cui riusciamo a discriminare lesingole lettere che compongono un testo Considera la struttura tipografica, non icontenuti Può essere misurata sperimentalmente in modorelativamente semplice13R.Polillo - Marzo 2013
  • 14. “Readability”Misura la sua comprensibilità complessiva Considera quindi la struttura linguistica: ampiezzadel lessico, sintassi e semantica Molto più difficile da misurare sperimentalmente14R.Polillo - Marzo 2013
  • 15. ParatestoR.Polillo - Marzo 201315Tutto ciò che sta “accanto”, “di contorno” altesto, al “suo servizio” Titoli, riassunti, tabelle, schemi, figure, decorazioni, ecc. Importantissimi per la usabilità complessiva deltesto
  • 16. Font (o tipi di caratteri)R.Polillo - Marzo 201316Un insieme di caratteri con un certo stile grafico, es.:
  • 17. Font: esempi(dal primo Macintosh, circa1984)17R.Polillo - Marzo 2013
  • 18. Font: esempiArialArial blackArial narrowAvantGardeBook AntiquaBookmanBookman Old StyleCalisto MTCentury GothicComic Sans MSCopperplate Gothic BoldCopperplate Gothic LightCourierCourier NewGaramondHelveticaHelvetica NarrowImpactLucida ConsoleLucida HandwritingLucida SansLucida Sans UnicodeMatisse ITCNew YorkNew Century SchlbkNews Gothic MTOCR A ExtendedPalatinoTahomaTempus Sans ITCTimesTimes New RomanUnivers 45 LightVerdanaWestminsterZapfChancery(Windows, circa 2000)18R.Polillo - Marzo 2013
  • 19. TerminologiaR.Polillo - Marzo 201319
  • 20. RisoluzioneR.Polillo - Marzo 201320 La densità di punti elementari checompongono una immagine Esempi:Stampa su carta: almeno 300 dpi (dot per inch)(ma anche 2400+)Video: 72-96 →130 ppi (pixel per inch)
  • 21. Print font e screen fontR.Polillo - Marzo 201321Screen font: progettati per essere benleggibili sul video (si parte da una griglia, esolo in seguito si disegnano con tratticurvilinei)
  • 22. EsempioTimesNew Roman(print font)Verdana(screen font)22R.Polillo - Marzo 2013
  • 23. Lettura su carta e sul videoR.Polillo - Marzo 201323 La lettura sulla carta e la lettura sul video sono moltodiverse: Supporto e angolo di lettura differenti Il testo sul video ha risoluzione molto inferiore al testo astampa(es. 72-96 vs 300+ dpi) Su video a bassa risoluzione caratteri piccoli sono pocoleggibili E’ opinione comune che leggiamo più lentamente epiù faticosamente sul video che sulla carta – ma con ilmiglioramento della tecnologia questa differenza siriduce molto velocemente
  • 24. Il processo di letturaFonte: Kevin Larson. The Science of Word Recognition24R.Polillo - Marzo 2013
  • 25. VideoEye tracking nella lettura di un testo sul video: http://it.youtube.com/watch?v=bW_zDILeevY25R.Polillo - Marzo 2013
  • 26. Misurare la legibilityR.Polillo - Marzo 201326 Si può misurare sulla base del tempo medio utilizzato daun campione di soggetti per leggere determinati brani ditesto Varie tecniche (es.: ricerca della prima occorrenza diuna fra più parole date nel testo)
  • 27. Legibility: che cosa si può direR.Polillo - Marzo 201327Essa 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 finoraottenuti sonovolte contradditori e non si riesce a ricavare regole generali semplici
  • 28. R.Polillo - Marzo 201328Diffidate delle indicazioni che trovate sulweb:sono spesso prive di fondamento scientifico
  • 29. In sintesi, che cosa si può dire…R.Polillo - Marzo 201329 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 dellosfondo (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)
  • 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?, UsabilityNews, Summer 2000)30R.Polillo - Marzo 2013
  • 31. Un altro test di leggibilità (video)Tempo medio di lettura in sec(testi di circa 2 pag, con font di 12 punti, 22 utenti)(Bernard et al, 2001)TahomaTimesCourierArial31R.Polillo - Marzo 2013
  • 32. Il font VerdanaR.Polillo - Marzo 201332Progettato da Matthew Carter per Microsoft (1996) per essere benleggibile su video, anche per piccole dimensioni, oggi moltodiffuso:Caratteri larghi eben differenziati,minuscole alte eben leggibiliI (con grazie),l e 1 bendifferenziati
  • 33. Maiuscole o minuscoleÈ POSSIBILE VERIFICARE CHE LA LEGIBILITY DI UNTESTO SCRITTO ESCLUSIVAMEN-TE IN CARATTERIMAIUSCOLI È MINORE DI QUELLA DI UN TESTOSCRITTO IN CARATTERI MAIUSCOLI E MINUSCOLIÈ possibile verificare che la lrgibility di un testo scrittoesclusivamente in caratteri maiuscoli è minore di quella diun testo scritto in caratteri maiuscoli e minuscoli33R.Polillo - Marzo 2013
  • 34. Infatti...L’uso delle minuscoleassocia ad ogni parolaun “pattern” riconoscibiledato dalle ascendenti edalle discendenti34R.Polillo - Marzo 2013
  • 35. Esempio35R.Polillo - Marzo 2013
  • 36. CorsivoR.Polillo - Marzo 201336Il corsivo comunque si legge male sul video,perchè enfatizza l’”effetto sega” creato daipixel discreti:
  • 37. Corsivo: esempio37R.Polillo - Marzo 2013
  • 38. Dimensione dei caratteri: unesperimento(Williams, Scharff) Usare preferibilmente almeno caratteri in corpo 1238R.Polillo - Marzo 2013
  • 39. AllineamentiLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat.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 idest laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat.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 idest laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat.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 idest laborum.Destra:Sinistra:Centro:39R.Polillo - Marzo 2013
  • 40. Allineamenti (segue) E’ opinione corrente che l’allineamento asinistra sia preferibile, in quanto fornisce una“ancora visiva” per i movimenti saccadici di“ritorno a capo” Tale opinione non sembra supportata daconferme sperimentali (Un recente esperimento da noi condotto nonmostra alcuna differenza nei tempi di letturadi testi allineati a sx o a dx)40R.Polillo - Marzo 2013
  • 41. Impaginazione“a pacchetto”Può esseresgradevole incolonne strette(spazi vuoti)41R.Polillo - Marzo 2013
  • 42. Tinta Molte opinioni, ma poche supportate da esperimentirigorosi Alcune opinioni diffuse sono fra loro contraddittorie Alcuni studi mostrano che la tinta non influiscesignificativamente sulla leggibilità, la quale invecerisulta influenzata da luminosità e contrasto con losfondo; altri studi mostrano risultati diversi42R.Polillo - Marzo 2013
  • 43. Polarità Negativa: caratteri scuri su fondo chiaro Positiva: caratteri chiari su fondo scuroAnche in questo caso i risultati non sono univoci,ma sembra che prevalga la convinzione che lapolarità negativa sia più leggibile43R.Polillo - Marzo 2013
  • 44. Ancora sui colori del testo- caratteri di colori lontani sullo spettrovengono messi a fuoco su piani diversi- l’occhio è poco sensibile al blu (soprattuttonegli anziani)44R.Polillo - Marzo 2013
  • 45. Messa a fuocoLENTEBluVerdeRossoBluVerdeRossoABCFUOCO SULLA RETINALUCEBIANCAA causa della diffrazione sul cristallino, difficoltà di messa afuoco contemporanea, sulla retina, di colori diversi agli estremidello spettro (immagine stereoscopoca, fatica)Quindi: evitare l’uso di scritte in cui siano vicini caratteri di colorisaturi agli estremi dello spettro (es.: rosso-blu; giallo-porpora)45R.Polillo - Marzo 2013
  • 46. Da questo esempio si vede la difficoltà di messa a fuococontemporanea del rosso e del blu: da molti le righe di questidue colori vengono viste, per i motivi descritti, come se fosserocollocate a distanze diverse dagli occhi.Questo fenomeno non si verifica se si usano due colori chesi trovino fra loro più vicini sullo spettro visibile, come si puòfacilmente verificare da questo secondo esempio, che nondovrebbe presentare l’effetto tridimensionale di cui sopra.46R.Polillo - Marzo 2013
  • 47. ReadabilityR.Polillo - Marzo 201347Un problema molto più complicatoNel mezzo del cammin di nostra vitaMi ritrovai per una selva oscura
  • 48. Readability indexesR.Polillo - Marzo 201348Cercano di “misurare” la comprensibilità di untesto utilizzando delle misure semplici (es.:numero di parole in una frase, ecc.)
  • 49. L’indice GulpeaseR.Polillo - Marzo 201349 Definito nel 1988 dal GULP dell’Università di Roma LaSapienza, sulla base di ricerche di Costa e De Mauro, perla lingua italiana Considera solo la lunghezza delle parole e la lunghezzadelle frasi (in lettere), ed è di facile calcolo Complementare all’indice è la definizione delvocabolario comune della lingua italiana, che considerala “notorietà” del lessico (es.: vocabolario base noto achi ha la licenza media inferiore, circa 7000 termini) Servizio di valutazione via mail suhttp://www.eulogos.net/it/censor/default.htm
  • 50. VOCABOLARIODI BASE(7000 lessemi)VOCABOLARIOCOMUNEVOCABOLARIOFONDAMENTALE(2000lessemi)50 R.Polillo - Marzo 2013
  • 51. 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 superiore51R.Polillo - Marzo 2013
  • 52. I manuali di stile Indicazioni per la redazione di “buoni” testi Ovviamente non hanno convalidasperiementale52R.Polillo - Marzo 2013
  • 53. Linee guida: esempioR.Polillo - Marzo 2013531. Scrivere frasi brevi2. Usare parole del linguaggio comune3. Usare pochi termini tecnici e spiegarli4. Usare poco abbreviazioni e sigle5. Usare verbi nella forma attiva e affermativa6. Legare le parole e le frasi in modo breve e chiaro7. Usare in maniera coerente le maiuscole,le minuscole e la punteggiatura8. Evitare neologismi, parole straniere e latinismi9. Uso del congiuntivo10. Usare in maniera corretta le possibilitàdi composizione grafica del testo
  • 54. Il testo nel web Il processo di lettura di una pagina web è diverso daquello di un testo normale, ed è più simile alla letturadella pagina di un quotidiano L’occhio “scorre” qua e là, soffermandosi brevementesu quegli elementi che forniscono “indizi” suicontenuti (vedi esperimenti di eye tracking) Il testo deve essere organizzato di conseguenza(“scannable text”)54R.Polillo - Marzo 2013
  • 55. “Scannable text” Titoli e sottotitoli brevi e significativi Parole chiave evidenziate(neretto, sottolineato, link ipertestuali, …) Paragrafi brevi: un concetto per paragrafo Pagine brevi: evitare o ridurre lo scrolling “Metà delle parole di un testo tradizionale” “Inverted pyramid style” “Get to the point”55R.Polillo - Marzo 2013
  • 56. Stile a piramide invertitaSINTESIDETTAGLIOMATERIALEAGGIUNTIVOlinklink56R.Polillo - Marzo 2013
  • 57. 123Stile a piramide invertita:esempi57R.Polillo - Marzo 2013
  • 58. Questo testo nonè stato pensatoper il web!58 R.Polillo - Marzo 2013
  • 59. “Wall of text”Fonte: Jakob Nielsen, www.useit.com59R.Polillo - Marzo 2013
  • 60. Questo testo nonè stato pensatoper il web!60 R.Polillo - Marzo 2013
  • 61. Questo testo nonè stato pensatoper il web!61 R.Polillo - Marzo 2013