Template. Siti Web Parola visuale, analisi del lettore, usability dei testi ed accessibilità

Transcript

1 UniTE lezione #2 WINTER Template Siti Web Parola visuale, analisi del lettore, usability dei testi ed accessibilità dott. Paolo Gatti -

2 Agenda WINTER Principi generali Template Comunicare sul web Il lettore del web Usability dei testi Accessibilità

3 Principi generali Il testo sul web è una cipolla :

4 Comunicare sul web.. Sul web non ci sono solo parole: la grafica è parte integrante del processo di scrittura. Il testo, quindi, convive con: i colori gli spazi le immagini gli elementi grafici paratestuali

5 Parola visuale: pagine dense La densità: Provoca confusione Allunga di tempi Annulla l'informazione

6 Parola visuale: pagine ariose Più semplici da leggere, più veloci e con maggior piacere da parte dell'utente

7 Parola visuale: esempi a confronto Tra i siti più brutti: Bakers Junction

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 Discontinuità: la lettura a salti Il lettore web è un vero lettore? L 80% dei lettori scorre la pagina!!

10 Il rapporto Eyetrack Osservando sperimentalmente i comportamenti degli utenti attraverso l analisi dei movimenti oculari, dei tempi di permanenza e dei clic sui link...

11 Il rapporto Eyetrack In generale è stato rilevato che... Cosa vi ricorda?! Il Modello ad F!

12 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)

13 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)

14 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: Titoli Sottotitoli Grassettature Link Punti Elenco Testo semplice

15 Elementi di ancoraggio

16 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: 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 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 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!

18 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

19 Usability dei testi: consigli per l'uso (3)

20 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

21 Usability dei testi: consigli per l'uso (5)

22 Usability dei testi: consigli per l'uso (6)

23 Accessibilità dei siti web 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!

24 Accessibilità Legge Stanca 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.

25 Accessibilità Legge Stanca 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.

26 Aumentare l'accessibilità 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.

27 Valutare l'accessibilità 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

28 That's all! DOMANDE?! :)

29 Credits Giacomo Mason n/usabilita-e-scrittura-dei-testi-per-il-web