web usability - 1 | webmaster & webdesigner
DESCRIPTION
Prima lezione del modulo Web Usability per il corso di WebMaster & WebDesignerTRANSCRIPT
![Page 1: Web Usability - 1 | WebMaster & WebDesigner](https://reader034.vdocuments.site/reader034/viewer/2022051609/5479dc3e5906b530358b4601/html5/thumbnails/1.jpg)
Web Usability [1]Matteo Magni
![Page 2: Web Usability - 1 | WebMaster & WebDesigner](https://reader034.vdocuments.site/reader034/viewer/2022051609/5479dc3e5906b530358b4601/html5/thumbnails/2.jpg)
Vita quotidiana
Qualcuno di voi ha mai avuto problemi a capire come si apre una porta?
![Page 3: Web Usability - 1 | WebMaster & WebDesigner](https://reader034.vdocuments.site/reader034/viewer/2022051609/5479dc3e5906b530358b4601/html5/thumbnails/3.jpg)
Design delle Porte [1]
Dove si
apre?
![Page 4: Web Usability - 1 | WebMaster & WebDesigner](https://reader034.vdocuments.site/reader034/viewer/2022051609/5479dc3e5906b530358b4601/html5/thumbnails/4.jpg)
Design delle Porte [2]
Vedendo altri prima di noi è molto più semplice.
![Page 5: Web Usability - 1 | WebMaster & WebDesigner](https://reader034.vdocuments.site/reader034/viewer/2022051609/5479dc3e5906b530358b4601/html5/thumbnails/5.jpg)
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.
![Page 6: Web Usability - 1 | WebMaster & WebDesigner](https://reader034.vdocuments.site/reader034/viewer/2022051609/5479dc3e5906b530358b4601/html5/thumbnails/6.jpg)
Design delle porte [4]
• Quali sono le parti che ci fanno capire cosa fare?
![Page 7: Web Usability - 1 | WebMaster & WebDesigner](https://reader034.vdocuments.site/reader034/viewer/2022051609/5479dc3e5906b530358b4601/html5/thumbnails/7.jpg)
Design delle porte [5]
• Maniglie• Cardini• Stipiti
Elementi che spesso si volgiono nascondere possono avere una utilità per far comprendere il funzionamento.
![Page 8: Web Usability - 1 | WebMaster & WebDesigner](https://reader034.vdocuments.site/reader034/viewer/2022051609/5479dc3e5906b530358b4601/html5/thumbnails/8.jpg)
Istruzioni
Quando una cosa semplice, come una porta esige figure, scritte o istruzioni, vuol dire che il design è sbagliato. (Norman)
![Page 9: Web Usability - 1 | WebMaster & WebDesigner](https://reader034.vdocuments.site/reader034/viewer/2022051609/5479dc3e5906b530358b4601/html5/thumbnails/9.jpg)
Istruzioni [2]
• Il bottone dello sciacquone si inserisce benissimo nel design del bagno, ma poi?
![Page 10: Web Usability - 1 | WebMaster & WebDesigner](https://reader034.vdocuments.site/reader034/viewer/2022051609/5479dc3e5906b530358b4601/html5/thumbnails/10.jpg)
Vita Quotidiana
Quante volte vi è stato detto che per usare un oggetto, tipo un videoregistratore, serve
una laurea in Ingegneria?
![Page 11: Web Usability - 1 | WebMaster & WebDesigner](https://reader034.vdocuments.site/reader034/viewer/2022051609/5479dc3e5906b530358b4601/html5/thumbnails/11.jpg)
Proiettore Leitz
• Avete mai provato a far andare avanti e poi indietro una diapositiva?
• Se ci siete riusciti come l'avete capito?
![Page 12: Web Usability - 1 | WebMaster & WebDesigner](https://reader034.vdocuments.site/reader034/viewer/2022051609/5479dc3e5906b530358b4601/html5/thumbnails/12.jpg)
Fotocopiatrice
• Trovare il bottone di accensione mi ha creato parecchi problemi, perchè?
![Page 13: Web Usability - 1 | WebMaster & WebDesigner](https://reader034.vdocuments.site/reader034/viewer/2022051609/5479dc3e5906b530358b4601/html5/thumbnails/13.jpg)
Wtf
• Usereste una pistola del genere?
• Come mai probabilmente prendereste una decisione anche senza leggere le istruzioni?
![Page 14: Web Usability - 1 | WebMaster & WebDesigner](https://reader034.vdocuments.site/reader034/viewer/2022051609/5479dc3e5906b530358b4601/html5/thumbnails/14.jpg)
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)
![Page 15: Web Usability - 1 | WebMaster & WebDesigner](https://reader034.vdocuments.site/reader034/viewer/2022051609/5479dc3e5906b530358b4601/html5/thumbnails/15.jpg)
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)
![Page 16: Web Usability - 1 | WebMaster & WebDesigner](https://reader034.vdocuments.site/reader034/viewer/2022051609/5479dc3e5906b530358b4601/html5/thumbnails/16.jpg)
Good design
• Come si usano lo capiscono anche i bambini senza nessuna spiegazione.
![Page 17: Web Usability - 1 | WebMaster & WebDesigner](https://reader034.vdocuments.site/reader034/viewer/2022051609/5479dc3e5906b530358b4601/html5/thumbnails/17.jpg)
Good design [2]
• Si può usare in altri modi?
![Page 18: Web Usability - 1 | WebMaster & WebDesigner](https://reader034.vdocuments.site/reader034/viewer/2022051609/5479dc3e5906b530358b4601/html5/thumbnails/18.jpg)
Evoluzione
• Una sola possibilità?
![Page 19: Web Usability - 1 | WebMaster & WebDesigner](https://reader034.vdocuments.site/reader034/viewer/2022051609/5479dc3e5906b530358b4601/html5/thumbnails/19.jpg)
![Page 20: Web Usability - 1 | WebMaster & WebDesigner](https://reader034.vdocuments.site/reader034/viewer/2022051609/5479dc3e5906b530358b4601/html5/thumbnails/20.jpg)
![Page 21: Web Usability - 1 | WebMaster & WebDesigner](https://reader034.vdocuments.site/reader034/viewer/2022051609/5479dc3e5906b530358b4601/html5/thumbnails/21.jpg)
Brain
• WHILE THE 90% OF YOUR BRAIN IS ACTUALLY DRIVING FOR YOU
• YOUR 10% OF AWARENESS IS FREE TO DO OTHER THINGS
@Aetheros
![Page 22: Web Usability - 1 | WebMaster & WebDesigner](https://reader034.vdocuments.site/reader034/viewer/2022051609/5479dc3e5906b530358b4601/html5/thumbnails/22.jpg)
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)
![Page 23: Web Usability - 1 | WebMaster & WebDesigner](https://reader034.vdocuments.site/reader034/viewer/2022051609/5479dc3e5906b530358b4601/html5/thumbnails/23.jpg)
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?
![Page 24: Web Usability - 1 | WebMaster & WebDesigner](https://reader034.vdocuments.site/reader034/viewer/2022051609/5479dc3e5906b530358b4601/html5/thumbnails/24.jpg)
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)
![Page 25: Web Usability - 1 | WebMaster & WebDesigner](https://reader034.vdocuments.site/reader034/viewer/2022051609/5479dc3e5906b530358b4601/html5/thumbnails/25.jpg)
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)
![Page 26: Web Usability - 1 | WebMaster & WebDesigner](https://reader034.vdocuments.site/reader034/viewer/2022051609/5479dc3e5906b530358b4601/html5/thumbnails/26.jpg)
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.
![Page 27: Web Usability - 1 | WebMaster & WebDesigner](https://reader034.vdocuments.site/reader034/viewer/2022051609/5479dc3e5906b530358b4601/html5/thumbnails/27.jpg)
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
![Page 28: Web Usability - 1 | WebMaster & WebDesigner](https://reader034.vdocuments.site/reader034/viewer/2022051609/5479dc3e5906b530358b4601/html5/thumbnails/28.jpg)
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à.
![Page 29: Web Usability - 1 | WebMaster & WebDesigner](https://reader034.vdocuments.site/reader034/viewer/2022051609/5479dc3e5906b530358b4601/html5/thumbnails/29.jpg)
Osserviamo
• Studiamo come gli utenti usano le nostre creazioni.
![Page 30: Web Usability - 1 | WebMaster & WebDesigner](https://reader034.vdocuments.site/reader034/viewer/2022051609/5479dc3e5906b530358b4601/html5/thumbnails/30.jpg)
Ciclo di Feedback
Interazione tra utente e sistema con ciclo di feedback
![Page 31: Web Usability - 1 | WebMaster & WebDesigner](https://reader034.vdocuments.site/reader034/viewer/2022051609/5479dc3e5906b530358b4601/html5/thumbnails/31.jpg)
Sette stadi dell'azione
![Page 32: Web Usability - 1 | WebMaster & WebDesigner](https://reader034.vdocuments.site/reader034/viewer/2022051609/5479dc3e5906b530358b4601/html5/thumbnails/32.jpg)
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)
![Page 33: Web Usability - 1 | WebMaster & WebDesigner](https://reader034.vdocuments.site/reader034/viewer/2022051609/5479dc3e5906b530358b4601/html5/thumbnails/33.jpg)
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)
![Page 34: Web Usability - 1 | WebMaster & WebDesigner](https://reader034.vdocuments.site/reader034/viewer/2022051609/5479dc3e5906b530358b4601/html5/thumbnails/34.jpg)
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.
![Page 35: Web Usability - 1 | WebMaster & WebDesigner](https://reader034.vdocuments.site/reader034/viewer/2022051609/5479dc3e5906b530358b4601/html5/thumbnails/35.jpg)
Vincoli fisici
Limitazioni fisiche circoscrivono il numero di operazioni possibili.
Esempio un grosso perno non può entrare in un foro piccolo.
![Page 36: Web Usability - 1 | WebMaster & WebDesigner](https://reader034.vdocuments.site/reader034/viewer/2022051609/5479dc3e5906b530358b4601/html5/thumbnails/36.jpg)
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.
![Page 37: Web Usability - 1 | WebMaster & WebDesigner](https://reader034.vdocuments.site/reader034/viewer/2022051609/5479dc3e5906b530358b4601/html5/thumbnails/37.jpg)
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.
![Page 38: Web Usability - 1 | WebMaster & WebDesigner](https://reader034.vdocuments.site/reader034/viewer/2022051609/5479dc3e5906b530358b4601/html5/thumbnails/38.jpg)
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.
![Page 39: Web Usability - 1 | WebMaster & WebDesigner](https://reader034.vdocuments.site/reader034/viewer/2022051609/5479dc3e5906b530358b4601/html5/thumbnails/39.jpg)
E nel Web?
Qual'è l'affordance dello spazio bianco?
![Page 40: Web Usability - 1 | WebMaster & WebDesigner](https://reader034.vdocuments.site/reader034/viewer/2022051609/5479dc3e5906b530358b4601/html5/thumbnails/40.jpg)
#WHITESPACE
![Page 41: Web Usability - 1 | WebMaster & WebDesigner](https://reader034.vdocuments.site/reader034/viewer/2022051609/5479dc3e5906b530358b4601/html5/thumbnails/41.jpg)
Bibliografia
• Donald A. Norman
“La caffettiera del masochista”
![Page 42: Web Usability - 1 | WebMaster & WebDesigner](https://reader034.vdocuments.site/reader034/viewer/2022051609/5479dc3e5906b530358b4601/html5/thumbnails/42.jpg)
Domande?
Slide:
http://cypher.informazione.me/
Code:
https://github.com/inFormazione/Cypher/
mail: