Siti Web: parola visuale, analisi del lettore, usability dei testi ed accessibilità
-
Upload
bsdlover -
Category
Technology
-
view
382 -
download
2
description
Transcript of Siti Web: parola visuale, analisi del lettore, usability dei testi ed accessibilità
![Page 1: Siti Web: parola visuale, analisi del lettore, usability dei testi ed accessibilità](https://reader034.fdocumenti.com/reader034/viewer/2022052523/5557ea41d8b42a200d8b45aa/html5/thumbnails/1.jpg)
WINTERTemplateSiti Web
Parola visuale, analisi del lettore, usability dei
testi ed accessibilitàdott. Paolo Gatti – [email protected]
www.paologatti.it - www.webedintorni.eu
UniTE lezione #2
![Page 2: Siti Web: parola visuale, analisi del lettore, usability dei testi ed accessibilità](https://reader034.fdocumenti.com/reader034/viewer/2022052523/5557ea41d8b42a200d8b45aa/html5/thumbnails/2.jpg)
WINTERTemplate
AgendaPrincipi generali
Comunicare sul web
Il lettore del web
Usability dei testi
Accessibilità
![Page 3: Siti Web: parola visuale, analisi del lettore, usability dei testi ed accessibilità](https://reader034.fdocumenti.com/reader034/viewer/2022052523/5557ea41d8b42a200d8b45aa/html5/thumbnails/3.jpg)
Il testo sul web è una “cipolla”:
Principi generali
![Page 4: Siti Web: parola visuale, analisi del lettore, usability dei testi ed accessibilità](https://reader034.fdocumenti.com/reader034/viewer/2022052523/5557ea41d8b42a200d8b45aa/html5/thumbnails/4.jpg)
Sul web non ci sono solo parole: la grafica è parte integrante del processo di scrittura.
Il testo, quindi, convive con:
i colorigli spazile immaginigli elementi grafici paratestuali
Comunicare sul web..
![Page 5: Siti Web: parola visuale, analisi del lettore, usability dei testi ed accessibilità](https://reader034.fdocumenti.com/reader034/viewer/2022052523/5557ea41d8b42a200d8b45aa/html5/thumbnails/5.jpg)
La densità:
Provoca confusione
Allunga di tempi
Annulla l'informazione
Parola visuale: pagine dense
![Page 6: Siti Web: parola visuale, analisi del lettore, usability dei testi ed accessibilità](https://reader034.fdocumenti.com/reader034/viewer/2022052523/5557ea41d8b42a200d8b45aa/html5/thumbnails/6.jpg)
Parola visuale: pagine ariose
Più semplici da leggere, più veloci e con maggior piacere da parte dell'utente
![Page 7: Siti Web: parola visuale, analisi del lettore, usability dei testi ed accessibilità](https://reader034.fdocumenti.com/reader034/viewer/2022052523/5557ea41d8b42a200d8b45aa/html5/thumbnails/7.jpg)
Parola visuale: esempi a confronto
Tra i siti più brutti: Bakers Junction
![Page 8: Siti Web: parola visuale, analisi del lettore, usability dei testi ed accessibilità](https://reader034.fdocumenti.com/reader034/viewer/2022052523/5557ea41d8b42a200d8b45aa/html5/thumbnails/8.jpg)
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ì!
![Page 9: Siti Web: parola visuale, analisi del lettore, usability dei testi ed accessibilità](https://reader034.fdocumenti.com/reader034/viewer/2022052523/5557ea41d8b42a200d8b45aa/html5/thumbnails/9.jpg)
Discontinuità: la lettura “a salti”
Il lettore web è un vero lettore? L’80% dei lettori “scorre” la pagina!!
![Page 10: Siti Web: parola visuale, analisi del lettore, usability dei testi ed accessibilità](https://reader034.fdocumenti.com/reader034/viewer/2022052523/5557ea41d8b42a200d8b45aa/html5/thumbnails/10.jpg)
Il rapporto “Eyetrack”
Osservando sperimentalmente i comportamenti degli utenti attraverso l’analisi dei movimenti oculari, dei tempi di permanenza e dei clic sui link...
![Page 11: Siti Web: parola visuale, analisi del lettore, usability dei testi ed accessibilità](https://reader034.fdocumenti.com/reader034/viewer/2022052523/5557ea41d8b42a200d8b45aa/html5/thumbnails/11.jpg)
Il rapporto “Eyetrack”
In generale è stato rilevato che...
Cosa vi ricorda?! Il Modello ad F!
![Page 12: Siti Web: parola visuale, analisi del lettore, usability dei testi ed accessibilità](https://reader034.fdocumenti.com/reader034/viewer/2022052523/5557ea41d8b42a200d8b45aa/html5/thumbnails/12.jpg)
L'effetto della dimensione dei font
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)
![Page 13: Siti Web: parola visuale, analisi del lettore, usability dei testi ed accessibilità](https://reader034.fdocumenti.com/reader034/viewer/2022052523/5557ea41d8b42a200d8b45aa/html5/thumbnails/13.jpg)
Rapporto tra testo e azione
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)
![Page 14: Siti Web: parola visuale, analisi del lettore, usability dei testi ed accessibilità](https://reader034.fdocumenti.com/reader034/viewer/2022052523/5557ea41d8b42a200d8b45aa/html5/thumbnails/14.jpg)
Elementi di “ancoraggio”
Le immagini e i titoli sono il primo elemento a cui si presta attenzione, indipendentemente dalla loro collocazione nella pagina. Le immagini con i visi in maniera ancora più accentuata.
All'interno del testo alcuni elementi vengono percepiti prima di altri:
TitoliSottotitoliGrassettatureLinkPunti ElencoTesto semplice
![Page 15: Siti Web: parola visuale, analisi del lettore, usability dei testi ed accessibilità](https://reader034.fdocumenti.com/reader034/viewer/2022052523/5557ea41d8b42a200d8b45aa/html5/thumbnails/15.jpg)
Elementi di “ancoraggio”
![Page 16: Siti Web: parola visuale, analisi del lettore, usability dei testi ed accessibilità](https://reader034.fdocumenti.com/reader034/viewer/2022052523/5557ea41d8b42a200d8b45aa/html5/thumbnails/16.jpg)
Usability dei testi
Il testo sul web deve essere riadattato rispetto alla 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”.
![Page 17: Siti Web: parola visuale, analisi del lettore, usability dei testi ed accessibilità](https://reader034.fdocumenti.com/reader034/viewer/2022052523/5557ea41d8b42a200d8b45aa/html5/thumbnails/17.jpg)
Usability dei testi: consigli “per l'uso”
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 l'allinamento al centro → allineamento a sx!
![Page 18: Siti Web: parola visuale, analisi del lettore, usability dei testi ed accessibilità](https://reader034.fdocumenti.com/reader034/viewer/2022052523/5557ea41d8b42a200d8b45aa/html5/thumbnails/18.jpg)
Usability dei testi: consigli “per l'uso” (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 l'effetto “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
![Page 19: Siti Web: parola visuale, analisi del lettore, usability dei testi ed accessibilità](https://reader034.fdocumenti.com/reader034/viewer/2022052523/5557ea41d8b42a200d8b45aa/html5/thumbnails/19.jpg)
Usability dei testi: consigli “per l'uso” (3)
![Page 20: Siti Web: parola visuale, analisi del lettore, usability dei testi ed accessibilità](https://reader034.fdocumenti.com/reader034/viewer/2022052523/5557ea41d8b42a200d8b45aa/html5/thumbnails/20.jpg)
Usability dei testi: consigli “per l'uso” (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
![Page 21: Siti Web: parola visuale, analisi del lettore, usability dei testi ed accessibilità](https://reader034.fdocumenti.com/reader034/viewer/2022052523/5557ea41d8b42a200d8b45aa/html5/thumbnails/21.jpg)
Usability dei testi: consigli “per l'uso” (5)
![Page 22: Siti Web: parola visuale, analisi del lettore, usability dei testi ed accessibilità](https://reader034.fdocumenti.com/reader034/viewer/2022052523/5557ea41d8b42a200d8b45aa/html5/thumbnails/22.jpg)
Usability dei testi: consigli “per l'uso” (6)
![Page 23: Siti Web: parola visuale, analisi del lettore, usability dei testi ed accessibilità](https://reader034.fdocumenti.com/reader034/viewer/2022052523/5557ea41d8b42a200d8b45aa/html5/thumbnails/23.jpg)
L'accessibilità è quella caratteristica dei Siti Web che li rende usabili in modo efficace e con soddisfazione anche da persone che si trovano in condizioni "di svantaggio", quali, per esempio, le persone disabili, ma anche le persone anziane, quelle con bassa scolarità, persone con tecnologia hardware e software obsoleta, immigrati, e così via.
L'obbiettivo è non escludere nessuno dalla fruizione dei contenuti!
Accessibilità dei siti web
![Page 24: Siti Web: parola visuale, analisi del lettore, usability dei testi ed accessibilità](https://reader034.fdocumenti.com/reader034/viewer/2022052523/5557ea41d8b42a200d8b45aa/html5/thumbnails/24.jpg)
L'accessibilità dei Siti Web è regolata in Italia da una legge: Legge 4/2004 o Legge Stanca, dal nome del ministro che l'ha promossa. Questa legge, intitolata "Disposizioni per favorire l'accesso dei soggetti disabili agli strumenti informatici" si applica alla pubblica amministrazione, ma costituisce anche un modello per i privati.
La Legge definisce tutta una serie di requisiti da rispettare e definisce delle procedure per verificare l'accessibilità di un Sito Web.
Accessibilità – Legge Stanca
![Page 25: Siti Web: parola visuale, analisi del lettore, usability dei testi ed accessibilità](https://reader034.fdocumenti.com/reader034/viewer/2022052523/5557ea41d8b42a200d8b45aa/html5/thumbnails/25.jpg)
Oltre a tutte le pubbliche amministrazioni, le legge Stanca obbliga altre realtà ad avere i propri siti accessibili:
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.
Accessibilità – Legge Stanca
![Page 26: Siti Web: parola visuale, analisi del lettore, usability dei testi ed accessibilità](https://reader034.fdocumenti.com/reader034/viewer/2022052523/5557ea41d8b42a200d8b45aa/html5/thumbnails/26.jpg)
Al fine di aumentare l'accessibilità di un sito web, è bene seguire le seguenti indicazioni:
ricordare 2 principi fondamentali:l'utente sa cosa vuole e vuole trovarlo;
l'utente non vuole perdere tempo.
rendere ben visibili in home page le informazioni più importanti;
parlare il linguaggio dell'utente;
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.
Aumentare l'accessibilità
![Page 27: Siti Web: parola visuale, analisi del lettore, usability dei testi ed accessibilità](https://reader034.fdocumenti.com/reader034/viewer/2022052523/5557ea41d8b42a200d8b45aa/html5/thumbnails/27.jpg)
Uno dei primi passi per creare contenuti accessibili, è il saper valutare l'accessibilità di un sito web:
validazione del codice HTML / XHTML (e CSS) → HTML Validator e CSS Validator;
validare l'accessibilità → difficile automaticamente ma The Wave è un buon punto di partenza;
controllare l'accessibilità 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
Valutare l'accessibilità
![Page 28: Siti Web: parola visuale, analisi del lettore, usability dei testi ed accessibilità](https://reader034.fdocumenti.com/reader034/viewer/2022052523/5557ea41d8b42a200d8b45aa/html5/thumbnails/28.jpg)
DOMANDE?! :)
That's all!
![Page 29: Siti Web: parola visuale, analisi del lettore, usability dei testi ed accessibilità](https://reader034.fdocumenti.com/reader034/viewer/2022052523/5557ea41d8b42a200d8b45aa/html5/thumbnails/29.jpg)
Giacomo Mason
http://www.slideshare.net/giacomo.mason/usabilita-e-scrittura-dei-testi-per-il-web
Credits