Web Usability [1]Matteo Magni
Vita quotidianaQualcuno di voi ha mai avuto problemi a    capire come si apre una porta?
Design delle Porte [1]             Dove si             apre?
Design delle Porte [2]           Vedendo altri prima           di noi è molto più           semplice.
Design delle porte [3]           Capita spesso           vedere persone che           cercano di aprire le           porte...
Design delle porte [4]• Quali sono le parti  che ci fanno capire  cosa fare?
Design delle porte [5]• Maniglie• Cardini• StipitiElementi che spesso sivolgiono nascondere possonoavere una utilità per f...
Istruzioni     Quando una cosa     semplice, come una     porta esige figure,     scritte o istruzioni,     vuol dire che ...
Istruzioni [2]• Il bottone dello  sciacquone si  inserisce  benissimo nel  design del bagno,  ma poi?
Vita QuotidianaQuante volte vi è stato detto che per usareun oggetto, tipo un videoregistratore, serve        una laurea i...
Proiettore Leitz        • Avete mai provato          a far andare avanti          e poi indietro una          diapositiva?...
Fotocopiatrice• Trovare il bottone  di accensione mi  ha creato parecchi  problemi, perchè?
Wtf  • Usereste una    pistola del genere?  • Come mai    probabilmente    prendereste una    decisione anche    senza leg...
AffordanceLaffordance è linformazione presente sullo schieramento ottico chesuggerisce a un essere umano le azioni appropr...
Affordance (2)Più alta è laffordance, più sarà automatico ed intuitivo lutilizzo di undispositivo o di uno strumento. Ad e...
Good design• Come si usano lo  capiscono anche i  bambini senza  nessuna  spiegazione.
Good design [2]        • Si può usare in altri          modi?
Evoluzione• Una sola  possibilità?
Brain• WHILE THE 90% OF  YOUR BRAIN IS  ACTUALLY  DRIVING FOR YOU• YOUR 10% OF  AWARENESS IS  FREE TO DO  OTHER THINGS    ...
Principio del Mapping• Mapping è un termine  tecnico per indicare la  relazione tra due cose, in  questo caso fra i comand...
Principio del Mapping [2]             • Con lo stereo della               macchina è spesso               facile spostare ...
Principio del FeedbackIl feedback – linformazione di ritorno che diceallutente quale azione ha effettivamenteeseguito, qua...
Suggerimenti• Principi di design per la comprensibilità e usabilità  – Fornire un buon modello concettuale  – Rendere visi...
Paradosso della Tecnologia• La tecnologia ha il potenziale per renderci  la vita più facile. Ogni innovazione  tecnologica...
Paradosso della tecnologia [2]• Lo sviluppo della tecnologia tende a  seguire una curva ad U, per quanto  riguarda la comp...
Prendersi colpe• Spesso le persone che  commettono degli errori  con dispositivi tecnologici  tende a sentirsi  colpevole ...
Osserviamo     • Studiamo come gli       utenti usano le       nostre creazioni.
Ciclo di Feedback          Interazione tra          utente e sistema          con ciclo di          feedback
Sette stadi dellazione
Sette stadi dellazione1.Formare lo scopo: decidiamo quale scopo vogliamo raggiungere2.Formare l’intenzione: decidiamo che ...
Comportamento Preciso?• Un comportamento preciso può emergere  da una conoscenza tuttaltro che precisa  per 4 ragioni:  – ...
Vincoli• Siamo abituati a ragionare fra ciò che  risiede nel mondo e ciò che risiede nella  nostra testa, siamo vittime di...
Vincoli fisiciLimitazioni fisichecircoscrivono il numerodi operazioni possibili.Esempio un grossoperno non può entrarein u...
Vincoli semantici         • I vincoli semantici si affidano al           significato della situazione per           circos...
Vincoli culturali• Vincoli che fanno capo a convinzioni  culturali.• Se sto attaccando un adesivo lo metterò in  un punto ...
Vincoli logici       • La logica impone         che se ho due         interruttori e due         luci quello di         si...
E nel Web?Qualè laffordance dello spazio bianco?
#WHITESPACE
Bibliografia• Donald A. Norman  “La caffettiera del  masochista”
Domande               Slide:http://www.slideshare.net/ilbonzo               Code:https://github.com/ilbonzo/Cypher        ...
Web usability - 1 | WebMaster & WebDesigner
Web usability - 1 | WebMaster & WebDesigner
Upcoming SlideShare
Loading in...5
×

Web usability - 1 | WebMaster & WebDesigner

330

Published on

Prima lezione modulo Web Usability del corso per WebMaster & WebDesigner

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
330
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Web usability - 1 | WebMaster & WebDesigner"

  1. 1. Web Usability [1]Matteo Magni
  2. 2. Vita quotidianaQualcuno di voi ha mai avuto problemi a capire come si apre una porta?
  3. 3. Design delle Porte [1] Dove si apre?
  4. 4. Design delle Porte [2] Vedendo altri prima di noi è molto più semplice.
  5. 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. 6. Design delle porte [4]• Quali sono le parti che ci fanno capire cosa fare?
  7. 7. Design delle porte [5]• Maniglie• Cardini• StipitiElementi che spesso sivolgiono nascondere possonoavere una utilità per farcomprendere ilfunzionamento.
  8. 8. Istruzioni Quando una cosa semplice, come una porta esige figure, scritte o istruzioni, vuol dire che il design è sbagliato. (Norman)
  9. 9. Istruzioni [2]• Il bottone dello sciacquone si inserisce benissimo nel design del bagno, ma poi?
  10. 10. Vita QuotidianaQuante volte vi è stato detto che per usareun oggetto, tipo un videoregistratore, serve una laurea in Ingegneria?
  11. 11. Proiettore Leitz • Avete mai provato a far andare avanti e poi indietro una diapositiva? • Se ci siete riusciti come lavete capito?
  12. 12. Fotocopiatrice• Trovare il bottone di accensione mi ha creato parecchi problemi, perchè?
  13. 13. Wtf • Usereste una pistola del genere? • Come mai probabilmente prendereste una decisione anche senza leggere le istruzioni?
  14. 14. AffordanceLaffordance è linformazione presente sullo schieramento ottico chesuggerisce a un essere umano le azioni appropriate per manipolare unoggetto. Ad esempio laspetto fisico di una caraffa dacqua permetteallutilizzatore 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é alloggetto stesso né al suo usufruitore masi viene a creare dalla relazione che si instaura fra di essi. È, per così dire,una proprietà "distribuita". (Wikipedia)
  15. 15. Affordance (2)Più alta è laffordance, più sarà automatico ed intuitivo lutilizzo di undispositivo o di uno strumento. Ad esempio, laspetto di una manigliadovrebbe far intuire al meglio e automaticamente come la porta vadaaperta: se tirata, spinta, o fatta scorrere (una porta che si apreautomaticamente al passaggio ha una scarsa affordance, poiché èmolto poco intuitivo il suo funzionamento).Tra gli oggetti con unottima affordance vi sono, ad esempio, laforchetta o il cucchiaio, strumenti che nel corso dei millenni sonostati affinati dalluomo fino alla forma odierna, estremamente intuitivae di semplicissimo utilizzo. (Wikipedia)
  16. 16. Good design• Come si usano lo capiscono anche i bambini senza nessuna spiegazione.
  17. 17. Good design [2] • Si può usare in altri modi?
  18. 18. Evoluzione• Una sola possibilità?
  19. 19. Brain• WHILE THE 90% OF YOUR BRAIN IS ACTUALLY DRIVING FOR YOU• YOUR 10% OF AWARENESS IS FREE TO DO OTHER THINGS @Aetheros
  20. 20. 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)
  21. 21. 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?
  22. 22. Principio del FeedbackIl feedback – linformazione di ritorno che diceallutente quale azione ha effettivamenteeseguito, quale risultato si è realizzato – è unconcetto bene noto nella teoriadellinformazione.Immaginate di cercare di parlare a qualcunosenza poter udire la vostra voce, non ci sarebbenessun feedback. (Norman)
  23. 23. 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)
  24. 24. 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.
  25. 25. Paradosso della tecnologia [2]• Lo sviluppo della tecnologia tende a seguire una curva ad U, per quanto riguarda la complessità: alta allinizio, scende poi a un livello basso, agevole nelluso, e poi di nuovo alta. (Norman)• Pensiamo allo sviluppo della Radio
  26. 26. Prendersi colpe• Spesso le persone che commettono degli errori con dispositivi tecnologici tende a sentirsi colpevole e cercano di nascondere lerrore accusandosi di stupidità.
  27. 27. Osserviamo • Studiamo come gli utenti usano le nostre creazioni.
  28. 28. Ciclo di Feedback Interazione tra utente e sistema con ciclo di feedback
  29. 29. Sette stadi dellazione
  30. 30. Sette stadi dellazione1.Formare lo scopo: decidiamo quale scopo vogliamo raggiungere2.Formare l’intenzione: decidiamo che cosa intendiamo fare per raggiungere lo scopo prefissato3.Specificare un’azione: pianifichiamo nel dettaglio le azioni specifiche da compiere4.Eseguire l’azione: eseguiamo effettivamente le azioni pianificate5.Percepire lo stato del mondo: osserviamo come sono cambiati il sistema e il mondo circostante dopo le nostre azioni6.Interpretare lo stato del mondo: elaboriamo ciò che abbiamo osservato, per dargli un senso7.Valutare il risultato: decidiamo se lo scopo iniziale è stato raggiunto. (Norman)
  31. 31. Comportamento Preciso?• Un comportamento preciso può emergere da una conoscenza tuttaltro che precisa per 4 ragioni: – Informazione nel mondo – Non è richiesta grande precisione – Sono presenti vincoli naturali – Sono presenti vincoli culturali (Norman)
  32. 32. 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.
  33. 33. Vincoli fisiciLimitazioni fisichecircoscrivono il numerodi operazioni possibili.Esempio un grossoperno non può entrarein un foro piccolo.
  34. 34. 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.
  35. 35. 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.
  36. 36. 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.
  37. 37. E nel Web?Qualè laffordance dello spazio bianco?
  38. 38. #WHITESPACE
  39. 39. Bibliografia• Donald A. Norman “La caffettiera del masochista”
  40. 40. Domande Slide:http://www.slideshare.net/ilbonzo Code:https://github.com/ilbonzo/Cypher mail: matteo@magni.me

×