SlideShare a Scribd company logo
1 of 165
Download to read offline
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"




Usabilità e scrittura
                                                                     dei testi per il web



                                                                                    Giacomo Mason, Febbraio 2010



                                                                     Usabilità e scrittura dei testi per il web          1/165          Giacomo Mason – Febbraio 2010
                                                                                                           Telecom Italia - confidenziale
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"     Agenda




                                                                                                    1) Principi generali

                                                                                                    2) Il lettore del web

                                                                                                    3) Usability dei testi

                                                                                                    4) Formattare i testi

                                                                                                    5) Strutturare i testi




                                                                     Usabilità e scrittura dei testi per il web   2/165      Giacomo Mason – Febbraio 2010
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"     Agenda




                                                                       1) Principi generali




                                                                     Usabilità e scrittura dei testi per il web   3/165   Giacomo Mason – Febbraio 2010
Principi Generali
                                                                      - Il testo sul web è una cipolla -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"




                                                                     1 - Contesto di lettura
                                                                     sul web e vincoli del
                                                                     mezzo

                                                                     2 - Aspetti di
                                                                     Usability

                                                                      3 - Aspetti di
                                                                      formattazione


                                                                        4 - Aspetti di
                                                                        strutturazione



                                                                       5 - Aspetti di stile


                                                                     Usabilità e scrittura dei testi per il web   4/165   Giacomo Mason – Febbraio 2010
Principi Generali
                                                                      - Progettare testi, progettare interfacce -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"



                                                                                                  Il testo sul web è anche un’interfaccia di
                                                                                                  azione


                                                                                                  Diversi tipi di testo si dispongono in modo
                                                                                                  diverso nell’asse interfaccia/trasparenza



                                                                           Etichette dei
                                                                               Menù
                                                                                           Link        Strilli
                                                                                                     cliccabili      Istruzioni
                                                                                                                  per l’interazione                             Articoli
                                                                                                                                      Pagine
                                                                      Interfaccia                                                     indice       Titoli e      Schede
                                                                                                                                                  sottotitoli   tecniche




                                                                                                                                                                        Testo
                                                                                                                                                                 “trasparente”


                                                                     Usabilità e scrittura dei testi per il web           5/165         Giacomo Mason – Febbraio 2010
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"     1: più interfaccia che testo




                                                                     Usabilità e scrittura dei testi per il web   6/165   Giacomo Mason – Febbraio 2010
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"     2: a metà tra testo e interfaccia




                                                                     Usabilità e scrittura dei testi per il web   7/165   Giacomo Mason – Febbraio 2010
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"     3: più testo che interfaccia




                                                                     Usabilità e scrittura dei testi per il web   8/165   Giacomo Mason – Febbraio 2010
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"     Differenti usi del testo

                                                                       Leggere la pagina


                                                                       Fare lo scanning per vedere se è quella giusta


                                                                       Fare lo scanning per localizzare un contenuto specifico


                                                                       Scegliere una voce da una lista


                                                                       Interagire con lo spazio web




                                                                     Usabilità e scrittura dei testi per il web   9/165   Giacomo Mason – Febbraio 2010
Principi Generali
                                                                      - L’inversione del rapporto testo/paratesto -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"




                                                                                          Carta                                                Web



                                                                                                                                      “Paratesto”
                                                                                        “Paratesto”




                                                                                                                                              Testo

                                                                                         Testo


                                                                                           Tutto ciò che sta “accanto”, “di contorno” al
                                                                                           testo, al “suo servizio”
                                                                                           Es.: titoli, riassunti, tabelle, schemi, figure,
                                                                                           decorazioni, ecc.


                                                                     Usabilità e scrittura dei testi per il web      10/165       Giacomo Mason – Febbraio 2010
Principi Generali
                                                                      - La parola visuale: la grafica -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"




                                                                             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




                                                                     Usabilità e scrittura dei testi per il web    11/165    Giacomo Mason – Febbraio 2010
Principi Generali
                                                                      - La parola visuale: dal web alla carta -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"




                                                                                                                                                    Fonte: Luisa Carrada
                                                                                                                                      Il mestiere di scrivere, Apogeo 2008

                                                                     Usabilità e scrittura dei testi per il web   12/165   Giacomo Mason – Febbraio 2010
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"




                                                                                                                    Da Roberto Polillo
                                                                                                                     http://www.slideshare.net/rpolillo/12progettare-il-testo
                                                                     Usabilità e scrittura dei testi per il web   13/165      Giacomo Mason – Febbraio 2010
Principi Generali
                                                                      - Parola visuale: pagine dense -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"




                                                                       La densità provoca confusione


                                                                       La densità allunga i tempi


                                                                       La densità annulla l’informazione




                                                                     Usabilità e scrittura dei testi per il web   14/165   Giacomo Mason – Febbraio 2010
Principi Generali
                                                                      - Parola visuale: pagine dense -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"




                                                                     Usabilità e scrittura dei testi per il web   15/165   Giacomo Mason – Febbraio 2010
Principi Generali
                                                                      - Pagine “ariose” -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"




                                                                     Usabilità e scrittura dei testi per il web   16/165   Giacomo Mason – Febbraio 2010
Principi Generali
                                                                      - La parola visuale: esempi a confronto -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"




                                                                     Usabilità e scrittura dei testi per il web   17/165   Giacomo Mason – Febbraio 2010
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"     Agenda




                                                                       2) Il lettore del web




                                                                     Usabilità e scrittura dei testi per il web   18/165   Giacomo Mason – Febbraio 2010
Il lettore del web
                                                                      - Un lettore particolare -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"




                                                                                               La pagina è una mappa



                                                                                      Le informazioni sono viste come
                                                                                      in un paesaggio visto dall’alto



                                                                               In questo paesaggio troviamo punti di
                                                                               riferimento: titoli, sottotitoli, Immagini,
                                                                                           colori, link, grassetti, testi




                                                                                                                             Da Luisa Carrada: scrivere per internet – Lupetti 1999

                                                                     Usabilità e scrittura dei testi per il web      19/165         Giacomo Mason – Febbraio 2010
Il lettore del web
                                                                      - Caratteristiche principali della lettura web -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"




                                                                        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




                                                                     Usabilità e scrittura dei testi per il web   20/165     Giacomo Mason – Febbraio 2010
Il lettore del web
                                                                      - Discontinuità: la lettura “a salti” -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"



                                                                              La lettura “classica”…                       … e la lettura web




                                                                          Il lettore web è un vero lettore? L’80% dei lettori “scorre” la pagina

                                                                     Usabilità e scrittura dei testi per il web   21/165     Giacomo Mason – Febbraio 2010
Il lettore del web
                                                                       - Il rapporto “Eyetrack” -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"




                                                                         Osservazione sperimentale
                                                                         dei comportamenti degli utenti
                                                                         attraverso l’analisi dei
                                                                         movimenti oculari, dei tempi
                                                                         di permanenza e dei clic sui
                                                                         link




                                                                                            http://www.poynterextra.org/eyetrack2004/index.htm



                                                                     Usabilità e scrittura dei testi per il web       22/165        Giacomo Mason – Febbraio 2010
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"




                                                                             Eye tracking nella lettura di
                                                                             un testo sul video:
                                                                             http://it.youtube.com/watch
                                                                             ?v=bW_zDILeevY



                                                                     Usabilità e scrittura dei testi per il web   23/165   Giacomo Mason – Febbraio 2010
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"




                                                                     Usabilità e scrittura dei testi per il web   24/165   Giacomo Mason – Febbraio 2010
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"     Modelli classici e nuovi




                                                                                                        Fonte: web style guide – 2008
                                                                                                                           25/165       Giacomo Mason – Febbraio 2010
                                                                     Usabilità e scrittura dei testi http://webstyleguide.com/wsg3/3-information-architecture/4-presenting-information.html
                                                                                                     per il web
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"     Modello a “F”




                                                                                                                      http://www.useit.com/alertbox/reading_pattern.html

                                                                     Usabilità e scrittura dei testi per il web   26/165     Giacomo Mason – Febbraio 2010
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"




                                                                                         http://webstyleguide.com/wsg3/3-information-architecture/4-presenting-information.html
                                                                     Usabilità e scrittura dei testi per il web     27/165       Giacomo Mason – Febbraio 2010
Il lettore del web
                                                                      - L’effetto della dimensione dei font -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"




                                                                                                             Leggibilità




                                                                                                                     “Scannabilità”




                                                                      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).                                                            Fonte: Poynter Institute - 2004
                                                                                                                               http://www.poynterextra.org/eyetrack2004/fontsize.htm

                                                                     Usabilità e scrittura dei testi per il web      28/165      Giacomo Mason – Febbraio 2010
Il lettore del web
                                                                      - Titoli grandi e piccoli -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"




                                                                                                                                                Fonte: Poynter Institute - 2004
                                                                                                                     http://www.poynterextra.org/eyetrack2004/headlinesize.htm

                                                                     Usabilità e scrittura dei testi per il web   29/165       Giacomo Mason – Febbraio 2010
Il lettore del web
                                                                      - Finalizzazione -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"




                                                                            Lettura come effetto di una
                                                                            determinata ricerca


                                                                            Processo di attenta
                                                                            selezione del testo da
                                                                            leggere




                                                                     Usabilità e scrittura dei testi per il web   30/165   Giacomo Mason – Febbraio 2010
Il lettore del web
                                                                      - Testo/Azione -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"



                                                                                 La lettura “classica”…                    … e la lettura web




                                                                                                                           Invio una mail - Clicco - Cambio
                                                                                             Leggo                         pagina – Commento - Aggiungo al
                                                                                                                           carrello …

                                                                     Usabilità e scrittura dei testi per il web   31/165    Giacomo Mason – Febbraio 2010
Il lettore del web
                                                                      - Ancoraggi: alle immagini la priorità -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"




                                                                     3                                                                       Le immagini e i titoli
                                                                                                                                             sono il primo
                                                                                                                                             elemento a cui si
                                                                                                                                             presta attenzione,
                                                                                                                                             indipendentemente
                                                                                                                                             dalla loro collocazione
                                                                                                                                             nella pagina
                                                                            1                                                      2
                                                                                                                                             Le immagini con i visi
                                                                                                                                             in maniera ancora più
                                                                                                                                             accentuata



                                                                                                                                                       4

                                                                     Usabilità e scrittura dei testi per il web   32/165   Giacomo Mason – Febbraio 2010
Il lettore del web
                                                                      - Ancoraggi: titoli e strilli -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"




                                                                     Usabilità e scrittura dei testi per il web   33/165   Giacomo Mason – Febbraio 2010
Il lettore del web
                                                                         - Altri elementi di ancoraggio -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"




                                                                                                                                                    All’interno del

                                                                     2                                                                              testo alcuni
                                                                                                                                                    elementi
                                                                                                                                                    vengono
                                                                                                                                                    percepiti prima
                                                                                                                                                    di altri:
                                                                                                                                                    Titoli

                                                                                1                                                                   Sottotitoli
                                                                                                                                                    Grassettature
                                                                                                                                                    Link

                                                                                                                                             4      Punti-elenco


                                                                                                                                                    Rappresentano

                                                                             3
                                                                                                                                                    una specie di
                                                                                                                                                    “bussola” per il
                                                                                                                                                    lettore e aiutano
                                                                                                                                                    a “spezzare” il
                                                                                                                                                    testo in tanti
                                                                                                                                                    sottotesti




                                                                     Usabilità e scrittura dei testi per il web   34/165   Giacomo Mason – Febbraio 2010
Il lettore del web
                                                                      - Il contesto vince sul testo -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"



                                                                                                                                         Gli elementi di contesto
                                                                                                                                         (header, sezioni, data,
                                                                                                                                         autore) precedono il
                                                                                                                                         testo, poiché servono a
                                                                                                                                         collocarlo e da dargli un
                                                                                                                                         senso


                                                                                                                                         una pagina deve
                                                                                                                                         funzionare anche “fuori
                                                                                                                                         contesto” - dobbiamo
                                                                                                                                         trovare almeno:
                                                                                                                                         • Testata
                                                                                                                                         • Argomento
                                                                                                                                         • Autore
                                                                                                                                         • Data




                                                                     Usabilità e scrittura dei testi per il web   35/165   Giacomo Mason – Febbraio 2010
Usability dei testi
                                                                      - Elementi di contesto -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"




                                                                                NO                       Header
                                                                                                                                      SI
                                                                                                                                                                Ogni pagina
                                                                                                           Path    home     Sezione     Articolo                contiene gli
                                                                                                                                                                elementi di
                                                                                                                                      Titolo
                                                                                                                                                                contesto necessari
                                                                                                                                                                ad orientarsi


                                                                                                                                                                • Logo
                                                                                                                                                                • Tagline
                                                                                                                                                                • Titolo pagina
                                                                                                                                                                • Menù di profondità
                                                                                                                                                                (se possibile)
                                                                                                                                                                • Ritorno alla home
                                                                                                                                                                • Footer (data –
                                                                                                                                                                autore, ecc)
                                                                                                          Footer


                                                                     Usabilità e scrittura dei testi per il web           36/165            Giacomo Mason – Febbraio 2010
Usability dei testi
                                                                      - Elementi di contesto -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"




                                                                                      SI                                                NO

                                                                     Usabilità e scrittura dei testi per il web   37/165   Giacomo Mason – Febbraio 2010
Il lettore del web
                                                                      - Un esempio con il comune di Venezia -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"




                                                                                                                           Di quando è questa guida?




                                                                     Usabilità e scrittura dei testi per il web   38/165   Giacomo Mason – Febbraio 2010
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"     Agenda




                                                                       3) Usability dei testi




                                                                     Usabilità e scrittura dei testi per il web   39/165   Giacomo Mason – Febbraio 2010
Usability dei testi
                                                                      - Il testo sul web: necessità di riadattarlo -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"




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




                                                                     Usabilità e scrittura dei testi per il web   40/165      Giacomo Mason – Febbraio 2010
Usability dei testi
                                                                      - Una sola colonna colonna -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"




                                                                                   NO                                       SI

                                                                                                                                                    Il testo è
                                                                                                                                                    disposto su di
                                                                                                                                                    una sola
                                                                                                                                                    colonna, come
                                                                                                                                                    un “rotolo”
                                                                                                                                                    virtuale




                                                                     Usabilità e scrittura dei testi per il web   41/165   Giacomo Mason – Febbraio 2010
Usability dei testi
                                                                      - Larghezza della colonna -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"



                                                                                            NO                                                  SI




                                                                                                                                                 Max
                                                                                            800 pixel                                        450-500 pixel
                                                                                                                                          Fonte: Webstyle guide - 2002
                                                                                                                           http://www.webstyleguide.com/type/lines.html
                                                                     Usabilità e scrittura dei testi per il web   42/165     Giacomo Mason – Febbraio 2010
Usability dei testi
                                                                      - Larghezza della colonna adeguata alla lettura umana -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"




                                                                                                                       Fonte: Web style guide
                                                                                                                       http://webstyleguide.com/wsg3/index.html

                                                                     Usabilità e scrittura dei testi per il web   43/165     Giacomo Mason – Febbraio 2010
Usability dei testi
                                                                      - Un testo troppo “largo” -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"




                                                                     Usabilità e scrittura dei testi per il web   44/165   Giacomo Mason – Febbraio 2010
Usability dei testi
                                                                      - Un testo di larghezza corretta -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"




                                                                     Usabilità e scrittura dei testi per il web   45/165   Giacomo Mason – Febbraio 2010
Usability dei testi
                                                                      - Usate un layout fisso per la larghezza della colonna -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"




                                                                                                                       Fonte: Web style guide
                                                                                                                       http://webstyleguide.com/wsg3/index.html

                                                                     Usabilità e scrittura dei testi per il web   46/165     Giacomo Mason – Febbraio 2010
Usability dei testi
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"
                                                                       - Lunghezza dei testi -



                                                                       Limitate la lunghezza dei testi degli articoli
                                                                       fra 500 e 3.000 caratteri per un massimo di
                                                                       2 max 3 schermate


                                                                       Le ricerche di Nielsen confermano che la
                                                                       maggior parte degli utenti non supera le 2,5
                                                                       schermate


                                                                       Nel caso di testi più lunghi è necessario
                                                                            Un indice iniziale cliccabile
                                                                            Un editing ipertestuale




                                                                                                                            Fonte: Web style guide
                                                                     Usabilità e scrittura dei testi per il web    47/165       Giacomo Mason – Febbraio 2010
                                                                                                                            http://webstyleguide.com/wsg3/index.html
Usability dei testi
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"     - Un testo lungo non “trattato” -




                                                                           42.000 caratteri


                                                                           Nessun indice


                                                                           Nessun editing ipertestuale


                                                                           E’ un testo per la stampa, non per la lettura
                                                                           su web




                                                                     Usabilità e scrittura dei testi per il web   48/165   Giacomo Mason – Febbraio 2010
Usability dei testi
                                                                       - Un altro esempio di testo lungo
                                                                        non “trattato” -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"




                                                                                          Da Roberto Polillo
                                                                     Usabilità e scrittura dei testi per il web       49/165        Giacomo Mason – Febbraio 2010
                                                                                          http://www.slideshare.net/rpolillo/12progettare-il-testo
Usability dei testi
                                                                      - Come suddividere il testo? -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"




                                                                       Dipende dalle caratteristiche del testo
                                                                       (lunghezza, grado di autonomia delle singole
                                                                       parti)


                                                                       Dipende dal tipo di fruizione che si può
                                                                       ipotizzare da parte del lettore (sequenziale,
                                                                       granulare, focalizzata su alcuni punti)




                                                                     Usabilità e scrittura dei testi per il web   50/165   Giacomo Mason – Febbraio 2010
Usability dei testi
                                                                      - Le varie suddivisioni per i testi lunghi -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"




                                                                       Sommari                    Pagine
                                                                       cliccabili               sequenziali              Sottopagine                 indici

                                                                                                                                                   Il testo è formato
                                                                                                                        Il testo sta
                                                                      Il testo sta              Il testo sta                                       da tanti sottotesti
                                                                                                                        concettualmente su
                                                                      concettualmente           concettualmente                                    autonomi e
                                                                                                                        più livelli di
                                                                      su un solo                su un solo                                         omogenei
                                                                                                                        dettaglio
                                                                      “livello”                 “livello”

                                                                                                                                                   Il lettore deve
                                                                                                                        Il testo deve
                                                                      Il testo ha una           Il testo è                                         focalizzarsi solo su
                                                                                                                        adattarsi a lettori
                                                                      sua unità e non è         scomponibile in                                    un frammento
                                                                                                                        che hanno diverse
                                                                      scomponibile              parti autonome
                                                                                                                        esigenze di
                                                                                                                        approfondimento
                                                                                                                                                   Il testo ha senso
                                                                      Il testo deve             Il testo ha senso                                  anche se alcune
                                                                      poter essere              solo se letto                                      parti non vengono
                                                                                                                        Il testo ha senso
                                                                      stampato                  sequenzialmente                                    lette
                                                                                                                        anche se alcune
                                                                                                                        parti non vengono
                                                                                                                        lette




                                                                     Usabilità e scrittura dei testi per il web     51/165      Giacomo Mason – Febbraio 2010
Usability dei testi
                                                                      - Indici iniziali e “up” per i testi lunghi -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"



                                                                                 NO                                        SI


                                                                                                                                                  Indice cliccabile
                                                                                                                                                  dei paragrafi
                                                                                                                                                  all’inizio


                                                                                                                                                  Bottoni per
                                                                                                                                                  tornare in alto




                                                                          Nessuno strumento
                                                                          di navigazione interna

                                                                     Usabilità e scrittura dei testi per il web   52/165   Giacomo Mason – Febbraio 2010
Usability dei testi
                                                                      - Impaginazione “a bandiera” -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"




                                                                                                     ok                Fonte: Web style guide
                                                                                                                       http://webstyleguide.com/wsg3/index.html

                                                                     Usabilità e scrittura dei testi per il web   53/165     Giacomo Mason – Febbraio 2010
Usability dei testi
                                                                      - Il giustificato peggiora la leggibilità -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"




                                                                           Evitate di giustificare i
                                                                           testi che vanno in Rete




                                                                     Usabilità e scrittura dei testi per il web   54/165   Giacomo Mason – Febbraio 2010
Usability dei testi
                                                                      - Effetti imprevisti del giustificato -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"




                                                                     Usabilità e scrittura dei testi per il web   55/165   Giacomo Mason – Febbraio 2010
Usability dei testi
                                                                      - Effetti imprevisti del giustificato -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"




                                                                     Usabilità e scrittura dei testi per il web   56/165   Giacomo Mason – Febbraio 2010
Usability dei testi
                                                                      - Il giustificato non aiuta la lettura -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"




                                                                     Usabilità e scrittura dei testi per il web   57/165   Giacomo Mason – Febbraio 2010
Usability dei testi
                                                                      - Allineamento: al centro peggiora l’utilizzo -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"




                                                                                   Analisi dei Sistemi Finanziari MAT/09 6
                                                                                       Analisi Matematica 2 MAT/05 6
                                                                               Aspetti Epistemologici dell’Informatica INF/01 6
                                                                                     Basi di Dati (Complementi) INF/01 6
                                                                                           Bioinformatica INF/01 6
                                                                                       Business Intelligence MAT/09 6
                                                                                        Calcolo Numerico MAT/08 6
                                                                            Cibernetica (Elementi di Teoria dei Sistemi) INF/01 6
                                                                     Computazione Quantistica (Metodi Matematici ed Elementi) INF/01 6
                                                                                            Data Minino MAT/09 6
                                                                            Economia e Organizzazione Aziendale ING/IND/35 6
                                                                              Elaborazione delle Immagini (elementi) INF/01 6
                                                                                Elaborazione Numerica dei Segnali INF/01 6
                                                                                 Fisica Generale 1 (Complementi) FIS/01 6
                                                                         Fisica Generale 2 (Progettazione Logica Digitale) FIS/01 6
                                                                      Fondamenti Logico-Matematici dell'Informatica (Elementi) INF/01 6
                                                                              Gestione di documenti in ambiente WEB INF/01 6
                                                                            Informatica Applicata (Controlli Automatici) INF/01 6
                                                                                 Informatica Applicata (Grafica) (*) INF/01 6
                                                                                        Informatica Medica INF/01 6
                                                                                    Psicologia Generale 1 (*) M-PSI/01 6




                                                                                          Nel caso di utilizzi particolari (come consultare un elenco)
                                                                                          l’allineamento a sinistra diventa una necessità



                                                                     Usabilità e scrittura dei testi per il web                       58/165   Giacomo Mason – Febbraio 2010
Usability dei testi
                                                                      - Maiuscolo, corsivo, sottolineature -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"




                                                                                             L’INIZIATIVA VUOLE MASSIMIZZARE GLI UTILI E RIDURRE LE
                                                                     NO                      SPESE

                                                                                             L’iniziativa vuole massimizzare gli utili e ridurre le spese
                                                                     SI

                                                                                           L’iniziativa vuole massimizzare gli utili e ridurre le spese
                                                                     NO
                                                                     SI                     L’iniziativa vuole massimizzare gli utili e ridurre le spese




                                                                                           L’iniziativa vuole massimizzare gli utili e ridurre le spese
                                                                     NO
                                                                     SI                     L’iniziativa vuole massimizzare gli utili e ridurre le spese


                                                                     Usabilità e scrittura dei testi per il web     59/165      Giacomo Mason – Febbraio 2010
Usability dei testi
                                                                      - I difetti del maiuscolo -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"




                                                                               SI E’ VERIFICATO SPERIMENTALMENTE CHE LA LEGGIBILITÁ DI UN TESTO
                                                                               SCRITTO ESCLUSIVAMENTE IN CARATTERI MAIUSCOLI È MINORE DI
                                                                               QUELLA DI UN TESTO SCRITTO IN CARATTERI MAIUSCOLI E MINUSCOLI


                                                                               Si è verificato sperimentalmente che la leggibilità di un testo scritto esclusivamente
                                                                               in caratteri maiuscoli è minore di quella di un testo scritto in caratteri maiuscoli e
                                                                               minuscoli




                                                                                                         Pattern riconoscibili


                                                                                                            Conservazione
                                                                                                           dell’informazione


                                                                     Usabilità e scrittura dei testi per il web        60/165        Giacomo Mason – Febbraio 2010
Usability dei testi
                                                                      - Il minuscolo crea un pattern più leggibile -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"




                                                                        L’uso delle minuscole
                                                                        associa ad ogni parola
                                                                        un “pattern” riconoscibile
                                                                        dato dalle ascendenti e
                                                                        dalle discendenti




                                                                                                                       Fonte: Web style guide
                                                                                                                       http://webstyleguide.com/wsg3/index.html

                                                                     Usabilità e scrittura dei testi per il web   61/165     Giacomo Mason – Febbraio 2010
Usability dei testi
                                                                      - Il minuscolo crea un pattern più leggibile -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"




                                                                     Usabilità e scrittura dei testi per il web   62/165   Giacomo Mason – Febbraio 2010
Usability dei testi
                                                                      - Il corsivo aumenta l’effetto “sega” -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"




                                                                      Il corsivo si legge male su video
                                                                      perché enfatizza l’effetto “sega”




                                                                                                                           Da Roberto Polillo
                                                                     Usabilità e scrittura dei testi per il web   63/165   Giacomo Mason – Febbraio 2010
                                                                                                                           http://www.slideshare.net/rpolillo/12progettare-il-testo
Usability dei testi
                                                                      - Il corsivo peggiora la leggibilità -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"



                                                                                         Evitate di scrivere testi
                                                                                         tutti in corsivo




                                                                     Usabilità e scrittura dei testi per il web      64/165   Giacomo Mason – Febbraio 2010
Usability dei testi
                                                                      - Corsivo: esperimenti sui tempi di lettura -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"




                                                                     Indipendentemente dal
                                                                     tipo di font e dal colore, il
                                                                     corsivo aumenta i tempi
                                                                     medi di lettura




                                                                     La leggibilità è data del
                                                                     tempo medio utilizzato da
                                                                     un campione di soggetti
                                                                     per leggere determinati
                                                                     brani di testo (es.: ricerca
                                                                     della prima occorrenza di
                                                                     una fra più parole date nel
                                                                     testo)

                                                                                                                                                Fonte: Hill, Scharff - 1997
                                                                                                                             http://hubel.sfasu.edu/research/AHNCUR.html


                                                                     Usabilità e scrittura dei testi per il web   65/165   Giacomo Mason – Febbraio 2010
Usability dei testi
                                                                         - Font -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"




                                                                     Fonte: Web style guide
                                                                     http://webstyleguide.com/wsg3/index.html


                                                                        Usabilità e scrittura dei testi per il web   66/165   Giacomo Mason – Febbraio 2010
Usability dei testi
                                                                      - Due tipi di font -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"




                                                                      Carattere con
                                                                      “grazie”




                                                                      Carattere a
                                                                      “bastoni”




                                                                     Usabilità e scrittura dei testi per il web   67/165   Giacomo Mason – Febbraio 2010
Usability dei testi
                                                                      - I font migliori (e i peggiori) -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"




                                                                                              L’iniziativa vuole massimizzare gli utili e ridurre le spese attraverso
                                                                                              una accurata politica di investimenti a medio e lungo termine (times
                                                                                              new roman)

                                                                     NO                        L’iniziativa vuole massimizzare gli utili e ridurre le spese
                                                                                               attraverso una accurata politica di investimenti a medio
                                                                                               e lungo termine (Garamond)


                                                                                         L’iniziativa vuole massimizzare gli utili e ridurre le spese


                                                                     SI
                                                                                         attraverso una accurata politica di investimenti a medio e lungo
                                                                                         termine (arial)

                                                                                         L’iniziativa vuole massimizzare gli utili e ridurre le spese
                                                                                         attraverso una accurata politica di investimenti a medio e
                                                                                         lungo termine (verdana)


                                                                     Usabilità e scrittura dei testi per il web      68/165      Giacomo Mason – Febbraio 2010
Usability dei testi
                                                                      - Il Times New Roman peggiora la leggibilità -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"




                                                                     Usabilità e scrittura dei testi per il web   69/165   Giacomo Mason – Febbraio 2010
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"     Font sbagliati




                                                                     Usabilità e scrittura dei testi per il web   70/165   Giacomo Mason – Febbraio 2010
Usability dei testi
                                                                      - Verifiche sperimentali: percezione degli utilizzatori -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"




                                                                                                                                                       Arial

                                                                                                                                                        Verdana


                                                                                                                                          Time
                                                                                                                                          s


                                                                       N.B. La percezione può non
                                                                                                                                                       Fonte: Bernard et al, 2001
                                                                       coincidere con i tempi di lettura
                                                                                                                      http://psychology.wichita.edu/surl/usabilitynews/3S/font.htm


                                                                     Usabilità e scrittura dei testi per il web   71/165      Giacomo Mason – Febbraio 2010
Usability dei testi
                                                                      - Dimensioni e interlinea dei caratteri -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"




                                                                       Un esperimento: (Williams, Scharff)




                                                                              Usare preferibilmente almeno caratteri in corpo 12
                                                                                                                           Da Roberto Polillo
                                                                     Usabilità e scrittura dei testi per il web   72/165   Giacomo Mason – Febbraio 2010
                                                                                                                           http://www.slideshare.net/rpolillo/12progettare-il-testo
Usability dei testi
                                                                      - Indagine di M. Bernard (2003) sui tempi di lettura -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"




                                                                        La resa migliore (tempo
                                                                        medio di riconoscimento
                                                                        lettere) si ha con i caratteri
                                                                        in corpo 12 , in particolare
                                                                        Thaoma e Verdana (ma
                                                                        anche Times)




                                                                                                                                                  Fonte: Bernard et al, 2003
                                                                                                                           http://psychology.wichita.edu/optimalweb/text.htm

                                                                     Usabilità e scrittura dei testi per il web   73/165   Giacomo Mason – Febbraio 2010
Usability dei testi
                                                                      - Rapporto testo-sfondo -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"




                                                                                NO                                NO                           SI




                                                                     Usabilità e scrittura dei testi per il web   74/165   Giacomo Mason – Febbraio 2010
Usability dei testi
                                                                      - Rapporto testo-sfondo -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"




                                                                                    SI                            NI                    NO

                                                                                 Nero su bianco              Bianco su nero          Rosso su verde

                                                                                Bianco su Azzurro            Nero su giallo          Fucsia su blu

                                                                                  Blu su bianco              Grigio su nero          Verde su giallo

                                                                                 Nero su grigio




                                                                     Usabilità e scrittura dei testi per il web     75/165    Giacomo Mason – Febbraio 2010
Usability dei testi
                                                                      - Rapporti testo-sfondo sbagliati -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"




                                                                     Usabilità e scrittura dei testi per il web   76/165   Giacomo Mason – Febbraio 2010
Usability dei testi
                                                                      - Contrasti che non favoriscono la leggibilità -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"




                                                                     Usabilità e scrittura dei testi per il web   77/165   Giacomo Mason – Febbraio 2010
Usability dei testi
                                                                      - Evitate sfondi elaborati nel testo -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"




                                                                     Usabilità e scrittura dei testi per il web   78/165   Giacomo Mason – Febbraio 2010
Usability dei testi
                                                                      - Rapporto testo-sfondo: indagini empiriche -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"




                                                                                                                                              Fonte: Lauren Scharff 1997
                                                                                                                           http://hubel.sfasu.edu/research/survreslts.html


                                                                     Usabilità e scrittura dei testi per il web   79/165   Giacomo Mason – Febbraio 2010
Usability dei testi
                                                                      - Usare pochi colori e dare loro un significato -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"




                                                                        NO
                                                                                                 Gli obiettivi dell’iniziativa
                                                                                                 L’iniziativa vuole massimizzare gli utili e ridurre le spese
                                                                                                 attraverso una accurata politica di investimenti a medio e
                                                                                                 lungo termine




                                                                         SI
                                                                                                 Gli obiettivi dell’iniziativa
                                                                                                 L’iniziativa vuole massimizzare gli utili e ridurre le spese
                                                                                                 attraverso una accurata politica di investimenti a medio e
                                                                                                 lungo termine




                                                                     Usabilità e scrittura dei testi per il web   80/165    Giacomo Mason – Febbraio 2010
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"     Troppi colori




                                                                     Usabilità e scrittura dei testi per il web   81/165   Giacomo Mason – Febbraio 2010
Usability dei testi
                                                                      - Colori a profusione -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"




                                                                     Usabilità e scrittura dei testi per il web   82/165   Giacomo Mason – Febbraio 2010
Usability dei testi
                                                                     - Non affiancate colori lontani nello spettro -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"




                                                                           caratteri di colori lontani
                                                                           sullo spettro vengono messi
                                                                           a fuoco su piani diversi




                Da Roberto Polillo                                                                       83/165   Giacomo Mason – Febbraio 2010
                        Usabilità e scrittura dei testi per il web
                http://www.slideshare.net/rpolillo/12progettare-il-testo
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"




                                                                     Esempio di rosso su sfondo blu
                                                                     Non si riesce a mettere a fuoco



                                                                     Usabilità e scrittura dei testi per il web   84/165   Giacomo Mason – Febbraio 2010
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"




                                                                       Da questo esempio si vede la difficoltà di messa a fuoco
                                                                       contemporanea del rosso e del blu: da molti le righe di questi
                                                                       due colori vengono viste, per i motivi descritti, come se fossero
                                                                       collocate a distanze diverse dagli occhi.


                                                                       Questo fenomeno non si verifica se si usano due colori che
                                                                       si trovino fra loro più vicini sullo spettro visibile, come si può
                                                                       facilmente verificare da questo secondo esempio, che non
                                                                       dovrebbe presentare l’effetto tridimensionale di cui sopra.




                                                                     Usabilità e scrittura dei testi per il web   85/165   Giacomo Mason – Febbraio 2010
                                                                                                                                   Da Roberto Polillo
Usability dei testi
                                                                      - Niente animazioni nel testo -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"




                                                                                        NO                                        SI




                                                                     Usabilità e scrittura dei testi per il web   86/165   Giacomo Mason – Febbraio 2010
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"     Agenda




                                                                       4) Formattazione




                                                                     Usabilità e scrittura dei testi per il web   87/165   Giacomo Mason – Febbraio 2010
Usability dei testi
                                                                      - Il problema dei blocchi di testo -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"




                                                                     I blocchi di testo troppo fitti spaventano il lettore



                                                                            Sul web è difficile mantenere dei punti di
                                                                                riferimento e l’occhio si stanca prima



                                                                                  E’ necessario spezzare l’omogeneità
                                                                                 introducendo elementi di rilevanza e
                                                                                                   bussole di riferimento




                                                                     Usabilità e scrittura dei testi per il web     88/165   Giacomo Mason – Febbraio 2010
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"




                                                                     Usabilità e scrittura dei testi per il web   89/165   Giacomo Mason – Febbraio 2010
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"




                                                                     Usabilità e scrittura dei testi per il web   90/165   Giacomo Mason – Febbraio 2010
Usability dei testi
                                                                      - Spazi, blocchi, impaginazione -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"



                                                                              NO                                      SI

                                                                                                                                          Vari blocchi di testo il più
                                                                                                                                          possibile uniformi


                                                                                                                                          spazi tra i paragrafi e
                                                                                                                                          all’interno della pagina


                                                                                                                                          Impaginazione a
                                                                                                                                          bandiera




                                                                      Blocco unico di testo
                                                                      Nessuno spazio
                                                                      Impaginazione giustificata
                                                                     Usabilità e scrittura dei testi per il web   91/165   Giacomo Mason – Febbraio 2010
Usability dei testi
                                                                      - Blocchi di testo: meglio se molto corti -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"




                                                                     Blocchi corti
                                                                                                                                   La ricerca rivela che
                                                                     (4 - 5 righe)                                                 con blocchi di testo
                                                                                                                                   medio lunghi (9-10
                                                                                                                                   righe) l’efficacia si
                                                                                                                                   riduce di più della
                                                                                                                                   metà


                                                                     Blocchi medio-                                                (durata e numero di
                                                                     lunghi                                                        fissazioni dello
                                                                     (9 - 10 righe)                                                sguardo)




                                                                                                                                                Fonte: Poynter Institute - 2004
                                                                                                                     http://www.poynterextra.org/eyetrack2004/articlepages.htm

                                                                     Usabilità e scrittura dei testi per il web   92/165      Giacomo Mason – Febbraio 2010
Usability dei testi
                                                                      - Uso dei blocchi di testo -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"




                                                                                           Ok                                                    NO




                                                                     Usabilità e scrittura dei testi per il web   93/165   Giacomo Mason – Febbraio 2010
Formattazione e ancoraggi
                                                                      - Uso dei blocchi di testo -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"




                                                                                           NO                                                    NO




                                                                     Usabilità e scrittura dei testi per il web   94/165   Giacomo Mason – Febbraio 2010
Usability dei testi
                                                                      - Uso dei blocchi di testo -
MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale"




                                                                     Usabilità e scrittura dei testi per il web   95/165   Giacomo Mason – Febbraio 2010
Usabilita E Scrittura dei Testi per il web
Usabilita E Scrittura dei Testi per il web
Usabilita E Scrittura dei Testi per il web
Usabilita E Scrittura dei Testi per il web
Usabilita E Scrittura dei Testi per il web
Usabilita E Scrittura dei Testi per il web
Usabilita E Scrittura dei Testi per il web
Usabilita E Scrittura dei Testi per il web
Usabilita E Scrittura dei Testi per il web
Usabilita E Scrittura dei Testi per il web
Usabilita E Scrittura dei Testi per il web
Usabilita E Scrittura dei Testi per il web
Usabilita E Scrittura dei Testi per il web
Usabilita E Scrittura dei Testi per il web
Usabilita E Scrittura dei Testi per il web
Usabilita E Scrittura dei Testi per il web
Usabilita E Scrittura dei Testi per il web
Usabilita E Scrittura dei Testi per il web
Usabilita E Scrittura dei Testi per il web
Usabilita E Scrittura dei Testi per il web
Usabilita E Scrittura dei Testi per il web
Usabilita E Scrittura dei Testi per il web
Usabilita E Scrittura dei Testi per il web
Usabilita E Scrittura dei Testi per il web
Usabilita E Scrittura dei Testi per il web
Usabilita E Scrittura dei Testi per il web
Usabilita E Scrittura dei Testi per il web
Usabilita E Scrittura dei Testi per il web
Usabilita E Scrittura dei Testi per il web
Usabilita E Scrittura dei Testi per il web
Usabilita E Scrittura dei Testi per il web
Usabilita E Scrittura dei Testi per il web
Usabilita E Scrittura dei Testi per il web
Usabilita E Scrittura dei Testi per il web
Usabilita E Scrittura dei Testi per il web
Usabilita E Scrittura dei Testi per il web
Usabilita E Scrittura dei Testi per il web
Usabilita E Scrittura dei Testi per il web
Usabilita E Scrittura dei Testi per il web
Usabilita E Scrittura dei Testi per il web
Usabilita E Scrittura dei Testi per il web
Usabilita E Scrittura dei Testi per il web
Usabilita E Scrittura dei Testi per il web
Usabilita E Scrittura dei Testi per il web
Usabilita E Scrittura dei Testi per il web
Usabilita E Scrittura dei Testi per il web
Usabilita E Scrittura dei Testi per il web
Usabilita E Scrittura dei Testi per il web
Usabilita E Scrittura dei Testi per il web
Usabilita E Scrittura dei Testi per il web
Usabilita E Scrittura dei Testi per il web
Usabilita E Scrittura dei Testi per il web
Usabilita E Scrittura dei Testi per il web
Usabilita E Scrittura dei Testi per il web
Usabilita E Scrittura dei Testi per il web
Usabilita E Scrittura dei Testi per il web
Usabilita E Scrittura dei Testi per il web
Usabilita E Scrittura dei Testi per il web
Usabilita E Scrittura dei Testi per il web
Usabilita E Scrittura dei Testi per il web
Usabilita E Scrittura dei Testi per il web
Usabilita E Scrittura dei Testi per il web
Usabilita E Scrittura dei Testi per il web
Usabilita E Scrittura dei Testi per il web
Usabilita E Scrittura dei Testi per il web
Usabilita E Scrittura dei Testi per il web
Usabilita E Scrittura dei Testi per il web
Usabilita E Scrittura dei Testi per il web
Usabilita E Scrittura dei Testi per il web
Usabilita E Scrittura dei Testi per il web

More Related Content

What's hot

نظام جسور لإدارة التعلم الإلكتروني
نظام جسور لإدارة التعلم الإلكترونينظام جسور لإدارة التعلم الإلكتروني
نظام جسور لإدارة التعلم الإلكتروني
almoziny11
 
Kehittävä arviointi hanketyössä Anu Räisänen
Kehittävä arviointi hanketyössä Anu RäisänenKehittävä arviointi hanketyössä Anu Räisänen
Kehittävä arviointi hanketyössä Anu Räisänen
Nina Eskola-Salin
 
計算機概論(雙絞線、同軸電纜、光纖)報告者 張秀敏、吳忞蓁
計算機概論(雙絞線、同軸電纜、光纖)報告者 張秀敏、吳忞蓁計算機概論(雙絞線、同軸電纜、光纖)報告者 張秀敏、吳忞蓁
計算機概論(雙絞線、同軸電纜、光纖)報告者 張秀敏、吳忞蓁
秀敏 張
 

What's hot (9)

نظام التعليم في مصر والاتجاهات المعاصره4(التعليم في فرنسا)م
نظام التعليم في مصر والاتجاهات المعاصره4(التعليم في فرنسا)منظام التعليم في مصر والاتجاهات المعاصره4(التعليم في فرنسا)م
نظام التعليم في مصر والاتجاهات المعاصره4(التعليم في فرنسا)م
 
المحاضرة التاسعة التقويم
المحاضرة التاسعة التقويمالمحاضرة التاسعة التقويم
المحاضرة التاسعة التقويم
 
نظام جسور لإدارة التعلم الإلكتروني
نظام جسور لإدارة التعلم الإلكترونينظام جسور لإدارة التعلم الإلكتروني
نظام جسور لإدارة التعلم الإلكتروني
 
القياس والتقييم والتقويم
القياس والتقييم والتقويمالقياس والتقييم والتقويم
القياس والتقييم والتقويم
 
Kehittävä arviointi hanketyössä Anu Räisänen
Kehittävä arviointi hanketyössä Anu RäisänenKehittävä arviointi hanketyössä Anu Räisänen
Kehittävä arviointi hanketyössä Anu Räisänen
 
الاتصال التعليمي
الاتصال التعليميالاتصال التعليمي
الاتصال التعليمي
 
Kognitiivinen ergonomia ja aivotyö
Kognitiivinen ergonomia ja aivotyöKognitiivinen ergonomia ja aivotyö
Kognitiivinen ergonomia ja aivotyö
 
計算機概論(雙絞線、同軸電纜、光纖)報告者 張秀敏、吳忞蓁
計算機概論(雙絞線、同軸電纜、光纖)報告者 張秀敏、吳忞蓁計算機概論(雙絞線、同軸電纜、光纖)報告者 張秀敏、吳忞蓁
計算機概論(雙絞線、同軸電纜、光纖)報告者 張秀敏、吳忞蓁
 
الإدارةالصفية انماط-التواصل-الصفي
الإدارةالصفية انماط-التواصل-الصفيالإدارةالصفية انماط-التواصل-الصفي
الإدارةالصفية انماط-التواصل-الصفي
 

More from Giacomo Mason

Intranet e information architecture webinar - [intranet management]
Intranet e information architecture   webinar - [intranet management]Intranet e information architecture   webinar - [intranet management]
Intranet e information architecture webinar - [intranet management]
Giacomo Mason
 

More from Giacomo Mason (20)

Casi, tendenze e soluzioni di design dal premio IIC 2022 - Webinar - 18 - [In...
Casi, tendenze e soluzioni di design dal premio IIC 2022 - Webinar - 18 - [In...Casi, tendenze e soluzioni di design dal premio IIC 2022 - Webinar - 18 - [In...
Casi, tendenze e soluzioni di design dal premio IIC 2022 - Webinar - 18 - [In...
 
Creare un video demo della intranet - Webinar - 17 - [IntranetManagement].pdf
Creare un video demo della intranet - Webinar - 17 - [IntranetManagement].pdfCreare un video demo della intranet - Webinar - 17 - [IntranetManagement].pdf
Creare un video demo della intranet - Webinar - 17 - [IntranetManagement].pdf
 
Intranet tra lavoro superficiale e profondo - Webinar - 16 - [IntranetManagem...
Intranet tra lavoro superficiale e profondo - Webinar - 16 - [IntranetManagem...Intranet tra lavoro superficiale e profondo - Webinar - 16 - [IntranetManagem...
Intranet tra lavoro superficiale e profondo - Webinar - 16 - [IntranetManagem...
 
Employee_journey_map - Webinar - 14 - [IntranetManagement]
Employee_journey_map - Webinar - 14 - [IntranetManagement]Employee_journey_map - Webinar - 14 - [IntranetManagement]
Employee_journey_map - Webinar - 14 - [IntranetManagement]
 
Intranet tra globale e locale - webinar - [intranet management]
Intranet tra globale e locale  -  webinar - [intranet management]Intranet tra globale e locale  -  webinar - [intranet management]
Intranet tra globale e locale - webinar - [intranet management]
 
Enterprise gamification - webinar - [intranet management]
Enterprise gamification -   webinar - [intranet management]Enterprise gamification -   webinar - [intranet management]
Enterprise gamification - webinar - [intranet management]
 
Intranet e information architecture webinar - [intranet management]
Intranet e information architecture   webinar - [intranet management]Intranet e information architecture   webinar - [intranet management]
Intranet e information architecture webinar - [intranet management]
 
Premiazione intranet italia champions 2020 alcune tendenze - webinar - [int...
Premiazione intranet italia champions 2020   alcune tendenze - webinar - [int...Premiazione intranet italia champions 2020   alcune tendenze - webinar - [int...
Premiazione intranet italia champions 2020 alcune tendenze - webinar - [int...
 
Lo stato delle intranet in italia 2020 webinar - [intranet management]
Lo stato delle intranet in italia 2020   webinar - [intranet management]Lo stato delle intranet in italia 2020   webinar - [intranet management]
Lo stato delle intranet in italia 2020 webinar - [intranet management]
 
Anatomia di una intranet news webinar [intranet management]
Anatomia di una intranet news   webinar [intranet management]Anatomia di una intranet news   webinar [intranet management]
Anatomia di una intranet news webinar [intranet management]
 
Intranet e community, pattern che funzionano - Webinar [Intranet management]
Intranet e community, pattern che funzionano - Webinar [Intranet management]Intranet e community, pattern che funzionano - Webinar [Intranet management]
Intranet e community, pattern che funzionano - Webinar [Intranet management]
 
We will meet again. Il futuro del lavoro - slideshare
We will meet again. Il futuro del lavoro - slideshareWe will meet again. Il futuro del lavoro - slideshare
We will meet again. Il futuro del lavoro - slideshare
 
profilo e rubrica, le killer application della intranet - Webinar - [Intranet...
profilo e rubrica, le killer application della intranet - Webinar - [Intranet...profilo e rubrica, le killer application della intranet - Webinar - [Intranet...
profilo e rubrica, le killer application della intranet - Webinar - [Intranet...
 
Una intranet, molti destinatari - webinar - [intranet management]
Una intranet, molti destinatari -  webinar - [intranet management]Una intranet, molti destinatari -  webinar - [intranet management]
Una intranet, molti destinatari - webinar - [intranet management]
 
Intranet e gamification webinar - [intranet management]
Intranet e gamification   webinar - [intranet management]  Intranet e gamification   webinar - [intranet management]
Intranet e gamification webinar - [intranet management]
 
intranet management - intranet, digital workplace, collaboration, quali diffe...
intranet management - intranet, digital workplace, collaboration, quali diffe...intranet management - intranet, digital workplace, collaboration, quali diffe...
intranet management - intranet, digital workplace, collaboration, quali diffe...
 
Intranet management - creare uno smart working human centered
Intranet management  - creare uno smart working human centeredIntranet management  - creare uno smart working human centered
Intranet management - creare uno smart working human centered
 
[Intranet management] intranet, covid 19 e remote working - che cosa abbiamo ...
[Intranet management] intranet, covid 19 e remote working - che cosa abbiamo ...[Intranet management] intranet, covid 19 e remote working - che cosa abbiamo ...
[Intranet management] intranet, covid 19 e remote working - che cosa abbiamo ...
 
Progettare per le comunità aziendali
Progettare per le comunità aziendaliProgettare per le comunità aziendali
Progettare per le comunità aziendali
 
Di chi è la intranet? Un progetto tra IT, HR, Comunicazione, Operations
Di chi è la intranet? Un progetto tra IT, HR, Comunicazione, OperationsDi chi è la intranet? Un progetto tra IT, HR, Comunicazione, Operations
Di chi è la intranet? Un progetto tra IT, HR, Comunicazione, Operations
 

Recently uploaded

Recently uploaded (11)

a scuola di biblioVerifica: come utilizzare CHATBOT secondo UNESCO
a scuola di biblioVerifica: come utilizzare CHATBOT secondo UNESCOa scuola di biblioVerifica: come utilizzare CHATBOT secondo UNESCO
a scuola di biblioVerifica: come utilizzare CHATBOT secondo UNESCO
 
Accessibilità, tra miti e realtà: gli errori da non compiere e le azioni da i...
Accessibilità, tra miti e realtà: gli errori da non compiere e le azioni da i...Accessibilità, tra miti e realtà: gli errori da non compiere e le azioni da i...
Accessibilità, tra miti e realtà: gli errori da non compiere e le azioni da i...
 
Powerpoint tesi di laurea
Powerpoint tesi di laurea Powerpoint tesi di laurea
Powerpoint tesi di laurea
 
Ostia antica da porta di Roma a porta d'Europa
Ostia antica da porta di Roma a porta d'EuropaOstia antica da porta di Roma a porta d'Europa
Ostia antica da porta di Roma a porta d'Europa
 
Transizione Energetica e Cooperazione: non solo CER
Transizione Energetica e Cooperazione: non solo CERTransizione Energetica e Cooperazione: non solo CER
Transizione Energetica e Cooperazione: non solo CER
 
Lo Schema Diapositiva con LibreOffice Impress
Lo Schema Diapositiva con LibreOffice ImpressLo Schema Diapositiva con LibreOffice Impress
Lo Schema Diapositiva con LibreOffice Impress
 
No. Nessuno strumento automatico verifica o ripara l’accessibilità di un sito...
No. Nessuno strumento automatico verifica o ripara l’accessibilità di un sito...No. Nessuno strumento automatico verifica o ripara l’accessibilità di un sito...
No. Nessuno strumento automatico verifica o ripara l’accessibilità di un sito...
 
Stati Uniti PPT geografia power point..
Stati Uniti  PPT geografia power point..Stati Uniti  PPT geografia power point..
Stati Uniti PPT geografia power point..
 
AccessibleEU: oggi per l’accessibilità di domani
AccessibleEU: oggi per l’accessibilità di domaniAccessibleEU: oggi per l’accessibilità di domani
AccessibleEU: oggi per l’accessibilità di domani
 
Nuovo Progetto Italiano - 1. Livello elementare. Libro dello studente (A1-A2)...
Nuovo Progetto Italiano - 1. Livello elementare. Libro dello studente (A1-A2)...Nuovo Progetto Italiano - 1. Livello elementare. Libro dello studente (A1-A2)...
Nuovo Progetto Italiano - 1. Livello elementare. Libro dello studente (A1-A2)...
 
Asou.Mbaye_La relazione sulle macchine termiche.pptx
Asou.Mbaye_La relazione sulle macchine termiche.pptxAsou.Mbaye_La relazione sulle macchine termiche.pptx
Asou.Mbaye_La relazione sulle macchine termiche.pptx
 

Usabilita E Scrittura dei Testi per il web

  • 1. MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Usabilità e scrittura dei testi per il web Giacomo Mason, Febbraio 2010 Usabilità e scrittura dei testi per il web 1/165 Giacomo Mason – Febbraio 2010 Telecom Italia - confidenziale
  • 2. MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Agenda 1) Principi generali 2) Il lettore del web 3) Usability dei testi 4) Formattare i testi 5) Strutturare i testi Usabilità e scrittura dei testi per il web 2/165 Giacomo Mason – Febbraio 2010
  • 3. MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Agenda 1) Principi generali Usabilità e scrittura dei testi per il web 3/165 Giacomo Mason – Febbraio 2010
  • 4. Principi Generali - Il testo sul web è una cipolla - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" 1 - Contesto di lettura sul web e vincoli del mezzo 2 - Aspetti di Usability 3 - Aspetti di formattazione 4 - Aspetti di strutturazione 5 - Aspetti di stile Usabilità e scrittura dei testi per il web 4/165 Giacomo Mason – Febbraio 2010
  • 5. Principi Generali - Progettare testi, progettare interfacce - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Il testo sul web è anche un’interfaccia di azione Diversi tipi di testo si dispongono in modo diverso nell’asse interfaccia/trasparenza Etichette dei Menù Link Strilli cliccabili Istruzioni per l’interazione Articoli Pagine Interfaccia indice Titoli e Schede sottotitoli tecniche Testo “trasparente” Usabilità e scrittura dei testi per il web 5/165 Giacomo Mason – Febbraio 2010
  • 6. MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" 1: più interfaccia che testo Usabilità e scrittura dei testi per il web 6/165 Giacomo Mason – Febbraio 2010
  • 7. MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" 2: a metà tra testo e interfaccia Usabilità e scrittura dei testi per il web 7/165 Giacomo Mason – Febbraio 2010
  • 8. MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" 3: più testo che interfaccia Usabilità e scrittura dei testi per il web 8/165 Giacomo Mason – Febbraio 2010
  • 9. MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Differenti usi del testo Leggere la pagina Fare lo scanning per vedere se è quella giusta Fare lo scanning per localizzare un contenuto specifico Scegliere una voce da una lista Interagire con lo spazio web Usabilità e scrittura dei testi per il web 9/165 Giacomo Mason – Febbraio 2010
  • 10. Principi Generali - L’inversione del rapporto testo/paratesto - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Carta Web “Paratesto” “Paratesto” Testo Testo Tutto ciò che sta “accanto”, “di contorno” al testo, al “suo servizio” Es.: titoli, riassunti, tabelle, schemi, figure, decorazioni, ecc. Usabilità e scrittura dei testi per il web 10/165 Giacomo Mason – Febbraio 2010
  • 11. Principi Generali - La parola visuale: la grafica - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" 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 Usabilità e scrittura dei testi per il web 11/165 Giacomo Mason – Febbraio 2010
  • 12. Principi Generali - La parola visuale: dal web alla carta - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Fonte: Luisa Carrada Il mestiere di scrivere, Apogeo 2008 Usabilità e scrittura dei testi per il web 12/165 Giacomo Mason – Febbraio 2010
  • 13. MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Da Roberto Polillo http://www.slideshare.net/rpolillo/12progettare-il-testo Usabilità e scrittura dei testi per il web 13/165 Giacomo Mason – Febbraio 2010
  • 14. Principi Generali - Parola visuale: pagine dense - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" La densità provoca confusione La densità allunga i tempi La densità annulla l’informazione Usabilità e scrittura dei testi per il web 14/165 Giacomo Mason – Febbraio 2010
  • 15. Principi Generali - Parola visuale: pagine dense - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Usabilità e scrittura dei testi per il web 15/165 Giacomo Mason – Febbraio 2010
  • 16. Principi Generali - Pagine “ariose” - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Usabilità e scrittura dei testi per il web 16/165 Giacomo Mason – Febbraio 2010
  • 17. Principi Generali - La parola visuale: esempi a confronto - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Usabilità e scrittura dei testi per il web 17/165 Giacomo Mason – Febbraio 2010
  • 18. MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Agenda 2) Il lettore del web Usabilità e scrittura dei testi per il web 18/165 Giacomo Mason – Febbraio 2010
  • 19. Il lettore del web - Un lettore particolare - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" La pagina è una mappa Le informazioni sono viste come in un paesaggio visto dall’alto In questo paesaggio troviamo punti di riferimento: titoli, sottotitoli, Immagini, colori, link, grassetti, testi Da Luisa Carrada: scrivere per internet – Lupetti 1999 Usabilità e scrittura dei testi per il web 19/165 Giacomo Mason – Febbraio 2010
  • 20. Il lettore del web - Caratteristiche principali della lettura web - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" 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 Usabilità e scrittura dei testi per il web 20/165 Giacomo Mason – Febbraio 2010
  • 21. Il lettore del web - Discontinuità: la lettura “a salti” - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" La lettura “classica”… … e la lettura web Il lettore web è un vero lettore? L’80% dei lettori “scorre” la pagina Usabilità e scrittura dei testi per il web 21/165 Giacomo Mason – Febbraio 2010
  • 22. Il lettore del web - Il rapporto “Eyetrack” - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Osservazione sperimentale dei comportamenti degli utenti attraverso l’analisi dei movimenti oculari, dei tempi di permanenza e dei clic sui link http://www.poynterextra.org/eyetrack2004/index.htm Usabilità e scrittura dei testi per il web 22/165 Giacomo Mason – Febbraio 2010
  • 23. MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Eye tracking nella lettura di un testo sul video: http://it.youtube.com/watch ?v=bW_zDILeevY Usabilità e scrittura dei testi per il web 23/165 Giacomo Mason – Febbraio 2010
  • 24. MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Usabilità e scrittura dei testi per il web 24/165 Giacomo Mason – Febbraio 2010
  • 25. MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Modelli classici e nuovi Fonte: web style guide – 2008 25/165 Giacomo Mason – Febbraio 2010 Usabilità e scrittura dei testi http://webstyleguide.com/wsg3/3-information-architecture/4-presenting-information.html per il web
  • 26. MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Modello a “F” http://www.useit.com/alertbox/reading_pattern.html Usabilità e scrittura dei testi per il web 26/165 Giacomo Mason – Febbraio 2010
  • 27. MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" http://webstyleguide.com/wsg3/3-information-architecture/4-presenting-information.html Usabilità e scrittura dei testi per il web 27/165 Giacomo Mason – Febbraio 2010
  • 28. Il lettore del web - L’effetto della dimensione dei font - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Leggibilità “Scannabilità” 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). Fonte: Poynter Institute - 2004 http://www.poynterextra.org/eyetrack2004/fontsize.htm Usabilità e scrittura dei testi per il web 28/165 Giacomo Mason – Febbraio 2010
  • 29. Il lettore del web - Titoli grandi e piccoli - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Fonte: Poynter Institute - 2004 http://www.poynterextra.org/eyetrack2004/headlinesize.htm Usabilità e scrittura dei testi per il web 29/165 Giacomo Mason – Febbraio 2010
  • 30. Il lettore del web - Finalizzazione - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Lettura come effetto di una determinata ricerca Processo di attenta selezione del testo da leggere Usabilità e scrittura dei testi per il web 30/165 Giacomo Mason – Febbraio 2010
  • 31. Il lettore del web - Testo/Azione - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" La lettura “classica”… … e la lettura web Invio una mail - Clicco - Cambio Leggo pagina – Commento - Aggiungo al carrello … Usabilità e scrittura dei testi per il web 31/165 Giacomo Mason – Febbraio 2010
  • 32. Il lettore del web - Ancoraggi: alle immagini la priorità - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" 3 Le immagini e i titoli sono il primo elemento a cui si presta attenzione, indipendentemente dalla loro collocazione nella pagina 1 2 Le immagini con i visi in maniera ancora più accentuata 4 Usabilità e scrittura dei testi per il web 32/165 Giacomo Mason – Febbraio 2010
  • 33. Il lettore del web - Ancoraggi: titoli e strilli - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Usabilità e scrittura dei testi per il web 33/165 Giacomo Mason – Febbraio 2010
  • 34. Il lettore del web - Altri elementi di ancoraggio - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" All’interno del 2 testo alcuni elementi vengono percepiti prima di altri: Titoli 1 Sottotitoli Grassettature Link 4 Punti-elenco Rappresentano 3 una specie di “bussola” per il lettore e aiutano a “spezzare” il testo in tanti sottotesti Usabilità e scrittura dei testi per il web 34/165 Giacomo Mason – Febbraio 2010
  • 35. Il lettore del web - Il contesto vince sul testo - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Gli elementi di contesto (header, sezioni, data, autore) precedono il testo, poiché servono a collocarlo e da dargli un senso una pagina deve funzionare anche “fuori contesto” - dobbiamo trovare almeno: • Testata • Argomento • Autore • Data Usabilità e scrittura dei testi per il web 35/165 Giacomo Mason – Febbraio 2010
  • 36. Usability dei testi - Elementi di contesto - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" NO Header SI Ogni pagina Path home Sezione Articolo contiene gli elementi di Titolo contesto necessari ad orientarsi • Logo • Tagline • Titolo pagina • Menù di profondità (se possibile) • Ritorno alla home • Footer (data – autore, ecc) Footer Usabilità e scrittura dei testi per il web 36/165 Giacomo Mason – Febbraio 2010
  • 37. Usability dei testi - Elementi di contesto - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" SI NO Usabilità e scrittura dei testi per il web 37/165 Giacomo Mason – Febbraio 2010
  • 38. Il lettore del web - Un esempio con il comune di Venezia - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Di quando è questa guida? Usabilità e scrittura dei testi per il web 38/165 Giacomo Mason – Febbraio 2010
  • 39. MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Agenda 3) Usability dei testi Usabilità e scrittura dei testi per il web 39/165 Giacomo Mason – Febbraio 2010
  • 40. Usability dei testi - Il testo sul web: necessità di riadattarlo - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" 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..) Usabilità e scrittura dei testi per il web 40/165 Giacomo Mason – Febbraio 2010
  • 41. Usability dei testi - Una sola colonna colonna - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" NO SI Il testo è disposto su di una sola colonna, come un “rotolo” virtuale Usabilità e scrittura dei testi per il web 41/165 Giacomo Mason – Febbraio 2010
  • 42. Usability dei testi - Larghezza della colonna - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" NO SI Max 800 pixel 450-500 pixel Fonte: Webstyle guide - 2002 http://www.webstyleguide.com/type/lines.html Usabilità e scrittura dei testi per il web 42/165 Giacomo Mason – Febbraio 2010
  • 43. Usability dei testi - Larghezza della colonna adeguata alla lettura umana - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Fonte: Web style guide http://webstyleguide.com/wsg3/index.html Usabilità e scrittura dei testi per il web 43/165 Giacomo Mason – Febbraio 2010
  • 44. Usability dei testi - Un testo troppo “largo” - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Usabilità e scrittura dei testi per il web 44/165 Giacomo Mason – Febbraio 2010
  • 45. Usability dei testi - Un testo di larghezza corretta - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Usabilità e scrittura dei testi per il web 45/165 Giacomo Mason – Febbraio 2010
  • 46. Usability dei testi - Usate un layout fisso per la larghezza della colonna - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Fonte: Web style guide http://webstyleguide.com/wsg3/index.html Usabilità e scrittura dei testi per il web 46/165 Giacomo Mason – Febbraio 2010
  • 47. Usability dei testi MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" - Lunghezza dei testi - Limitate la lunghezza dei testi degli articoli fra 500 e 3.000 caratteri per un massimo di 2 max 3 schermate Le ricerche di Nielsen confermano che la maggior parte degli utenti non supera le 2,5 schermate Nel caso di testi più lunghi è necessario Un indice iniziale cliccabile Un editing ipertestuale Fonte: Web style guide Usabilità e scrittura dei testi per il web 47/165 Giacomo Mason – Febbraio 2010 http://webstyleguide.com/wsg3/index.html
  • 48. Usability dei testi MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" - Un testo lungo non “trattato” - 42.000 caratteri Nessun indice Nessun editing ipertestuale E’ un testo per la stampa, non per la lettura su web Usabilità e scrittura dei testi per il web 48/165 Giacomo Mason – Febbraio 2010
  • 49. Usability dei testi - Un altro esempio di testo lungo non “trattato” - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Da Roberto Polillo Usabilità e scrittura dei testi per il web 49/165 Giacomo Mason – Febbraio 2010 http://www.slideshare.net/rpolillo/12progettare-il-testo
  • 50. Usability dei testi - Come suddividere il testo? - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Dipende dalle caratteristiche del testo (lunghezza, grado di autonomia delle singole parti) Dipende dal tipo di fruizione che si può ipotizzare da parte del lettore (sequenziale, granulare, focalizzata su alcuni punti) Usabilità e scrittura dei testi per il web 50/165 Giacomo Mason – Febbraio 2010
  • 51. Usability dei testi - Le varie suddivisioni per i testi lunghi - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Sommari Pagine cliccabili sequenziali Sottopagine indici Il testo è formato Il testo sta Il testo sta Il testo sta da tanti sottotesti concettualmente su concettualmente concettualmente autonomi e più livelli di su un solo su un solo omogenei dettaglio “livello” “livello” Il lettore deve Il testo deve Il testo ha una Il testo è focalizzarsi solo su adattarsi a lettori sua unità e non è scomponibile in un frammento che hanno diverse scomponibile parti autonome esigenze di approfondimento Il testo ha senso Il testo deve Il testo ha senso anche se alcune poter essere solo se letto parti non vengono Il testo ha senso stampato sequenzialmente lette anche se alcune parti non vengono lette Usabilità e scrittura dei testi per il web 51/165 Giacomo Mason – Febbraio 2010
  • 52. Usability dei testi - Indici iniziali e “up” per i testi lunghi - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" NO SI Indice cliccabile dei paragrafi all’inizio Bottoni per tornare in alto Nessuno strumento di navigazione interna Usabilità e scrittura dei testi per il web 52/165 Giacomo Mason – Febbraio 2010
  • 53. Usability dei testi - Impaginazione “a bandiera” - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" ok Fonte: Web style guide http://webstyleguide.com/wsg3/index.html Usabilità e scrittura dei testi per il web 53/165 Giacomo Mason – Febbraio 2010
  • 54. Usability dei testi - Il giustificato peggiora la leggibilità - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Evitate di giustificare i testi che vanno in Rete Usabilità e scrittura dei testi per il web 54/165 Giacomo Mason – Febbraio 2010
  • 55. Usability dei testi - Effetti imprevisti del giustificato - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Usabilità e scrittura dei testi per il web 55/165 Giacomo Mason – Febbraio 2010
  • 56. Usability dei testi - Effetti imprevisti del giustificato - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Usabilità e scrittura dei testi per il web 56/165 Giacomo Mason – Febbraio 2010
  • 57. Usability dei testi - Il giustificato non aiuta la lettura - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Usabilità e scrittura dei testi per il web 57/165 Giacomo Mason – Febbraio 2010
  • 58. Usability dei testi - Allineamento: al centro peggiora l’utilizzo - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Analisi dei Sistemi Finanziari MAT/09 6 Analisi Matematica 2 MAT/05 6 Aspetti Epistemologici dell’Informatica INF/01 6 Basi di Dati (Complementi) INF/01 6 Bioinformatica INF/01 6 Business Intelligence MAT/09 6 Calcolo Numerico MAT/08 6 Cibernetica (Elementi di Teoria dei Sistemi) INF/01 6 Computazione Quantistica (Metodi Matematici ed Elementi) INF/01 6 Data Minino MAT/09 6 Economia e Organizzazione Aziendale ING/IND/35 6 Elaborazione delle Immagini (elementi) INF/01 6 Elaborazione Numerica dei Segnali INF/01 6 Fisica Generale 1 (Complementi) FIS/01 6 Fisica Generale 2 (Progettazione Logica Digitale) FIS/01 6 Fondamenti Logico-Matematici dell'Informatica (Elementi) INF/01 6 Gestione di documenti in ambiente WEB INF/01 6 Informatica Applicata (Controlli Automatici) INF/01 6 Informatica Applicata (Grafica) (*) INF/01 6 Informatica Medica INF/01 6 Psicologia Generale 1 (*) M-PSI/01 6 Nel caso di utilizzi particolari (come consultare un elenco) l’allineamento a sinistra diventa una necessità Usabilità e scrittura dei testi per il web 58/165 Giacomo Mason – Febbraio 2010
  • 59. Usability dei testi - Maiuscolo, corsivo, sottolineature - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" L’INIZIATIVA VUOLE MASSIMIZZARE GLI UTILI E RIDURRE LE NO SPESE L’iniziativa vuole massimizzare gli utili e ridurre le spese SI L’iniziativa vuole massimizzare gli utili e ridurre le spese NO SI L’iniziativa vuole massimizzare gli utili e ridurre le spese L’iniziativa vuole massimizzare gli utili e ridurre le spese NO SI L’iniziativa vuole massimizzare gli utili e ridurre le spese Usabilità e scrittura dei testi per il web 59/165 Giacomo Mason – Febbraio 2010
  • 60. Usability dei testi - I difetti del maiuscolo - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" SI E’ VERIFICATO SPERIMENTALMENTE CHE LA LEGGIBILITÁ DI UN TESTO SCRITTO ESCLUSIVAMENTE IN CARATTERI MAIUSCOLI È MINORE DI QUELLA DI UN TESTO SCRITTO IN CARATTERI MAIUSCOLI E MINUSCOLI Si è verificato sperimentalmente che la leggibilità di un testo scritto esclusivamente in caratteri maiuscoli è minore di quella di un testo scritto in caratteri maiuscoli e minuscoli Pattern riconoscibili Conservazione dell’informazione Usabilità e scrittura dei testi per il web 60/165 Giacomo Mason – Febbraio 2010
  • 61. Usability dei testi - Il minuscolo crea un pattern più leggibile - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" L’uso delle minuscole associa ad ogni parola un “pattern” riconoscibile dato dalle ascendenti e dalle discendenti Fonte: Web style guide http://webstyleguide.com/wsg3/index.html Usabilità e scrittura dei testi per il web 61/165 Giacomo Mason – Febbraio 2010
  • 62. Usability dei testi - Il minuscolo crea un pattern più leggibile - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Usabilità e scrittura dei testi per il web 62/165 Giacomo Mason – Febbraio 2010
  • 63. Usability dei testi - Il corsivo aumenta l’effetto “sega” - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Il corsivo si legge male su video perché enfatizza l’effetto “sega” Da Roberto Polillo Usabilità e scrittura dei testi per il web 63/165 Giacomo Mason – Febbraio 2010 http://www.slideshare.net/rpolillo/12progettare-il-testo
  • 64. Usability dei testi - Il corsivo peggiora la leggibilità - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Evitate di scrivere testi tutti in corsivo Usabilità e scrittura dei testi per il web 64/165 Giacomo Mason – Febbraio 2010
  • 65. Usability dei testi - Corsivo: esperimenti sui tempi di lettura - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Indipendentemente dal tipo di font e dal colore, il corsivo aumenta i tempi medi di lettura La leggibilità è data del tempo medio utilizzato da un campione di soggetti per leggere determinati brani di testo (es.: ricerca della prima occorrenza di una fra più parole date nel testo) Fonte: Hill, Scharff - 1997 http://hubel.sfasu.edu/research/AHNCUR.html Usabilità e scrittura dei testi per il web 65/165 Giacomo Mason – Febbraio 2010
  • 66. Usability dei testi - Font - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Fonte: Web style guide http://webstyleguide.com/wsg3/index.html Usabilità e scrittura dei testi per il web 66/165 Giacomo Mason – Febbraio 2010
  • 67. Usability dei testi - Due tipi di font - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Carattere con “grazie” Carattere a “bastoni” Usabilità e scrittura dei testi per il web 67/165 Giacomo Mason – Febbraio 2010
  • 68. Usability dei testi - I font migliori (e i peggiori) - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" L’iniziativa vuole massimizzare gli utili e ridurre le spese attraverso una accurata politica di investimenti a medio e lungo termine (times new roman) NO L’iniziativa vuole massimizzare gli utili e ridurre le spese attraverso una accurata politica di investimenti a medio e lungo termine (Garamond) L’iniziativa vuole massimizzare gli utili e ridurre le spese SI attraverso una accurata politica di investimenti a medio e lungo termine (arial) L’iniziativa vuole massimizzare gli utili e ridurre le spese attraverso una accurata politica di investimenti a medio e lungo termine (verdana) Usabilità e scrittura dei testi per il web 68/165 Giacomo Mason – Febbraio 2010
  • 69. Usability dei testi - Il Times New Roman peggiora la leggibilità - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Usabilità e scrittura dei testi per il web 69/165 Giacomo Mason – Febbraio 2010
  • 70. MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Font sbagliati Usabilità e scrittura dei testi per il web 70/165 Giacomo Mason – Febbraio 2010
  • 71. Usability dei testi - Verifiche sperimentali: percezione degli utilizzatori - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Arial Verdana Time s N.B. La percezione può non Fonte: Bernard et al, 2001 coincidere con i tempi di lettura http://psychology.wichita.edu/surl/usabilitynews/3S/font.htm Usabilità e scrittura dei testi per il web 71/165 Giacomo Mason – Febbraio 2010
  • 72. Usability dei testi - Dimensioni e interlinea dei caratteri - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Un esperimento: (Williams, Scharff) Usare preferibilmente almeno caratteri in corpo 12 Da Roberto Polillo Usabilità e scrittura dei testi per il web 72/165 Giacomo Mason – Febbraio 2010 http://www.slideshare.net/rpolillo/12progettare-il-testo
  • 73. Usability dei testi - Indagine di M. Bernard (2003) sui tempi di lettura - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" La resa migliore (tempo medio di riconoscimento lettere) si ha con i caratteri in corpo 12 , in particolare Thaoma e Verdana (ma anche Times) Fonte: Bernard et al, 2003 http://psychology.wichita.edu/optimalweb/text.htm Usabilità e scrittura dei testi per il web 73/165 Giacomo Mason – Febbraio 2010
  • 74. Usability dei testi - Rapporto testo-sfondo - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" NO NO SI Usabilità e scrittura dei testi per il web 74/165 Giacomo Mason – Febbraio 2010
  • 75. Usability dei testi - Rapporto testo-sfondo - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" SI NI NO Nero su bianco Bianco su nero Rosso su verde Bianco su Azzurro Nero su giallo Fucsia su blu Blu su bianco Grigio su nero Verde su giallo Nero su grigio Usabilità e scrittura dei testi per il web 75/165 Giacomo Mason – Febbraio 2010
  • 76. Usability dei testi - Rapporti testo-sfondo sbagliati - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Usabilità e scrittura dei testi per il web 76/165 Giacomo Mason – Febbraio 2010
  • 77. Usability dei testi - Contrasti che non favoriscono la leggibilità - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Usabilità e scrittura dei testi per il web 77/165 Giacomo Mason – Febbraio 2010
  • 78. Usability dei testi - Evitate sfondi elaborati nel testo - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Usabilità e scrittura dei testi per il web 78/165 Giacomo Mason – Febbraio 2010
  • 79. Usability dei testi - Rapporto testo-sfondo: indagini empiriche - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Fonte: Lauren Scharff 1997 http://hubel.sfasu.edu/research/survreslts.html Usabilità e scrittura dei testi per il web 79/165 Giacomo Mason – Febbraio 2010
  • 80. Usability dei testi - Usare pochi colori e dare loro un significato - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" NO Gli obiettivi dell’iniziativa L’iniziativa vuole massimizzare gli utili e ridurre le spese attraverso una accurata politica di investimenti a medio e lungo termine SI Gli obiettivi dell’iniziativa L’iniziativa vuole massimizzare gli utili e ridurre le spese attraverso una accurata politica di investimenti a medio e lungo termine Usabilità e scrittura dei testi per il web 80/165 Giacomo Mason – Febbraio 2010
  • 81. MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Troppi colori Usabilità e scrittura dei testi per il web 81/165 Giacomo Mason – Febbraio 2010
  • 82. Usability dei testi - Colori a profusione - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Usabilità e scrittura dei testi per il web 82/165 Giacomo Mason – Febbraio 2010
  • 83. Usability dei testi - Non affiancate colori lontani nello spettro - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" caratteri di colori lontani sullo spettro vengono messi a fuoco su piani diversi Da Roberto Polillo 83/165 Giacomo Mason – Febbraio 2010 Usabilità e scrittura dei testi per il web http://www.slideshare.net/rpolillo/12progettare-il-testo
  • 84. MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Esempio di rosso su sfondo blu Non si riesce a mettere a fuoco Usabilità e scrittura dei testi per il web 84/165 Giacomo Mason – Febbraio 2010
  • 85. MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Da questo esempio si vede la difficoltà di messa a fuoco contemporanea del rosso e del blu: da molti le righe di questi due colori vengono viste, per i motivi descritti, come se fossero collocate a distanze diverse dagli occhi. Questo fenomeno non si verifica se si usano due colori che si trovino fra loro più vicini sullo spettro visibile, come si può facilmente verificare da questo secondo esempio, che non dovrebbe presentare l’effetto tridimensionale di cui sopra. Usabilità e scrittura dei testi per il web 85/165 Giacomo Mason – Febbraio 2010 Da Roberto Polillo
  • 86. Usability dei testi - Niente animazioni nel testo - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" NO SI Usabilità e scrittura dei testi per il web 86/165 Giacomo Mason – Febbraio 2010
  • 87. MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Agenda 4) Formattazione Usabilità e scrittura dei testi per il web 87/165 Giacomo Mason – Febbraio 2010
  • 88. Usability dei testi - Il problema dei blocchi di testo - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" I blocchi di testo troppo fitti spaventano il lettore Sul web è difficile mantenere dei punti di riferimento e l’occhio si stanca prima E’ necessario spezzare l’omogeneità introducendo elementi di rilevanza e bussole di riferimento Usabilità e scrittura dei testi per il web 88/165 Giacomo Mason – Febbraio 2010
  • 89. MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Usabilità e scrittura dei testi per il web 89/165 Giacomo Mason – Febbraio 2010
  • 90. MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Usabilità e scrittura dei testi per il web 90/165 Giacomo Mason – Febbraio 2010
  • 91. Usability dei testi - Spazi, blocchi, impaginazione - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" NO SI Vari blocchi di testo il più possibile uniformi spazi tra i paragrafi e all’interno della pagina Impaginazione a bandiera Blocco unico di testo Nessuno spazio Impaginazione giustificata Usabilità e scrittura dei testi per il web 91/165 Giacomo Mason – Febbraio 2010
  • 92. Usability dei testi - Blocchi di testo: meglio se molto corti - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Blocchi corti La ricerca rivela che (4 - 5 righe) con blocchi di testo medio lunghi (9-10 righe) l’efficacia si riduce di più della metà Blocchi medio- (durata e numero di lunghi fissazioni dello (9 - 10 righe) sguardo) Fonte: Poynter Institute - 2004 http://www.poynterextra.org/eyetrack2004/articlepages.htm Usabilità e scrittura dei testi per il web 92/165 Giacomo Mason – Febbraio 2010
  • 93. Usability dei testi - Uso dei blocchi di testo - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Ok NO Usabilità e scrittura dei testi per il web 93/165 Giacomo Mason – Febbraio 2010
  • 94. Formattazione e ancoraggi - Uso dei blocchi di testo - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" NO NO Usabilità e scrittura dei testi per il web 94/165 Giacomo Mason – Febbraio 2010
  • 95. Usability dei testi - Uso dei blocchi di testo - MIUR - Percorso formativo: Siti WEB e comunicazione istituzionale" Usabilità e scrittura dei testi per il web 95/165 Giacomo Mason – Febbraio 2010