La comunicazione di un sito - Dipartimento di Ingegneria dell
annuncio pubblicitario
Comunicazione
Il sito raggiunge i suoi obiettivi di comunicazione?
2. Comunicazione
Lo stile di comunicazione deve tenere
conto dell’utenza cui e’ indirizzato
Home page:
page La home page comunica
chiaramente gli obiettivi del sito?
Brand image:
image Il sito è coerente con la brand
image?
Grafica:
Grafica La grafica del sito è adeguata?
WWW
Informatica applicata alla Psicologia
2
Home page: linee guida di
Nielsen
…continua…
Rendere chiari gli scopi del sito:
spiega chi sei e cosa fai
Aiutare gli utenti a trovare ciò di cui
hanno bisogno
1. Usa una frase-slogan esplicativo
2. Usa un titolo visibile nei motori di ricerca
3. Raggruppa le informazioni sull'azienda in
un'area apposita
WWW
Informatica applicata alla Psicologia
3
4. Enfatizza l'obiettivo principale del sito
5. Prevedi l'opzione di ricerca
WWW
…continua…
WWW
Informatica applicata alla Psicologia
4
…continua…
Mostrare il contenuto del sito
6. Mostra esempi di contenuto
7. Usa nomi dei link significativi
8. Offri un facile accesso a
promossi dalla home page
Informatica applicata alla Psicologia
Usare la grafica come ausilio non
come strumento per l'interazione
9. Non sovraccaricare graficamente
elementi di navigazione
10.Usa una grafica significativa
prodotti
5
WWW
Informatica applicata alla Psicologia
gli
6
1
I “payoff”
Frasi che caratterizzano sinteticamente
lo scoposlogan
del sito frase esplicativa
titolo
Accostate al logo
Accompagnate da una descrizione più
estesa dello scopo del sito
WWW
Informatica applicata alla Psicologia
7
WWW
Informatica applicata alla Psicologia
8
…continua…
<html>
<head>
<html>
<title>Untitled Document</title>
<head>
</head>
<body>
<title>Untitled Document</title>
Pippo.htm
<P onmouseover="this.style.color='red'"
</head>
<body>
onmouseout="this.style.color='black'">
Pippo.
<a href="....."
</body>
title="Pippo e' un cane" target="_top">Pippo</a>
</html>
</body>
</html>
WWW
Informatica applicata alla Psicologia
9
WWW
if (document.images) {
a = new Image
b = new Image
a.src = "a.png"
b.src = "b.png"
}
else {
a = ""
b = ""
document.ab = ""
}
// Fino a qui è nascosto -->
WWW
</SCRIPT>
</HEAD>
<BODY BGCOLOR=WHITE>
<A HREF="../../../../next.html"
onMouseover="document.ab.src=b.src"
onMouseout="document.ab.src=a.src">
<IMG SRC="a.png" NAME="ab">
</A>
</BODY>
</HTML>
Informatica applicata alla Psicologia
10
…continua…
…rollover…
<HTML>
<HEAD>
<TITLE>Rollover</TITLE>
<SCRIPT LANGUAGE=JAVASCRIPT>
<!-- Nascondi lo script ai vecchi browser
Informatica applicata alla Psicologia
rollover
Roll.htm
11
WWW
Informatica applicata alla Psicologia
12
2
Che cos’è un “brand”?
“Una miscela di attributi tangibili e
intangibili, simbolizzata in un marchio,
che, se gestita correttamente, crea
influenza e genera valore”
(da: R.Clifton, E.Maughan (a cura di), “The future of brands”,Interbrand, MacMillan,
2000)
Brand
Brand image:
image Il sito è coerente con la brand image?
WWW
Informatica applicata alla Psicologia
13
WWW
Informatica applicata alla Psicologia
14
Verificare che la impostazione del sito
sia coerente con i “tratti distintivi del
brand”
WWW
Informatica applicata alla Psicologia
15
WWW
Informatica applicata alla Psicologia
16
WWW
Informatica applicata alla Psicologia
17
WWW
Informatica applicata alla Psicologia
18
www.cocacola.com nel 2001
CocaCola tedesca nel 2003
3
WWW
Informatica applicata alla Psicologia
CocaCola USA nel 2003
19
WWW
Informatica applicata alla Psicologia
www.cocacola.com nel 2003
20
Gestalt
Comunicazione: Grafica
La grafica del sito è adeguata?
Gestalt
Gestalt:
Gestalt Il layout delle pagine facilita la
comprensione dei contenuti?
Colore
Colore:
Colore Il colore è usato in modo
adeguato?
Tipografia
Tipografia:
Tipografia I caratteri usati rendono il
testo ben leggibile?
Attrattiva
Attrattiva:
Attrattiva La grafica è attraente?
WWW
Informatica applicata alla Psicologia
Maggiori informazioni:
http://www.webstyleguide.com/
21
Gestalt
WWW
Informatica applicata alla Psicologia
22
Colore
Maggiori informazioni:
http://www.webstyleguide.com/
WWW
Informatica applicata alla Psicologia
23
WWW
Informatica applicata alla Psicologia
24
4
Colore
WWW
Colore
Informatica applicata alla Psicologia
25
Colore
WWW
WWW
Informatica applicata alla Psicologia
26
Colore
Informatica applicata alla Psicologia
27
WWW
Informatica applicata alla Psicologia
28
Informatica applicata alla Psicologia
29
WWW
Informatica applicata alla Psicologia
30
Colore
WWW
5
Tipografia
WWW
1.
2.
3.
4.
5.
6.
7.
WWW
Informatica applicata alla Psicologia
31
WWW
Informatica applicata alla Psicologia
32
Link: linee guida
…continua…
I link migliori sono quelli testuali
Usare sempre la sottolineatura
Usare la sottolineatura solo per i link
Usare il colore convenzionale
Distinguere link visitati da link non visitati
Non disporre il link testuale su due righe
Linkare poche e significative parole
8. Usare nomi coerenti e significativi
9. Fornire contesto ai link
10. Far comparire una breve descrizione del
link
11. Anticipare la particolare pesantezza di una
pagina che viene linkata
12. Specificare se il link rimanda ad un
documento di formato di verso da html
13. Non usare link interni alla stessa pagina
Informatica applicata alla Psicologia
33
WWW
14. Non aprire il link in nuove finestre
15. Non fornire elenchi troppo lunghi di
link
16. Controllare frequentemente che i link
siano attivi
17. Accertarsi che i link siano corretti
Informatica applicata alla Psicologia
Informatica applicata alla Psicologia
34
Scrivere per il web
..continua…
WWW
Usare caratteri senza grazie
Utilizzare stili generici universali
Evitare corsivi e uderline
Evitare Maggiori
tutto maiuscolo
informazioni:
Evitare http://www.webstyleguide.com/
colori saturi
Testo e sfondo cromaticamente distinti
Evitare caratteri di colori che si trovano in
posizioni lontane sullo spettro
Evitare
l’eccessivo
diverisificarsi
di
dimensioni, font
35
“Gli utenti non leggono sul web, ma ne
scorrono le pagine”
J.Nielsen
Scrivere testi che si possano scorrere
facilmente e rapidamente (“scannable text”)
WWW
Informatica applicata alla Psicologia
36
6
Giornali on-line e giornali tradizionali:
differenze
“Scannable text”
grande
scrolling
Titoli e sottotitoli brevi e significativi (e non di
effetto)
Parole chiave evidenziate (neretto,
sottolineato, link ipertestuali, …)
Paragrafi brevi: un concetto per paragrafo
Pagine brevi: evitare o ridurre lo scrolling
“Metà parole di un testo tradizionale”
“Inverted pyramid style”
“Get to the point”: fatti, non parole
piccolo
bidimensionalità
lin
k
f
& ollo
ba wi
ck n g
WWW
Informatica applicata alla Psicologia
37
WWW
Informatica applicata alla Psicologia
38
WWW
Informatica applicata alla Psicologia
39
WWW
Informatica applicata alla Psicologia
40
Attrattiva
Difetti oggettivi:
1. Paragrafi e riquadri disallineati
2. Uso caotico dei font
3. Sfondi invadenti
4. Testo illeggibile
5. Dimensione caratteri inappropriata
6. Uso del colore casuale
7. Immagini inutili
WWW
Informatica applicata alla Psicologia
41
WWW
Informatica applicata alla Psicologia
42
7
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
Top Ten degli errori nel web
design
J. Nielsen
1996 - 1999
WWW
Top ten - 1996
Usare frame
Uso gratuito della tecnologia più recente
Testo in movimento, animazioni
URL complicate
Pagine orfane
Pagine molto lunghe da scorrere
Carenza di supporto nella navigazione
Colori dei link non standard
Informazioni non aggiornate
Tempi lunghi di caricamento
Informatica applicata alla Psicologia
44
Top ten - 1999
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
WWW
Impedire o rallentare l'azione del tasto "Back"
Aprire nuove finestre del browser
Uso non standard dei widgets GUI
Mancanza di biografie
Spostare le pagine a nuovi URL
Mancanza di archivi storici
Intestazioni non significative fuori dal contesto
Rincorrere l'ultima moda di internet
Tempi lunghi di risposta
Qualunque cosa che assomigli ad un "Messaggio di
errore"
Informatica applicata alla Psicologia
45
8
