Progettazione dei contenuti
•Scrivere per il web
•Il dono della sintesi
•A favore del colpo d’occhio
•Scrolling? no grazie
•Psicologia del colore
• rosso si, rosso no…
Scrivere per il web
Obiettivo utenti = contenuti
•
Essere sintetici
–
•
Non scrivere + del 50 % del testo cartaceo
Essere comprensibili, immediati
–
•
Comprensibile a colpo d’occhio, paragrafi brevi,
sottotitoli, liste puntate
Spezzare i testi lunghi
–
Grandi quantità di informazioni su più pagine
Scrivere per il web
•
Essere sintetici
Lettura schermo più lenta del 25% rispetto a quella
cartacea
Non piace scorrere la finestra
Solo una minoranza legge parola per parola
Scrivere per il web
•
Essere comprensibili, immediati
Strutturare i testi su due tre livelli di titoli
Titoli nidificati per portatori di handicap visivi che
impiegano interfacce a sintesi vocale
Titoli significativi piuttosto che ad effetto
Scrivere per il web
•
Spezzare i grandi testi
Evidenziare per attirare l’attenzione dell’utente
Enfatizzare magari con del testo colorato
Usare liste puntate
LA SICILIA E’ RICCA DI ATTRATTIVE
RICONOSCIUTE A LIVELLO
INTERNAZIONALE CHE OGNI ANNO
ATTIRANO GRANDI QUANTITà DI
VISITATORI. NEL 1996, LE LOCALITA’
PIU’ POPOLARI SONO STATE IL TEATRO
GRECO DI TAORMINA (355.000
VISITATORI), IL MUSEO DI SIRACUSA
(132.166), LA VALLE DEI TEMPLI
(900.000), LE ISOLE EOLIE
(1.000.000), IL BAROCCO DI NOTO
(200.000).
Scrivere per il web
• Testo
promozion
ale
• Usa
linguaggio
da
marketing
che si
ritrova in
molti siti
web
commerci
ali o
aziendali
La Sicilia è ricca di
attrattive riconosciute a
livello internazionale che
ogni anno attirano grandi
quantità di visitatori. Nel
1996, le località più
popolari sono state il
teatro greco di
Taormina(355.000
visitatori), il museo di
Siracusa (132.166), la
Valle dei templi
(900.000), le isole eolie
(1.000.000), il barocco di
Noto (200.000).
condizione di
partenza
Scrivere per il web
• Impaginaz
ione
scorribile
• Usa lo
stesso
testo della
condizione
di
controllo
con una
impaginaz
ione che
facilità la
scorribilità
•
•
•
•
•
La Sicilia è ricca di
attrattive riconosciute a
livello internazionale che
ogni anno attirano grandi
quantità di visitatori. Nel
1996, le località più
popolari sono state:
il teatro greco di
Taormina(355.000
visitatori),
il museo di Siracusa
(132.166),
la Valle dei templi
(900.000),
le isole eolie
(1.000.000),
il barocco di Noto
(200.000).
Migliora del
47%
Scrivere per il web
• Testo
conciso
• Metà delle
parole
rispetto
alla
condizione
di
partenza
Nel 1996, le 5
attrazioni più visitate
della Sicilia sono
state, Taormina, il
museo di Siracusa,
la Valle dei templi, le
Isole Eolie e Noto
Migliora del
58%
Scrivere per il web
• Linguaggi
o
oggettivo,
neutro
• Per il
resto è
identica
alla
condizione
di
controllo
La Sicilia ha numerose
attrattive. Nel 1996,
alcune delle localita più
visitate sono state il
teatro greco di
Taormina(355.000
visitatori), il museo di
Siracusa (132.166), la
Valle dei templi
(900.000), le isole eolie
(1.000.000), il barocco di
Noto (200.000).
Migliora del
27%
Scrivere per il web
• Versione
combinata
• Adotta
tutti e tre
gli stili:
impaginaz
ione
scorribile,
testo
conciso e
linguaggio
oggettivo
Nel 1996, le sei localita più
visitate della Sicilia sono
state:
•
•
il teatro greco di
Taormina
il museo di Siracusa
• la Valle dei templi
•
le isole eolie
• il barocco di Noto
Migliora del
124%
Scrivere per il web
¿ Piccoli trucchi ?
Principio della piramide capovolta
“mettere il materiale più
importante all’inizio”
Mettere nella condizione
di cogliere a colpo
d’occhio contenuti
di una pagina e
l’utilità che
può avere
Scrivere per il web
¿ Piccoli trucchi ?
•
Rendendo snello, stringato il testo
•
fare emergere le informazioni più
importanti
Scrivere per il web
¿ Piccoli trucchi ?
•
Iniziare con una breve
conclusione, arricchita via via da successivi
dettagli
vantaggio
•
Pagine concise, autoconsistenti ed
indipendenti
Scrivere per il web
¿ Piccoli trucchi ?
•
Un’ idea per paragrafo
“usare frasi semplici”
gli utenti leggono solo la prima frase di ciascun
paragrafo
Scrivere per il web
¿ Piccoli trucchi ?
•
Prima parola significativa
•
Microcontenuto conciso
•
Spiegare chiaramente l’argomento
cominciare
con il nome della società, della persona
non usare
l’articolo per cominciare
il micro-contenuto deve riassumere il macrocontenuto
ad esso associato
Scrivere per il web
¿ Piccoli trucchi ?
•
Evitare giochi di parole
“non usare doppi sensi”
gli utenti internazionali che hanno poca familiarità con
la lingua potrebbero non capirli e sviluppare un senso
di smarrimento
Scrivere per il web
Scrivere per il web
Studio di usabilità
•
I primi utenti, ’94-’95 non facevano
mai scorrere il contenuto delle finestre
•
Solo il 10% andava
della prima schermata
•
Sceglievano invariabilmente come
oltre le informazioni
link per navigare
solo quelli presenti nella prima schermata
Scrivere per il web
Insegnamenti tratti
•
Pagine brevi
•
Link più importanti sulla prima schermata
•
Limitare l’uso di link intra-pagina
•
Intestazioni stringate come slogan pubblicitari
•
Scrivere per essere trovati
Scrivere per il web
progettazione
Rapidità caricamento
Qualità contenuti
Leggibilità
Scrivere per il web
Leggibilità
•
Colori dello sfondo e testo devono
creare un forte contrasto
testo nero su sfondo bianco (testo positivo)
testo bianco su sfondo nero (testo negativo)
•
Dimensioni del testo sufficientemente
grandi
anche le persone con difficoltà visive devono leggerle
Scrivere per il web
Leggibilità
•
Usare solo testi statici
Il testo che si muove , che lampeggia rende difficile la
lettura
•
Testo allineato
Caratteri a bastone (sans-serif)
•
Evitare il maiuscolo
Rallenta la lettura
Scrivere per il web
Primo colore lettere
Secondo colore sfondo
classifica
tempi di lettura
Nero su giallo
1
1.31 – 1.33 sec.
Giallo su nero
2
1.34 – 1.40
Verde su bianco
3
1.35 - 1.30
Rosso su bianco
4
1.36 – 1.26
Nero su bianco
5
1.36 – 1.32
Bianco su blu
6
1.36 – 1.37
Blu su rosso
19
1.43 – 1.40
Verde su arancio
30
1.58 – 1.47
Scrivere per il web
Testing The Readability Of Web Page Colors
C.Ridpath, J.Treviranus, P.Weiss
Difference In Brightness transformation from RGB values to Luminance, Intensity and Crominance
(YIQ) value
Y=((R X 299) + (G X 587) + (B X 114)) / 1000 (0-255)
Difference In Hue - To measure the difference in hue we used the following algorithm:
(maximum (Red value 1, Red value 2) - minimum (Red value 1, Red value 2)) +
(maximum (Green value 1, Green value 2) - minimum (Green value 1, Green value 2))
+ (maximum (Blue value 1, Blue value 2) - minimum (Blue value 1, Blue value 2))
(0-765)
Background
Text
Red
0
Green
0
Blue
51
255
255
204
Background brightness=(( 0 X 299) + (0 X 587) + (51 X 114)) / 1000=6
Text brightness=((255 X 299) + (255 X 587) + (204 X 114)) / 1000=249
Difference in hue=((red text 255) - (red background 0)) + ((green text 255 - green
background 0)) + ((blue text 204 - blue background 51))
In the above example, the contrast (difference in brightness)=(249 - 6)=243 and the
difference in color (hue)=663.
Scrivere per il web
Testing The Readability Of Web Page Colors
C.Ridpath, J.Treviranus, P.Weiss
A total of 42 samples were used in the study including 35 unique and randomly selected samples
and 7 duplicate samples (which were used to test the reliability of the user's ratings). The sample
text blocks were displayed using images stored in the GIF file format.
Scrivere per il web
Testing The Readability Of Web Page Colors
C.Ridpath, J.Treviranus, P.Weiss
Scrivere per il web
Testing The Readability Of Web Page Colors
C.Ridpath, J.Treviranus, P.Weiss
Scrivere per il web
A Comparison of Popular Online Fonts: Which is
Best and When?
Michael Bernard, Melissa Mills, Michelle Peterson, & Kelsey Storrer
A general survey of the Web finds that a majority of sites use 12-point fonts (size= 3)
for much, if not all of their written content. With this in mind, we examined the most
popular font types at this size for differences in effective reading speed (reading
time/accuracy), as well the perception of font legibility.
Sans Serif Fonts (Agency FB (Agency),Arial,Comic Sans MS (Comic),Tahoma,Verdana);
Serif Fonts (Courier New (Courier) Georgia Goudy Old Style (Goudy) Century Schoolbook
Times New Roman (Times))
Ornate Fonts (Bradley Hand ITC (Bradley), Monotype Corsiva (Corsiva) )
Scrivere per il web
A Comparison of Popular Online Fonts: Which is
Best and When?
Michael Bernard, Melissa Mills, Michelle Peterson, & Kelsey Storrer
Twenty-two participants (7 males and 15 females) volunteered for this study. They
ranged in age from 20 to 44, with a mean age of 25
Participants were positioned at a fixed distance of approximately 57 cm from the
computer screen. They were then asked to read “as quickly and as accurately as possible”
the passages which contained 15 randomly placed substitution words
To accurately determine font legibility and its associated effect on reading time, an
effective reading score was used. The score was derived from obtaining the percentage of
accurately detected substituted words in the passages divided by the time taken to read the
passages—which was registered by a stopwatch.
Scrivere per il web
A Comparison of Popular Online Fonts: Which is
Best and When?
Michael Bernard, Melissa Mills, Michelle Peterson, & Kelsey Storrer
Figure 1. Reading time in seconds (longer bars indicated longer reading times)
Scrivere per il web
A Comparison of Popular Online Fonts: Which is
Best and When?
Michael Bernard, Melissa Mills, Michelle Peterson, & Kelsey Storrer
Figure 2. Perceived font legibility (1 = “Not at all” and 6 = “Completely”)
Figure 2. Perceived font legibility (1 = “Not at all” and 6 = “Completely”)
Scrivere per il web
A Comparison of Popular Online Fonts: Which is
Best and When?
Michael Bernard, Melissa Mills, Michelle Peterson, & Kelsey Storrer
Figure 4. Perceived as being elegant (1 = “Not at all” and 6 = “Completely”).
Scrivere per il web
A Comparison of Popular Online Fonts: Which is
Best and When?
Michael Bernard, Melissa Mills, Michelle Peterson, & Kelsey Storrer
Figure 5. Perceived as being youthful & fun (1 = “Not at all” and 6 =
“Completely”).
Scrivere per il web
A Comparison of Popular Online Fonts: Which is
Best and When?
Michael Bernard, Melissa Mills, Michelle Peterson, & Kelsey Storrer
Figure 6. Perceived as being business-like (1 = “Not at all” and 6 =
“Completely”).
Scrivere per il web
A Comparison of Popular Online Fonts: Which is
Best and When?
Michael Bernard, Melissa Mills, Michelle Peterson, & Kelsey Storrer
Figure 7. Font preference (longer bars indicates more preferred).
Scrivere per il web
A Comparison of Popular Online Fonts: Which is
Best and When?
Michael Bernard, Melissa Mills, Michelle Peterson, & Kelsey Storrer
Figure 8. Percentage chosen as first or second preference choice.
Scrivere per il web
Psicologia del colore
•
Rosso
è stato dimostrato che l’esposizione a
questo colore accelera i battiti cardiaci e
stimola la produzione di adrenalina.
Il rosso è il colore dell’amore e del cuore, del
dinamismo e della vitalità, dell’autorità e della
fierezza.
Scrivere per il web
Psicologia del colore
•
Blu
in una stanza blu i battiti cardiaci
diminuiscono e la sensibilità al freddo
aumenta. Gli oggetti sembrano più
piccoli e leggeri.
E’ il colore del silenzio, della calma e della tranquillità
Scrivere per il web
Psicologia del colore
•
Verde
significa forza, perseveranza, equilibrio
e stabilità.
E’ il colore della vegetazione, della natura e della vita
stessa anche se alcune volte è stato associato ad una
simbologia negativa
Scrivere per il web
Psicologia del colore
•
Arancione
significa serenità, allegria. Si ottiene
dall’unione del giallo con il rosso.
Adatto a stati di insoddisfazione,
pessimismo, depressione, paura.
E’ rasserenante, si usa per stimolare
l’appetito, l’entusiasmo e combattere la
svogliatezza sul lavoro
Scrivere per il web
Psicologia del colore
•
Viola
agisce sull’inconscio, dà forza spirituale
e ispirazione.
E’ il colore dello spirito che rinforza ogni effetto della
meditazione