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.

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

5. Evoluzione HCI

6. Design Cognitivo

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

10. Design Cognitivo
{
{

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