Corso WebApp iOS - Lezione 03: Cognitive User Interface Design
0 likes801 views
Il documento tratta del design cognitivo dell'interfaccia utente, focalizzandosi sull'importanza della psicologia dei colori e sui pattern di lettura per migliorare l'esperienza utente nelle web app iOS. Vengono esplorati concetti come l'evoluzione dell'HCI e strategie per ottimizzare la progettazione e la ri-progettazione dell'interfaccia attraverso l'acquisizione di requisiti utente e la creazione di personas. Infine, il documento fornisce indicazioni pratiche su come sviluppare mappe del contenuto e schizzare l'interfaccia.
Corso WebApp iOS - Lezione 03: Cognitive User Interface Design
- 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. Chapter 04 User Interface Design for iOS Devices http://www.apress.com/9781430232469
- 3. Diario Lezioni LEZIONE 03 Cognitive User Interface Design Design Cognitivo dell’Interfaccia Psicologia dei Colori Pattern di Lettura Processo di Design dell’Interfaccia
- 4. Evoluzione HCI Mainframe Personal Ubiquitous 1 Computer 100 N Utenti 75 1 Computer 1 Utenti 50 25 N Computer 1 Utenti 0 1940 1950 1960 1970 1980 1990 2000 2010 2020
- 7. Design Cognitivo { specifiche buisiness specifiche visual design “specifiche” utenti
- 8. Design Cognitivo Utente come Essere Umano conoscere le “specifiche” dei nostri utenti
- 9. Design Cognitivo Che cosa Implica? approccio white-box contro approccio black-box
- 11. Design Cognitivo } Parte Razionale Parte Emozionale Parte Decisionale la parte Emozionale elabora più velocemente della parte Razionale
- 12. Design Cognitivo Creazione Design Domotica ad hoc Ubiquitous Computing Ottimizzazione Cognitiva Design e Re-Design Elaborazione Design Aumento Livello Persuasivo User eXperience*
- 13. Design Cognitivo Ottimizzazione Cognitiva Design e Re-Design Aumento Livello User eXperience*
- 14. Design Cognitivo Concetti Chiave Risorse Cognitive La Mappa non é il Territorio Tutto é Interfaccia
- 15. Design Cognitivo Def: Processo Cognitivo “sequenza di singoli eventi necessari alla formazione di un qualsiasi contenuto di conoscenza”
- 16. Design Cognitivo Millisecondi milionesimo di secondo
- 17. Design Cognitivo velocità impulso nervoso fino a 400 km/h* *da 0.5 m/s a 120 m/s image credit: flickr @ Ytsejam Photography
- 18. Design Cognitivo “tutto” accade in pochi “momenti” *da 0.5 m/s a 120 m/s image credit: flickr @ jtbrennan
- 19. Design Cognitivo image credit: flickr @ WebWizzard image credit: wikipedia Reti Neurali Vs Telecomunicazioni Mondiali Cervello Vs Chicco di Riso
- 20. Design Cognitivo Come l’Essere Umano si interfaccia con l’ambiente?
- 21. Design Cognitivo 5 sensi come framework genetico image credit: flickr @ victoriapeckham
- 22. Design Cognitivo sistema visivo come interfaccia* con l’ambiente *non unica image credit: flickr @ chefranden
- 23. Design Cognitivo
- 24. Design Cognitivo Come vengono elaborate le informazioni?
- 25. Design Cognitivo sistema percettivo e l’elaborazione dell’informazione *non unica image credit: flickr @ chefranden
- 26. Design Cognitivo
- 27. Design Cognitivo Come percepiamo il “nostro” mondo?
- 28. Design Cognitivo leggi (e principi) della percezione similitudine prossimità simmetria continuità chiusura figure-sfondo connessione uniforme destino comune passata esperienza image credit: flickr @ devendernarang
- 29. Design Cognitivo Similitudine percepire collettivita’ o totalita’ in base a forma, colore, dimensione, ...
- 30. Design Cognitivo Prossimità percepire collettività o totalità in base a prossimità spaziale o temporale
- 31. Design Cognitivo Simmetria percepire relazioni tra immagini simmetriche, anche se distanti tra loro
- 32. Design Cognitivo Continuità continuare mentalmente pattern visuale o cinestesici
- 33. Design Cognitivo Chiusura fare esperienza di elementi non percepiti attraverso sensazioni, per completare figure regolari
- 34. Design Cognitivo Figura Sfondo percepire un oggetto come unione della sua figura e del suo sfondo
- 35. Design Cognitivo Destino Comune percepire unità di movimento tra oggetti che condividono una direzione nel campo percettivo
- 36. Design Cognitivo Passata Esperienza fare esperienza di elementi non percepiti attraverso integrazione di esperienze passate
- 37. Esempio image credit: Richard Fonteneau
- 38. Diario Lezioni LEZIONE 03 Cognitive User Interface Design Design Cognitivo dell’Interfaccia Psicologia dei Colori Pattern di Lettura Processo di Design dell’Interfaccia
- 39. Psicologia Colore Alto Impatto sulla User eXperience concepita a partire dalle specifiche redatte nella definizione del brand dell’Applicazione
- 40. Psicologia Colore Alto Impatto sulla User eXperience sviluppata parallelamente alla creazione della User eXperience in fase di Design
- 41. Psicologia Colore Colore può essere descritto in 3 modi 1. Nome 2. Purezza 3. Rapporto light/dark
- 42. Psicologia Colore Colori sono presentati su una ruota Munsell Color Scheme
- 43. Psicologia Colore Colori sono divisi in 2 gruppi di base: Warm Colors: Rosso, Arancio, Giallo Cool Colors: Blu, Viola, Verde
- 44. Psicologia Colore Come i Colori Influenzano le Emozioni? Blue Depth, stability, professionalism, loyality, reliability, honor, trust Green Durability, reliability, safety, honesty, optimism, harmony, freshness, relaxing Yellow Comfort, liveliness, intellect, happiness, energy Red Strength, boldness, excitement, determination, desire, courage, enthusiasm Orange Enthusiasm, cheerfulness, affordability, stimulation, creativity Purple Nobility, luxury, mystery, royalty, elegance, magic Brown Endurance, confident, casual, reassuring, earthy White Cleanliness, purity, newness, peace, innocence, simplicity, freshness Gray Conservatism, traditionalism, intelligence, seriousness, wisdom Black Power, elegance, sophistication, formality, strength, mystery
- 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. Psicologia Colore Monocromatico Analoghi
- 47. Psicologia Colore Complementari Complementari Divisi
- 48. Psicologia Colore Triadico Tetradico
- 49. Diario Lezioni LEZIONE 03 Cognitive User Interface Design Design Cognitivo dell’Interfaccia Psicologia dei Colori Pattern di Lettura Processo di Design dell’Interfaccia
- 50. Pattern Lettura Importante Dettaglio utente 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. Pattern Lettura Possiamo 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. Pattern Lettura Pattern di Lettura Z tipico delle “letture” soddisfacenti dove l’utente é consapevolmente ed interessato al contenuto
- 53. Pattern Lettura
- 54. Pattern Lettura Alcune Implicazioni del Pattern di Lettura Z Utente salta da un paragrafo ad un altro Utente guarderà sempre nell’angolo basso e sx
- 55. Pattern Lettura Pattern di Lettura F tipico delle “ricerche” di parole frettolose o di ricerche caratterizzate da scarso interesse
- 56. Pattern Lettura
- 57. Pattern Lettura Alcune Implicazioni del Pattern di Lettura F Utente non legge contenuti parola dopo parola Informazioni Sensibili nei primi due Paragrafi
- 58. Diario Lezioni LEZIONE 03 Cognitive User Interface Design Design Cognitivo dell’Interfaccia Psicologia dei Colori Pattern di Lettura Processo di Design dell’Interfaccia
- 59. Design Cognitivo
- 60. Design Cognitivo
- 61. Design Cognitivo { isolare requisiti design isolare requisiti utente isolare gli scenari possibili realizzare sitemap contenuti sketch interfaccia
- 62. Esercitazione Utilizzare 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. Esercitazione
- 64. PROSSIMA LEZIONE LEGGERE Prioritizzazione Contenuti Prototipazione Interfaccia