Alcune regola per realizzare un sito web adeguatamente navigabile dall'utente #usability

1. USABILITA’ SITO WEB
(Steve Krug – Don’t Make Me
Think)
Gilberto Del Pizzo
Creative Strategies

2. STEVE KRUG
Steve Krug è uno dei
massimi esperti mondiali
di usabilità.
Una sua consulenza per
un sito Web viene pagata
anche 20.000 $
10/11/2017 2

3. NON COSTRINGETEMI A PENSARE
Questa è la prima legge di
usabilità.
E’ il primo elemento per
capire se il progetto
funziona o meno.
Devo capire di cosa si
tratta senza fare alcun
sforzo mentale!
10/11/2017 3

4. PROPOSTA AUTOMATICA
Ad esempio per scegliere
una destinazione per una
prenotazione è buona
prassi, scrivendo le prime
tre lettere, avere l’elenco
delle città compatibili
10/11/2017 4

5. COME UTILIZZIAMO IL WEB
L’utente non legge
attentamente i contenuti
ma da una rapida occhiata
ad ogni pagina, legge
parte del testo e fa click
sul primo Link che cattura
il suo interesse
10/11/2017 5

6. OBIETTIVO DELL’UTENTE
Quando navighiamo su un
sito Web abbiamo un
obiettivo che di solito
vogliamo raggiungere in
fretta.
Necessitiamo di capire
perciò in fretta se quel sito
sia in grado di aiutarci
10/11/2017 6

7. PAROLE ATTRATTIVE
Il nostro cervello
sicuramente risponde con
maggiore velocità quando
si trova di fronte ad alcune
parole come «GRATIS»,
«OFFERTA» e «SESSO»
oltre naturalmente al
proprio nome
10/11/2017 7

8. SCELTE SODDISFACENTI
Il più delle volte,
navigando in un sito Web,
non scorriamo tutte le
opzioni ma scegliamo la
prima opzione ragionevole
(strategia nota come
satisficing)
10/11/2017 8

9. LE ISTRUZIONI?
Di fronte ad un acquisto
tecnologico pochissime
persone leggono le
istruzioni, Generalmente
cerchiamo di scoprire il
funzionamento fidandoci
del nostro intuito
10/11/2017 9

10. CARTELLONI PUBBLICITARI
E allora Steve Krug
consiglia, con le dovute
accortezze, di progettare i
siti Web come degli ottimi
cartelloni pubblicitari
fornendo agli utenti,
rapidamente, quanto
devono sapere
10/11/2017 10

11. I PRIMI ELEMENTI
Gli utenti si aspettano di
trovare il Logo nell’angolo
a sinistra del sito.
La navigazione principale
in alto (orizzontale) o a
sinistra (verticale)
Se volete innovare siate
sicuri che la vostra idea
funzioni
10/11/2017 11

12. LA TAGLINE
La Tagline è una breve
frase che caratterizza
l’attività aziendale.
Sul sito Web l’utente se la
aspetta appena sotto il
Logo e deve essere chiara
e informativa spiegando
esattamente l’attività
aziendale
10/11/2017 12

13. LA CHIAREZZA BATTE LA COERENZA
Se potete rendere
qualcosa molto più chiaro
a prezzo di una piccola
perdita di coerenza optate
per la chiarezza.
10/11/2017 13

14. GERARCHIA VISIVA
• Un elemento più è
importante più è visibile
• Gli elementi che sono
collegati logicamente
sono collegati
visivamente
• Gli elementi sono
visivamente nidificati per
mostrare cosa è parte di
cosa
10/11/2017 14

15. COME UN QUOTIDIANO
Le gerarchie visive sono
utilizzate nei giornali.
Tutte le pagine utilizzano i
titoli (di varie grandezze)
per dare evidenza alle
notizie ed usano la
nidificazione per darci le
informazioni sul
contenuto
10/11/2017 15

16. MINIMIZZARE IL «RUMORE»
Il rumore visivo è un
grande nemico. Evitare
che tutti i contenuti
abbiamo la stessa
importanza (urli), evitare
la disorganizzazione dei
contenuti ed evitare di
inserire troppe cose!
10/11/2017 16

17. I TESTI
Assicurarsi che i titoli
siano vicini al paragrafo.
Mantenere paragrafi brevi
Usare elenchi puntati per
facilitare la leggibilità
Evidenziare i termini
chiave (ma non troppi)
10/11/2017 17

18. AIUTO ?
Un sito ben progettato
non dovrebbe necessitare
di aiuto.
Ma se lo volete prevedere
che sia Breve, Tempestivo
(nel luogo giusto) ed
Inevitabile (formattato in
modo che si noti)
10/11/2017 18

19. OMETTERE LE PAROLE INUTILI
Eliminare metà delle
parole che vorreste
inserire permette:
- Ridurre il rumore
- Rendere più visibili i
contenuti utili
- Rendere le pagine più
brevi
10/11/2017 19

20. NAVIGAZIONE WEB
L’utente che entra nel sito,
per poterlo navigare avrà
due comportamenti:
• Cercherà di capire la
struttura dal menù e
sottomenù
• Se il sito è molto grande
utilizzerà il motore
10/11/2017 20

21. STRUTTURA SITO WEB
Le sezioni principali del
sito dovranno essere ben
identificabili
Le sottosezioni dovranno
essere altrettanto
ordinate e visivamente
identificabili
10/11/2017 21

22. POSIZIONE ELEMENTI
Le sezioni principali del La
Home page del sito è la
stella polare. Da ogni
posizione in cui mi trovi
con un click devo poter
tornare alla Home.
In alto a destra ci vanno le
Utility (Login, Contatti)
10/11/2017 22

23. NOME DELLA PAGINA
I nomi delle Pagine sono i
segnali stradali del Web.
Tutte le pagine devono
avere un Nome che deve
stare in testa e deve
racchiudere il contenuto
10/11/2017 23

24. VOI SIETE QUI
L’utente deve sempre
sapere dove si trova sul
sito Web e perciò va
evidenziato sul Menù ( e
sul sottomenù) l’esatta
posizione della pagina.
Usate puntatori, colori di
testo, grassetto e colore
del pulsante
10/11/2017 24

25. BRICIOLE DI PANE
Le briciole di pane
mostrano la strada che
conduce alla Home Page
evidenziando il punto del
sito in cui ci si trova.
Sono particolarmente
consigliate per siti
medio/grandi
10/11/2017 25

26. PROGETTO DI UNA HOME PAGE
La Home Page del sito
Web deve rispondere
inizialmente a due
domande «Cosa posso
trovare qui» e «Cosa
posso fare qui»
La Home Page deve
invitarmi a scoprire i
contenuti
10/11/2017 26

27. CONTENUTI INTERESSANTI
Come la copertina di una
rivista la Home Page deve
invogliarmi a navigare il
sito
Dobbiamo perciò su una
proposta differenziata dei
vari elementi che
vogliamo presentare al
visitatore
10/11/2017 27

28. INDIRIZZA L’UTENTE
La Home page deve
evidenziare come posso
arrivare a quello che
voglio (che probabilmente
è fonte della mia ricerca
su Google).
Mostrami da dove
cominciare
10/11/2017 28

29. E QUINDI FATTO IL SITO
E quindi testare, testare e
ritestare.
Il test deve essere
effettuato da qualcuno
che non conosca nulla del
progetto e che possa
annotare tutte le difficoltà
che incontra
10/11/2017 29

30. Grazie per l’attenzione
10/11/2017 30
Gilberto Del Pizzo
Digital Media Strategist
Tel. +39-331-6751859
E-mail: gilberto@bottega-
digitale.it