UniTE lezione #2               WINTER                Template        Siti WebParola visuale, analisidel lettore, usability...
Agenda          WINTERPrincipi generali         TemplateComunicare sul webIl lettore del webUsability dei testiAccessibilità
Principi generaliIl testo sul web è una “cipolla”:
Comunicare sul web..Sul web non ci sono solo parole: la grafica èparte integrante del processo discrittura.Il testo, quind...
Parola visuale: pagine denseLa densità:Provoca confusioneAllunga di tempiAnnulla linformazione
Parola visuale: pagine ariosePiù semplici da leggere, più veloci e conmaggior piacere da parte dellutente
Parola visuale: esempi a confrontoTra i siti più brutti: Bakers Junction
Caratteristiche principali della lettura web  L’occhio è attratto dalle discontinuità  (spazi, colori...).  Si cerca di ci...
Discontinuità: la lettura “a salti”Il lettore web è un vero lettore? L’80% dei lettori                “scorre” la pagina!!
Il rapporto “Eyetrack”Osservando sperimentalmente i comportamenti degliutenti attraverso l’analisi dei movimenti oculari, ...
Il rapporto “Eyetrack”In generale è stato rilevato che...Cosa vi ricorda?! Il Modello ad F!
Leffetto della dimensione dei fontSe volete spingere a leggere più a lungo la home,usate font piccoli (11) se volete aiuta...
Rapporto tra testo e azioneSe volete spingere a leggere più a lungo la home,usate font piccoli (11) se volete aiutare un r...
Elementi di “ancoraggio”Le immagini e i titoli sono il primo elemento a cui sipresta attenzione, indipendentemente dalla l...
Elementi di “ancoraggio”
Usability dei testiIl testo sul web deve essere riadattato rispettoalla carta stampata! Sul video la leggibilità si riduce...
Usability dei testi: consigli “per luso”Di seguito una serie di consigli utili: è meglio impaginare il testo in una sola c...
Usability dei testi: consigli “per luso” (2) evitare i testi in maiuscolo (minore leggibilità e secondo le netiquette, scr...
Usability dei testi: consigli “per luso” (3)
Usability dei testi: consigli “per luso” (4) Percezione degli utilizzatori relativamente al font utilizzato: Le resa migli...
Usability dei testi: consigli “per luso” (5)
Usability dei testi: consigli “per luso” (6)
Accessibilità dei siti webLaccessibilità è quella caratteristica dei Siti Webche li rende usabili in modo efficace e conso...
Accessibilità – Legge StancaLaccessibilità dei Siti Web è regolata in Italia dauna legge: Legge 4/2004 o Legge Stanca, dal...
Accessibilità – Legge StancaOltre a tutte le pubbliche amministrazioni, le leggeStanca obbliga altre realtà ad avere i pro...
Aumentare laccessibilitàAl fine di aumentare laccessibilità di un sito web, èbene seguire le seguenti indicazioni: ricorda...
Valutare laccessibilitàUno dei primi passi per creare contenuti accessibili, èil saper valutare laccessibilità di un sito ...
Thats all!DOMANDE?! :)
Credits     Giacomo Masonhttp://www.slideshare.net/giacomo.mason/usabilita-e-scrittura-dei-testi-per-il-web
Upcoming SlideShare
Loading in...5
×

Siti Web: parola visuale, analisi del lettore, usability dei testi ed accessibilità

405

Published on

Lezione #2 di Paolo Gatti all'Università degli Studi di Teramo, Facoltà di Scienze della Comunicazione, avente come tema "Siti Web: parola visuale, analisi del lettore, usability dei testi ed accessibilità".

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
405
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
17
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Siti Web: parola visuale, analisi del lettore, usability dei testi ed accessibilità

  1. 1. UniTE lezione #2 WINTER Template Siti WebParola visuale, analisidel lettore, usability dei testi ed accessibilità dott. Paolo Gatti – pgatti@unite.it www.paologatti.it - www.webedintorni.eu
  2. 2. Agenda WINTERPrincipi generali TemplateComunicare sul webIl lettore del webUsability dei testiAccessibilità
  3. 3. Principi generaliIl testo sul web è una “cipolla”:
  4. 4. Comunicare sul web..Sul web non ci sono solo parole: la grafica èparte integrante del processo discrittura.Il testo, quindi, convive con: i colori gli spazi le immagini gli elementi grafici paratestuali
  5. 5. Parola visuale: pagine denseLa densità:Provoca confusioneAllunga di tempiAnnulla linformazione
  6. 6. Parola visuale: pagine ariosePiù semplici da leggere, più veloci e conmaggior piacere da parte dellutente
  7. 7. Parola visuale: esempi a confrontoTra i siti più brutti: Bakers Junction
  8. 8. Caratteristiche principali della lettura web 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 Vi riconoscete in questa analisi? Io sì!
  9. 9. Discontinuità: la lettura “a salti”Il lettore web è un vero lettore? L’80% dei lettori “scorre” la pagina!!
  10. 10. Il rapporto “Eyetrack”Osservando sperimentalmente i comportamenti degliutenti attraverso l’analisi dei movimenti oculari, deitempi di permanenza e dei clic sui link...
  11. 11. Il rapporto “Eyetrack”In generale è stato rilevato che...Cosa vi ricorda?! Il Modello ad F!
  12. 12. Leffetto della dimensione dei fontSe volete spingere a leggere più a lungo la home,usate font piccoli (11) se volete aiutare un rapidoscan delle cose essenziali usate font grandi (12-14)
  13. 13. Rapporto tra testo e azioneSe volete spingere a leggere più a lungo la home,usate font piccoli (11) se volete aiutare un rapidoscan delle cose essenziali usate font grandi (12-14)
  14. 14. Elementi di “ancoraggio”Le immagini e i titoli sono il primo elemento a cui sipresta attenzione, indipendentemente dalla lorocollocazione nella pagina. Le immagini con i visi inmaniera ancora più accentuata.Allinterno del testo alcuni elementi vengonopercepiti prima di altri: Titoli Sottotitoli Grassettature Link Punti Elenco Testo semplice
  15. 15. Elementi di “ancoraggio”
  16. 16. Usability dei testiIl testo sul web deve essere riadattato rispettoalla carta stampata! 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..). I blocchi di testo troppi fitti spaventano il lettore e non danno “elementi di ancoraggio”.
  17. 17. Usability dei testi: consigli “per luso”Di seguito una serie di consigli utili: è meglio impaginare il testo in una sola colonna larga circa 450/500 pixel e non oltre, così da renderla adeguata alla lettura umana; è opportuno limitare la lunghezza dei testi tra 500 e 3.000 caratteri per un max di 2 o 3 schermate (ricerche confermano che la maggior parte degli utenti non supera le 2,5 scermate); in alternativa, è meglio utilizzare un indice o la “paginazione”; in caso di pagine lunghe, potrebbero essere utili bottoncini per tornare in alto; evitare il giustificato: peggiora la leggibilità! evitare lallinamento al centro → allineamento a sx!
  18. 18. Usability dei testi: consigli “per luso” (2) evitare i testi in maiuscolo (minore leggibilità e secondo le netiquette, scrivere in maiuscolo vuol dire URLARE!) ridurre al minimo i testi in corsivo (magari solo per parole particolari, poiché aumenta leffetto “seghettatura” e quindi diminuisce la leggibilità); ridurre al minimo i testi sottolineati (meglio il grassetto); Font migliori: Arial, Verdana Font peggiori: Times New Roman, Garamond
  19. 19. Usability dei testi: consigli “per luso” (3)
  20. 20. Usability dei testi: consigli “per luso” (4) Percezione degli utilizzatori relativamente al font utilizzato: Le resa migliore relativamente ai tempi di lettura si ha con caratteri con corpo 12 Verdana o Thaoma
  21. 21. Usability dei testi: consigli “per luso” (5)
  22. 22. Usability dei testi: consigli “per luso” (6)
  23. 23. Accessibilità dei siti webLaccessibilità è quella caratteristica dei Siti Webche li rende usabili in modo efficace e consoddisfazione anche da persone che si trovano incondizioni "di svantaggio", quali, per esempio, lepersone disabili, ma anche le persone anziane,quelle con bassa scolarità, persone contecnologia hardware e software obsoleta,immigrati, e così via. Lobbiettivo è non escludere nessuno dalla fruizione dei contenuti!
  24. 24. Accessibilità – Legge StancaLaccessibilità dei Siti Web è regolata in Italia dauna legge: Legge 4/2004 o Legge Stanca, dalnome del ministro che lha promossa. Questalegge, intitolata "Disposizioni per favorirelaccesso dei soggetti disabili agli strumentiinformatici" si applica alla pubblicaamministrazione, ma costituisce anche un modelloper i privati.La Legge definisce tutta una serie di requisiti darispettare e definisce delle procedure perverificare laccessibilità di un Sito Web.
  25. 25. Accessibilità – Legge StancaOltre a tutte le pubbliche amministrazioni, le leggeStanca obbliga altre realtà ad avere i propri sitiaccessibili: enti pubblici economici; aziende private concessionarie di servizi pubblici; aziende municipalizzate regionali; enti di assistenza e di riabilitazione pubblici; aziende di trasporto e di telecomunicazione a prevalente partecipazione di capitale pubblico; aziende appaltatrici di servizi informatici.
  26. 26. Aumentare laccessibilitàAl fine di aumentare laccessibilità di un sito web, èbene seguire le seguenti indicazioni: ricordare 2 principi fondamentali: lutente sa cosa vuole e vuole trovarlo; lutente non vuole perdere tempo. rendere ben visibili in home page le informazioni più importanti; parlare il linguaggio dellutente; essere coerenti (nel linguaggio, nella grafica, negli effetti, nella presentazione); essere consistenti (strumenti di navigazione, colori, caratteri, grafiche, audio, layout, …); velocità: il sito si dovrebbe caricare in max 10 sec.
  27. 27. Valutare laccessibilitàUno dei primi passi per creare contenuti accessibili, èil saper valutare laccessibilità di un sito web: validazione del codice HTML / XHTML (e CSS) → HTML Validator e CSS Validator; validare laccessibilità → difficile automaticamente ma The Wave è un buon punto di partenza; controllare laccessibilità della tastiera; provare la pagina con uno screen reader; Controllare la conformità della pagina alle WCAG→ WCAG Web Content Accessibility Guidelines versione 2.0 divise per priorità: 1 (A) , 2 (AA) e 3 (AAA) – Link agli strumenti di valutazione Prevedere test pratici con gli utenti disabili
  28. 28. Thats all!DOMANDE?! :)
  29. 29. Credits Giacomo Masonhttp://www.slideshare.net/giacomo.mason/usabilita-e-scrittura-dei-testi-per-il-web
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×