Corso WebApp iOS - Lezione 03: Cognitive User Interface Design

1,204 views

Published on

Introduzione ai Bisogni Cognitivi dell'Utente e presentazione delle Leggi di Percezione.

Introduzione alla Psicologia dei Colori ed ai Pattern di Lettura.

Introduzione ad un possible processo di Design dell'Interfaccia.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,204
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Corso WebApp iOS - Lezione 03: Cognitive User Interface Design

  1. 1. Corso WebApp iOS “Cognitive UI Design” Lezione 03/10”Simplicity is the ultimate Sophistication” Leonardo da Vinci Painter, Sculptor, Architect, Musician, Scientist, Mathematician, Engineer, Inventor.
  2. 2. Chapter 04User Interface Design for iOS Devices http://www.apress.com/9781430232469
  3. 3. Diario Lezioni LEZIONE 03Cognitive User Interface Design Design Cognitivo dell’Interfaccia Psicologia dei Colori Pattern di LetturaProcesso di Design dell’Interfaccia
  4. 4. Evoluzione HCI Mainframe Personal Ubiquitous 1 Computer100 N Utenti75 1 Computer 1 Utenti5025 N Computer 1 Utenti 0 1940 1950 1960 1970 1980 1990 2000 2010 2020
  5. 5. Evoluzione HCI
  6. 6. Design Cognitivo
  7. 7. Design Cognitivo { specifiche buisiness specifiche visual design “specifiche” utenti
  8. 8. Design Cognitivo Utente come Essere Umano conoscere le “specifiche” dei nostri utenti
  9. 9. Design Cognitivo Che cosa Implica? approccio white-box contro approccio black-box
  10. 10. Design Cognitivo{{
  11. 11. Design Cognitivo } Parte Razionale Parte Emozionale Parte Decisionale la parte Emozionale elabora più velocemente della parte Razionale
  12. 12. Design Cognitivo Creazione Design Domotica ad hoc Ubiquitous Computing Ottimizzazione Cognitiva Design e Re-DesignElaborazione Design Aumento Livello Persuasivo User eXperience*
  13. 13. Design Cognitivo Ottimizzazione Cognitiva Design e Re-Design Aumento Livello User eXperience*
  14. 14. Design Cognitivo Concetti Chiave Risorse Cognitive La Mappa non é il Territorio Tutto é Interfaccia
  15. 15. Design Cognitivo Def: Processo Cognitivo“sequenza di singoli eventi necessari alla formazione di un qualsiasi contenuto di conoscenza”
  16. 16. Design Cognitivo Millisecondi milionesimo di secondo
  17. 17. Design Cognitivo velocità impulso nervosofino a 400 km/h**da 0.5 m/s a 120 m/s image credit: flickr @ Ytsejam Photography
  18. 18. Design Cognitivo “tutto” accade inpochi “momenti”*da 0.5 m/s a 120 m/s image credit: flickr @ jtbrennan
  19. 19. Design Cognitivoimage credit: flickr @ WebWizzard image credit: wikipedia Reti Neurali Vs Telecomunicazioni Mondiali Cervello Vs Chicco di Riso
  20. 20. Design Cognitivo Come l’Essere Umano si interfaccia con l’ambiente?
  21. 21. Design Cognitivo 5 sensicome framework genetico image credit: flickr @ victoriapeckham
  22. 22. Design Cognitivo sistema visivocome interfaccia* con l’ambiente *non unica image credit: flickr @ chefranden
  23. 23. Design Cognitivo
  24. 24. Design Cognitivo Come vengono elaborate le informazioni?
  25. 25. Design Cognitivosistema percettivo e l’elaborazione dell’informazione *non unica image credit: flickr @ chefranden
  26. 26. Design Cognitivo
  27. 27. Design Cognitivo Come percepiamo il “nostro” mondo?
  28. 28. Design Cognitivoleggi (e principi) della percezione similitudine prossimità simmetria continuità chiusura figure-sfondoconnessione uniforme destino comune passata esperienza image credit: flickr @ devendernarang
  29. 29. Design Cognitivo Similitudine percepire collettivita’ o totalita’ in base a forma, colore, dimensione, ...
  30. 30. Design Cognitivo Prossimità percepire collettività o totalità in base a prossimità spaziale o temporale
  31. 31. Design Cognitivo Simmetria percepire relazioni tra immagini simmetriche, anche se distanti tra loro
  32. 32. Design Cognitivo Continuità continuare mentalmente pattern visuale o cinestesici
  33. 33. Design Cognitivo Chiusura fare esperienza di elementi non percepiti attraverso sensazioni, per completare figure regolari
  34. 34. Design Cognitivo Figura Sfondo percepire un oggetto come unione della sua figura e del suo sfondo
  35. 35. Design Cognitivo Destino Comune percepire unità di movimento tra oggetti che condividono una direzione nel campo percettivo
  36. 36. Design Cognitivo Passata Esperienza fare esperienza di elementi non percepiti attraverso integrazione di esperienze passate
  37. 37. Esempio image credit: Richard Fonteneau
  38. 38. Diario Lezioni LEZIONE 03Cognitive User Interface Design Design Cognitivo dell’Interfaccia Psicologia dei Colori Pattern di LetturaProcesso di Design dell’Interfaccia
  39. 39. Psicologia Colore Alto Impatto sulla User eXperience concepita a partire dalle specificheredatte nella definizione del brand dell’Applicazione
  40. 40. Psicologia Colore Alto Impatto sulla User eXperience sviluppata parallelamente alla creazione della User eXperience in fase di Design
  41. 41. Psicologia Colore Colore può essere descritto in 3 modi 1. Nome 2. Purezza 3. Rapporto light/dark
  42. 42. Psicologia Colore Colori sono presentati su una ruota Munsell Color Scheme
  43. 43. Psicologia Colore Colori sono divisi in 2 gruppi di base: Warm Colors: Rosso, Arancio, Giallo Cool Colors: Blu, Viola, Verde
  44. 44. Psicologia Colore Come i Colori Influenzano le Emozioni? Blue Depth, stability, professionalism, loyality, reliability, honor, trustGreen Durability, reliability, safety, honesty, optimism, harmony, freshness, relaxingYellow Comfort, liveliness, intellect, happiness, energy Red Strength, boldness, excitement, determination, desire, courage, enthusiasmOrange Enthusiasm, cheerfulness, affordability, stimulation, creativityPurple Nobility, luxury, mystery, royalty, elegance, magicBrown Endurance, confident, casual, reassuring, earthyWhite Cleanliness, purity, newness, peace, innocence, simplicity, freshness Gray Conservatism, traditionalism, intelligence, seriousness, wisdomBlack Power, elegance, sophistication, formality, strength, mystery
  45. 45. Psicologia Colore Come si Combinano i Colori? Schema Monocromatico Schema Colori Analoghi Schema Colori Complementari Schema Colori Complementari Divisi Schema Colori Triadici Schema Colori Tetradici
  46. 46. Psicologia Colore Monocromatico Analoghi
  47. 47. Psicologia Colore Complementari Complementari Divisi
  48. 48. Psicologia Colore Triadico Tetradico
  49. 49. Diario Lezioni LEZIONE 03Cognitive User Interface Design Design Cognitivo dell’Interfaccia Psicologia dei Colori Pattern di LetturaProcesso di Design dell’Interfaccia
  50. 50. Pattern Lettura Importante Dettaglioutente raramente* (quasi mai) legge in realtà scansiona il testo in cerca di parole o frasi che corrispondano alla sua ricerca *per vari motivi che non tratteremo
  51. 51. Pattern LetturaPossiamo comunque isolare alcuni Pattern* di Lettura utente raramente* (quasi mai) legge in realtà scansiona il testo in cerca di parole o frasi che corrispondano alla sua ricerca *valido per gli utenti che leggono da sinistra a destra
  52. 52. Pattern Lettura Pattern di Lettura Z tipico delle “letture” soddisfacenti dove l’utente é consapevolmente ed interessato al contenuto
  53. 53. Pattern Lettura
  54. 54. Pattern LetturaAlcune Implicazioni del Pattern di Lettura ZUtente salta da un paragrafo ad un altroUtente guarderà sempre nell’angolo basso e sx
  55. 55. Pattern Lettura Pattern di Lettura Ftipico delle “ricerche” di parole frettolose o di ricerche caratterizzate da scarso interesse
  56. 56. Pattern Lettura
  57. 57. Pattern LetturaAlcune Implicazioni del Pattern di Lettura FUtente non legge contenuti parola dopo parolaInformazioni Sensibili nei primi due Paragrafi
  58. 58. Diario Lezioni LEZIONE 03Cognitive User Interface Design Design Cognitivo dell’Interfaccia Psicologia dei Colori Pattern di LetturaProcesso di Design dell’Interfaccia
  59. 59. Design Cognitivo
  60. 60. Design Cognitivo
  61. 61. Design Cognitivo { isolare requisiti design isolare requisiti utente isolare gli scenari possibili realizzare sitemap contenuti sketch interfaccia
  62. 62. EsercitazioneUtilizzare Tool o Template* Scaricabili http://iu.di.unipi.it/webapp/ 1. Creare Personas (Profili Utenti) 2. Creare Scenari Interazione 3. Creare Sitemap Contenuti 4. Sketch Interfaccia 5. Documento Interazione Interfacce *oppure usare un proprio template
  63. 63. Esercitazione
  64. 64. PROSSIMA LEZIONE LEGGERE Prioritizzazione Contenuti Prototipazione Interfaccia

×