Formattazione visiva per_i_testi

427 views

Published on

  • Be the first to comment

Formattazione visiva per_i_testi

  1. 1. Formattazione visiva per itesti
  2. 2. •  Font•  Dimensione e colori•  Interlinea•  Evidenziature•  Margini•  Link•  Liste
  3. 3. Font•  Font graziati (serif)•  Font bastoni (sans-serif)•  Font proporzionali•  Font monospaziati
  4. 4. Font graziati G Grazie
  5. 5. •  Usati per una maggior eleganza e morbidezza•  Si credeva che le grazie accompagnassero dolcemente l’occhio da una lettera all’altra•  Nei giornali e nei libri usati per il corpo del testo
  6. 6. Font graziati• Times • Century Schoolbook• Georgia
  7. 7. Font bastoni (o senza grazie) T
  8. 8. Font bastoni•  Meno leggibili, ma più perentori•  Aumentando la dimensione, la leggibilità non è un problema•  Venivano usati spesso nei titoli dei giornali
  9. 9. Font bastoni•  Arial• Trebuchet• Lucida sans• Verdana• Futura•  Impact
  10. 10. Font proporzionali•  La distanza fra le lettere dipende dalla forma della lettera•  Ogni lettera occupa un ingombro differente
  11. 11. Font monospaziati•  Ogni lettera occupa la medesima dimensione, e la distanza fra gli ingombri delle lettere è identicaPiccolo esempio 1230
  12. 12. Font monospaziati•  Ogni lettera occupa la medesima dimensione, e la distanza fra gli ingombri delle lettere è identica
  13. 13. Font monospaziati•  Nascono con la macchina da scrivere•  Sono usati non per i testi, ma per il codice di programmazione o html•  Non a caso è il font di default di Explorer per mostrare il codice
  14. 14. Font monospaziati•  Courier•  Monaco •  OCR
  15. 15. Aria di famiglia•  Il nome del font-family identifica famiglie di carattere che condividano le metriche di fondo, le forme, le linee•  Esistono molte varianti di alcune di esse: Futura è una di quelle che ha il maggior numero di versioni•  Ogni tipo di carattere di una famiglia ha le metriche per calcolare italico, grassetto, sottolineato
  16. 16. Questione di risoluzione•  A causa della bassa risoluzione del monitor i font pensati per la stampa non si vedono bene, sono sgranati•  Per sopperire a questa caratteristica alcuni programmi usano una tecnica chiamata anti-aliasing
  17. 17. Anti-alias
  18. 18. Antialiasing in piccolo
  19. 19. I browser e gli screen font•  Explorer di default non applica antialiasing, dunque il testo è sgranato•  Per risolvere questi problemi, Microsoft commissiona a Mattew Carter un set di Screen-font da usare sui propri sistemi operativi
  20. 20. Verdana e Georgia•  1994: Verdana•  In seguito: Georgia•  Lettere di forma chiara anche a piccole dimensioni•  Sfruttano la matrice di pixel usando linee verticali, orizzontali e inclinate a 45, dove non c’è bisogno di correzioni•  Spaziatura regolare•  Studio del grassetto•  Esistono per le famiglie sans-serif e serif
  21. 21. Browser e font•  In seguito ne sono stati ideati altri, come il Trebuchet e il Lucida, il Tahoma•  I browser quando vengono installati, installano automaticamente sul sistema molti font•  Per questa ragione, esiste una serie di famiglie di font che è più probabile che gli utenti abbiano
  22. 22. Font diffusi•  Arial•  Verdana•  Times New Roman•  Courier•  Georgia•  Trebuchet•  Lucida
  23. 23. Di fatto•  Si usano Verdana, Arial, Times New Roman, Georgia, Trebuchet, Courier
  24. 24. Dimensione•  Bernard: Sopra i 10 px non c’è significativa differenza di accuratezza di lettura fra screen font e font tradizionali•  Times e Arial: lettura più veloce rispetto a Courier e Georgia•  Leggibilità percepita: Courier, Arial, Georgia (in parziale contraddizione con i dati reali)
  25. 25. Piacevolezza•  Georgia meglio di Arial e Courier•  Times più piacevole di Courier•  Ma…•  Carattere preferito: Verdana•  Verdana ha le prestazioni mediamente buone, anche se non eccellenti, in tutte le misure
  26. 26. Coerenza•  Usare un solo tipo di carattere per i testi: Verdana, o Arial, o Times, o Georgia•  Usare un solo tipo di carattere per i titoli•  A volte si tende a invertire la convenzione cartacea: Verdana per i testi e Georgia per i titoli!•  Coerenza anche nelle dimensioni
  27. 27. Colori•  Nero su bianco•  L’uso del grigio crea seri problemi di leggibilità, affatica•  Nero su giallo
  28. 28. Interlinea•  L’interlinea di circa 1.5 o leggermente superiore aumenta la leggibilità sulla carta•  Purtroppo questo non pare confermato sul web•  L’interlinea aumentata è scomoda per gli ipovedenti
  29. 29. Evidenziature•  Usare il grassetto•  Non il corsivo•  Non altri colori
  30. 30. A proposito del corsivo•  Inizialmente, con una cattiva resa a monitor, il corsivo rendeva le lettere ancora più seghettate•  I sistemi operativi più recenti hanno fatto passi avanti nella resa dei caratteri: ora il corsivo, se a caratteri abbastanza grandi e per piccole porzioni di testo, può risultare comunque leggibile
  31. 31. Margini•  I margini a destra e a sinistra aumentano la velocità di lettura e persino la comprensione!•  Spezzare i margini tra i paragrafi
  32. 32. Link•  No ai link dello stesso colore del testo!•  I link sottolineati sono meglio, lontani dai menu•  Link esterni segnalati come tali –  Lo stato hover –  Lo stato active –  Lo stato visited
  33. 33. Link visitati•  Uno degli indizi più importanti per gli utenti è il cambio di colore per i link già visitati•  A questo è correlata una migliore usabilità (una forma di feedback)
  34. 34. Tipi di layout•  Fisso•  Fluido –  Puro –  Misto•  Elastico
  35. 35. Layout fisso•  Il layout fisso ha le dimensioni dell’area utile definite in pixel, e non modificabili, a qualunque risoluzione del monitor•  Consente di impaginare anche le immagini in maniera precisa, perché gli allineamenti vengono rispettati•  I caratteri però hanno comunque una resa leggermente differente su diversi browser e sistemi operativi•  Può essere centrato o allineato a sinistra (raramente a destra)
  36. 36. Layout fluido•  Puro: le dimensioni orizzontali delle aree (colonne) sono definite in percentuale•  Si adattano a tutte le dimensioni della finestra•  A dimensioni piccole, però, alcune parole indivisibili sforano•  A dimensioni grandi, le righe di testo sono molto lunghe
  37. 37. Layout fluido misto•  Solo una colonna è libera di variare, mentre l’altra o le altre sono bloccate in pixel•  Consente di impaginare meglio alcune aree (menu, immagini)•  Riga comunque lunga a dimensioni grandi
  38. 38. Layout elastico•  Le dimensioni sono proporzionali, e in più, dipendono dalla grandezza del testo!•  Un testo più grande genera impaginati più grandi•  Il problema è che l’impaginato facilmente diventa troppo grande e fuoriesce dall’area visibile•  …o diventa troppo piccolo ed è illeggibile•  Difficile impaginare i form!
  39. 39. Comparazione•  Fluido•  Fisso a sinistra•  Fisso CentratoNessuna differenza in prestazione, ma i soggetti tendono a preferire il fluido per leggere e trovare informazioni. A sinistra è il meno apprezzato.(Bernard e Larsen, 2001)
  40. 40. Riepilogo•  Testi più piccoli a 10 px (ma meglio di più)•  Testi normali 12-14 px (tendenza al rialzo per effetto di aumento età e risoluzioni monitor)•  Colori molto contrastati•  Titoli e link distinti•  Parole chiave in grassetto•  Margini laterali abbondanti (o layout centrato)•  Font standard e sicuri (o graceful degradation nei CSS)
  41. 41. Fine

×