Prima lezione del modulo Web Usability per il corso di WebMaster & WebDesigner

1. Web Usability [1]
Matteo Magni

2. Vita quotidiana
Qualcuno di voi ha mai avuto problemi a
capire come si apre una porta?

3. Design delle Porte [1]
Dove si
apre?

4. Design delle Porte [2]
Vedendo altri prima
di noi è molto più
semplice.

5. Design delle porte [3]
Capita spesso
vedere persone che
cercano di aprire le
porte automatiche.
Oppure persone che
cercano di entrare in
una vetrata chiusa.

6. Design delle porte [4]
• Quali sono le parti
che ci fanno capire
cosa fare?

7. Design delle porte [5]
• Maniglie
• Cardini
• Stipiti
Elementi che spesso si
volgiono nascondere
possono avere una utilità
per far comprendere il
funzionamento.

8. Istruzioni
Quando una cosa
semplice, come una
porta esige figure,
scritte o istruzioni,
vuol dire che il
design è sbagliato.
(Norman)

9. Istruzioni [2]
• Il bottone dello
sciacquone si
inserisce
benissimo nel
design del bagno,
ma poi?

10. Vita Quotidiana
Quante volte vi è stato detto che per usare
un oggetto, tipo un videoregistratore, serve
una laurea in Ingegneria?

11. Proiettore Leitz
• Avete mai provato
a far andare avanti
e poi indietro una
diapositiva?
• Se ci siete riusciti
come l'avete
capito?

12. Fotocopiatrice
• Trovare il bottone
di accensione mi
ha creato parecchi
problemi, perchè?

13. Wtf
• Usereste una
pistola del genere?
• Come mai
probabilmente
prendereste una
decisione anche
senza leggere le
istruzioni?

14. Affordance
L'affordance è l'informazione presente sullo schieramento ottico che
suggerisce a un essere umano le azioni appropriate per manipolare un
oggetto. Ad esempio l'aspetto fisico di una caraffa d'acqua permette
all'utilizzatore di dedurne le funzionalità anche senza averla mai vista prima.
Il termine affordance può, in questo contesto, essere tradotto con "invito";
questo concetto non appartiene né all'oggetto stesso né al suo usufruitore ma
si viene a creare dalla relazione che si instaura fra di essi. È, per così dire,
una proprietà "distribuita". (Wikipedia)

15. Affordance (2)
Più alta è l'affordance, più sarà automatico ed intuitivo l'utilizzo di un
dispositivo o di uno strumento. Ad esempio, l'aspetto di una maniglia
dovrebbe far intuire al meglio e automaticamente come la porta vada
aperta: se tirata, spinta, o fatta scorrere (una porta che si apre
automaticamente al passaggio ha una scarsa affordance, poiché è
molto poco intuitivo il suo funzionamento).
Tra gli oggetti con un'ottima affordance vi sono, ad esempio, la
forchetta o il cucchiaio, strumenti che nel corso dei millenni sono
stati affinati dall'uomo fino alla forma odierna, estremamente intuitiva
e di semplicissimo utilizzo. (Wikipedia)

16. Good design
• Come si usano lo
capiscono anche i
bambini senza
nessuna
spiegazione.

17. Good design [2]
• Si può usare in altri
modi?

18. Evoluzione
• Una sola
possibilità?

21. Brain
• WHILE THE 90% OF
YOUR BRAIN IS
ACTUALLY
DRIVING FOR YOU
• YOUR 10% OF
AWARENESS IS
FREE TO DO
OTHER THINGS
@Aetheros

22. Principio del Mapping
• Mapping è un termine
tecnico per indicare la
relazione tra due cose, in
questo caso fra i comandi e
il loro azionamento e i
risultati che ne derivano nel
modo esterno.
(Norman)

23. Principio del Mapping [2]
• Con lo stereo della
macchina è spesso
facile spostare il
suono dalle casse
di destra a quelle
di sinistra, ma farlo
da davanti a
dietro?

24. Principio del Feedback
Il feedback – l'informazione di ritorno che dice
all'utente quale azione ha effettivamente
eseguito, quale risultato si è realizzato – è un
concetto bene noto nella teoria
dell'informazione.
Immaginate di cercare di parlare a qualcuno
senza poter udire la vostra voce, non ci sarebbe
nessun feedback.
(Norman)

25. Suggerimenti
• Principi di design per la comprensibilità e usabilità
– Fornire un buon modello concettuale
– Rendere visibili le cose
• Ogni qualvolta il numero di funzioni eccede il numero
dei comandi, è facile che ci siano difficoltà.
(Norman)

26. Paradosso della Tecnologia
• La tecnologia ha il potenziale per renderci
la vita più facile. Ogni innovazione
tecnologica ci offre vantaggi maggiori.
Nello stesso tempo nascono maggiori
complessità, ad accrescere i nostri
problemi e la nostra frustrazione.

27. Paradosso della tecnologia [2]
• Lo sviluppo della tecnologia tende a
seguire una curva ad U, per quanto
riguarda la complessità: alta all'inizio,
scende poi a un livello basso, agevole
nell'uso, e poi di nuovo alta. (Norman)
• Pensiamo allo sviluppo della Radio

28. Prendersi colpe
• Spesso le persone che
commettono degli errori
con dispositivi tecnologici
tende a sentirsi
colpevole e cercano di
nascondere l'errore
accusandosi di stupidità.

29. Osserviamo
• Studiamo come gli
utenti usano le
nostre creazioni.

30. Ciclo di Feedback
Interazione tra
utente e sistema
con ciclo di
feedback

31. Sette stadi dell'azione

32. Sette stadi dell'azione
1.Formare lo scopo: decidiamo quale scopo vogliamo raggiungere
2.Formare l’intenzione: decidiamo che cosa intendiamo fare per raggiungere lo scopo
prefissato
3.Specificare un’azione: pianifichiamo nel dettaglio le azioni specifiche da compiere
4.Eseguire l’azione: eseguiamo effettivamente le azioni pianificate
5.Percepire lo stato del mondo: osserviamo come sono cambiati il sistema e il mondo
circostante dopo le nostre azioni
6.Interpretare lo stato del mondo: elaboriamo ciò che abbiamo osservato, per dargli
un senso
7.Valutare il risultato: decidiamo se lo scopo iniziale è stato raggiunto.
(Norman)

33. Comportamento Preciso?
• Un comportamento preciso può emergere
da una conoscenza tutt'altro che precisa
per 4 ragioni:
– Informazione nel mondo
– Non è richiesta grande precisione
– Sono presenti vincoli naturali
– Sono presenti vincoli culturali
(Norman)

34. Vincoli
• Siamo abituati a ragionare fra ciò che
risiede nel mondo e ciò che risiede nella
nostra testa, siamo vittime di una serie di
vincoli fisici, logici, semantici e culturali
che riducono le infinite possibilità d’uso di
un oggetto a un numero preciso di
alternative.

35. Vincoli fisici
Limitazioni fisiche
circoscrivono il numero
di operazioni possibili.
Esempio un grosso
perno non può entrare
in un foro piccolo.

36. Vincoli semantici
• I vincoli semantici si affidano al
significato della situazione per
circoscrivere le azioni possibili.
• Esempio se sto construendo
una automobile posizionerò il
sedile del guidatore per farlo
guardare avanti.

37. Vincoli culturali
• Vincoli che fanno capo a convinzioni
culturali.
• Se sto attaccando un adesivo lo metterò in
un punto in cui si può leggere, perché
culturalmente so che le scritte sono fatte
per essere lette.

38. Vincoli logici
• La logica impone
che se ho due
interruttori e due
luci quello di
sinistra controllerà
la luce sinistra e
quello di destra la
destra.

39. E nel Web?
Qual'è l'affordance dello spazio bianco?

40. #WHITESPACE

41. Bibliografia
• Donald A. Norman
“La caffettiera del
masochista”

42. Domande?
Slide:
http://cypher.informazione.me/
Code:
https://github.com/inFormazione/Cypher/
mail:
matteo@magni.me