Web Usability - 1 | WebMaster & WebDesigner

of 42/42
Web Usability [1] Matteo Magni
  • date post

    29-Nov-2014
  • Category

    Technology

  • view

    399
  • download

    0

Embed Size (px)

description

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

Transcript of Web Usability - 1 | WebMaster & WebDesigner

  • 1. Web Usability [1]Matteo Magni
  • 2. Vita quotidianaQualcuno 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 StipitiElementi che spesso sivolgiono nasconderepossono avere una utilitper far comprendere ilfunzionamento.
  • 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 QuotidianaQuante volte vi stato detto che per usareun 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 lavete 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. 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. 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. 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?
  • 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. 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. 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. 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. 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. 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. 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. 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. Osserviamo Studiamo come gli utenti usano le nostre creazioni.
  • 28. Ciclo di Feedback Interazione tra utente e sistema con ciclo di feedback
  • 29. Sette stadi dellazione
  • 30. Sette stadi dellazione1.Formare lo scopo: decidiamo quale scopo vogliamo raggiungere2.Formare lintenzione: decidiamo che cosa intendiamo fare per raggiungere lo scopo prefissato3.Specificare unazione: pianifichiamo nel dettaglio le azioni specifiche da compiere4.Eseguire lazione: 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. 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. 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 duso di un oggetto a un numero preciso di alternative.
  • 33. Vincoli fisiciLimitazioni fisichecircoscrivono il numerodi operazioni possibili.Esempio un grossoperno non pu entrarein un foro piccolo.
  • 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. 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. 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. E nel Web?Qual laffordance dello spazio bianco?
  • 38. #WHITESPACE
  • 39. Bibliografia Donald A. Norman La caffettiera del masochista
  • 40. Domande? Slide: http://cypher.informazione.me/ Code:https://github.com/inFormazione/Cypher/ mail: [email protected]