Centro Congressi Milanofiori (Milano, Italy) 26 Maggio 2011 Lo User Centered Design (UCD) è un modo per progettare e costruire, App Native, WebApp o Servizi Mobile in genere, che tengono conto del punto di vista e delle esigenze dell’utente al fine di realizzare un prodotto che risponda alle esigenze delle persone che lo utilizzeranno. Come la nostra Mente Interagisce con il Design di un Interfaccia Utente? Come dobbiamo presentare i nostri Contenuti su un Dispositivo Mobile o su un Tablet? Quale Lingua usa la nostra mente per comunicare con un Interfaccia Utente? Come Influenzare o Motivare un utente attraverso le nostre Applicazioni su un Dispositivo Mobile o un Tablet? Queste sono solo alcune delle domande a cui daremo una risposta. Nella Prima Parte analizzeremo le 4 Fasi (ISO 13407) dello User Centered Design (UX) e ne presenteremo alcune implementazioni in un Ottica Agile in modo da soddisfare i bisogni di singoli sviluppatori o piccoli team di design e sviluppo. Nella Seconda Parte illustreremo i Fondamenti Cognitivi della User eXperience (UX) e vedremo, attraverso esempi concreti di progetti reali, come migliorare alcune tecniche classiche di design e come risolvere attraverso nuovi approcci situazioni tipiche della maggior parte dei progetti.

1. User Centered Design
per il Mobile
Andrea Picchi

2. ..Chi era Costui?
Andrea Picchi
Laurea in Psicologia (Padova)
Laureando in Informatica (Pisa)
1. Interface Designer
Domotica e Dispositivi Mobili
2. Designer & Developer
iPhone e iPad

3. ..Chi siete Voi?
Quanti Applicano dei
Processi di Sviluppo?

4. uscita:
29 GIU 2011
http://www.apress.com/9781430232469

5. Di che cosa
parleremo oggi?

6. Argomenti Trattati
USER CENTERED DESIGN
1 2 3 4
50 minuti

7. Argomenti Trattati
USER CENTERED DESIGN
UCD
iso 13407
1 2 3 4
50 minuti

8. Argomenti Trattati
USER CENTERED DESIGN
UCD UCD
iso 13407 fondamenti cognitivi
1 2 3 4
50 minuti

9. Argomenti Trattati
USER CENTERED DESIGN
UCD UCD UCD
iso 13407 fondamenti cognitivi esempi concreti
1 2 3 4
50 minuti

10. Argomenti Trattati
USER CENTERED DESIGN
UCD UCD UCD Domande
iso 13407 fondamenti cognitivi esempi concreti e dubbi
1 2 3 4
50 minuti

11. PARTE 01
UCD ISO 13407
- standard user centered design approach -

12. UCD ISO 13407
Protocollo ISO 13407 (1999)
“User Centered Design”
Protocollo ISO 12207 (1994)
“Software Lifecycle Processes”

13. UCD ISO 13407
Protocollo ISO 13407
“User Centered Design”
Risponde alle Domande
Cosa è importante per l’Utente?
Che Task compie l’Utente? Con che Frequenza? In che Ordine?
Quale è l’Ambiente di Utilizzo?
Quali sono i Vincoli Utente in Ottica Funzionale?
Quali sono le Aspettative dell’Utente?
Come il Design può Ottimizzare i Processi Cognitivi dell’Utente?

14. Approcci a Confronto
User Centered Design Driven Technology Driven
 Focus sulle Soluzioni  Focus sui Componenti
 Focus sulla Robustezza della UI  Focus sulla Robustezza Sistema
 Scenario Driven (Real World)  System Driven (Use Case)
 Qualità basta su Completamento Task  Qualità basata su Difetti del Prodotto

15. UCD ISO 13407
Protocollo ISO 13407 (Principi)
 Coinvolgimento Attivo Utenti
 Assegnazione Ruoli Sistema ed Utente*
 Iterare Soluzioni Design
 Usare Team Multi-Disciplinare
*Utente visto come Parte Centrale del Processo

16. UCD ISO 13407
Protocollo ISO 13407 (Attività)
 Specificare Contesto Uso
 Specificare Requisiti
 Creare Soluzioni Progettuali
 Valutare Design

17. UCD ISO 13407
1
2 Fasi di Analisi
 Specificare Contesto Uso
2  Specificare Requisiti

18. UCD ISO 13407
1
Specificare Contesto Uso
 Chi la Userà?
 Che Cosa ci Farà?
 In Quali Condizioni la Userà?

19. UCD ISO 13407
Specificare Requisiti
 Quali sono gli User Task?
2  Quali sono gli Obiettivi Business?

20. UCD ISO 13407
1
Alcuni Strumenti Fase 1 e 2
 Pianificazione Vincoli e Aspettative
2  Analisi Concorrenti
 Interviste con Potenziali Utenti
 Questionari
 Creazione Profili Utenti
 Creazione Elenco Compiti
 Creazione di Scenari

21. UCD ISO 13407
Alcuni Strumenti Fase 3
 Brainstorming e Discussioni Libere
 Sketching delle Interfacce
 Analisi Cognitiva Interfacce
 Prototipi delle Interfacce
3

22. UCD ISO 13407
Alcuni Strumenti Fase 4
 Test con Utenti
 Questionari
 Analisi Ispettive ed Euristiche
 Analisi Comparative
 Simulazioni Cognitive
4
 Implementazione

23. UCD ISO 13407
Processo Rigido?
NO
Processo Personalizzabile?
SI

24. Esempio 01
Interview Personas Storyboard
Sketch
Electronic Usability Paper
Prototype Testing Prototype
Usability Beta
Testing Prototype
Usability
Testing RELEASE

25. Esempio 02

26. Esempio 03
Specifica Contesto Specifica Requisiti
Valutazione Design
Soluzioni Design

27. PARTE 02
Fondamenti Cognitivi
- dello user centered design -

28. UCD ISO 13407
Caratteristiche Tecniche
Interagisce col Sistema*
*Sistema visto come Utente + Software + Hardware + Ambiente

29. UCD ISO 13407
Risponde alle Domande
Come Ottimizzare i Processi Cognitivi*?
*Processi Cognitivi dell’Utente durante l’Interazione con l’Interfaccia

30. UCD ISO 13407
E’ Guidato da
Scenari Reali
*Valore dell’Ambiente è una Variabile Fondamentale nel Processo

31. UCD ISO 13407
The White Box
approach*
*versus the black box approach

32. UCD ISO 13407
Sono Utente
in quanto Essere Umano*
*con delle peculiarità specifiche

33. {
{

34. Creazione Design Domotica
ad hoc Ubiquitous Computing
Ottimizzazione Cognitiva
Design Esistente
Aumento Livello
User eXperience*
Elaborazione Design
Persuasivo

35. Mainframe Personal Ubiquitous
1 Computer 1 Computer N Computer
N Utenti 1 Utenti 1 Utenti
100
75
50
25
0
1940 1950 1960 1970 1980 1990 2000 2010 2020
Chart: Mark Weiser

37. Def: Proc.Cognitivo
“sequenza di singoli eventi necessari alla formazione
di un qualsiasi contenuto di conoscenza”

38. “tutto”
accade in pochi
“momenti”
image credit: flickr @ jtbrennan

39. Come l’Essere Umano
Come l’Essere Umano
si interfaccia
si interfaccia
con l’ambiente?
con l’ambiente?

40. I 5 Sensi
come
framework
genetico
image credit: flickr @ victoriapeckham

41. Sist.Visivo
come
interfaccia
con l’Ambiente
image credit: flickr @ chefranden

42. visione

43. leggi e
principi della
percezione
image credit: flickr @ devendernarang

44. percezione

45. Sist.Percettivo
e l’archiviazione
dell’informazione
image credit: flickr @ yinyang

46. Breve Medio Lungo
Termine Termine Termine
memoria memoria memoria
cache ram di massa

47. Page Fault
PROCESSO
Load Page
WORKING
SET

48. Concetti Chiave
CI INTERFACCIAMO USANDO I 5 SENSI
... ...
1 2

49. Concetti Chiave
CI INTERFACCIAMO USANDO I 5 SENSI
Sistema Visivo
(occhio)
... ...
1 2

50. Concetti Chiave
CI INTERFACCIAMO USANDO I 5 SENSI
Sistema Visivo
(occhio)
sistema percettivo
(cervello)
... ...
1 2

51. Concetti Chiave
CI INTERFACCIAMO USANDO I 5 SENSI
Sistema Visivo
(occhio)
sistema percettivo
(cervello)
... ...
1 2
Nota: La Mappa Non e’ il Territorio

52. Risorse Cognitive
Attenzione
Percezione
Categorizzazione
Memoria Temporanea

53. Def: Risorsa Cognitiva
“capacita’ di gestire ed elaborare informazioni”

54. Risorse Disponibili
Risorse Disponibili = Risorse Totali - Risorse Ambiente

55. APP AMBIENTE

56. Concetti Chiave
LE RISORSE COGNITIVE SONO LIMITATE
1 2

57. Concetti Chiave
LE RISORSE COGNITIVE SONO LIMITATE
Consumate
dall’ambiente
1 2

58. Concetti Chiave
LE RISORSE COGNITIVE SONO LIMITATE
Consumate consumate
dall’ambiente dall’applicazione
1 2

59. PARTE 03
Esempi Concreti
- di user (cognitive) centered design -

60. ESEMPIO 01
Gestire Errori
- ridurre la percentuale di errori -

61. Ampiezza Contenuti
- meno opzioni = meno errori -

62. Profondità Contenuti
- più focus = meno errori -

63. ISTANZA ISTANZA
“CASA” “AUTOBUS”
15% 65%
DISTURBO DISTURBO
MOBILE RSS

64. AMBIENTE ≠ AMBIENTE

65. Concetti Chiave
OTTIMIZZARE SCORRIMENTO CONTENUTI
1 2

66. Concetti Chiave
OTTIMIZZARE SCORRIMENTO CONTENUTI
wide: riducendo
le opzioni
1 2

67. Concetti Chiave
OTTIMIZZARE SCORRIMENTO CONTENUTI
wide: riducendo deep: aumentando
le opzioni il focus
1 2

68. ESEMPIO 02
Creare Interazione
- uso delle leggi di percezione -

69. Interfacce Cognitive
- negative e positive space -

70. Interfacce Cognitive
- legge di prossimità e similarità -

71. Concetti Chiave
MODELLARE TUTTI GLI SPAZI
1 2

72. Concetti Chiave
MODELLARE TUTTI GLI SPAZI
sia spazi
positivi
1 2

73. Concetti Chiave
MODELLARE TUTTI GLI SPAZI
sia spazi sia spazi
positivi negativi
1 2

74. Concetti Chiave
MODELLARE TUTTI GLI SPAZI
sia spazi sia spazi
positivi negativi
1 2
* in quanto essere umano

75. ESEMPIO 03
Carico Informativo
- ridurre il rumore cognitivo dei contenuti -

76. Progressive Disclosure
- fornire messaggi all’utente -
V Summit di Architettura dell’Informazione - Milano, 5-7 maggio 2011 62

78. Dettagli Avanzati
- solo su richiesta dell’utente -

79. Lasciatelo Agire
- ridurre il rumore cognitivo nei processi decisionali -

81. Nella stessa “Pagina”
- usando anche elementi grafici -

83. Concetti Chiave
OTTIMIZZARE FRUIZIONE CONTENUTI
1 2

84. Concetti Chiave
OTTIMIZZARE FRUIZIONE CONTENUTI
riducendo il
rumore cognitivo
1 2

85. Concetti Chiave
OTTIMIZZARE FRUIZIONE CONTENUTI
riducendo il usando il
rumore cognitivo progressive disclosure
1 2

86. ESEMPIO 04
Ottimizzare Esperienze
- aderenza tra schemi mentali e concettuali -

87. Implementation
Mode Represented
#import <Foundation/Foundation.h> Mode
int main (int argc, const char * argv[]) {
NSAutoreleasePool * pool = [[NSAutoreleasePool alloc] init];
... ... ...
}
Mental
Mode
Nomenclature: Donald Norman

88. Manca Qualcosa
- il supporto delle esperienze passate -

89. *

90. Introdurre Paradigmi
- creare e forzare gli schemi mentali -

92. Concetti Chiave
DISEGNARE PER GLI SCHEMI MENTALI
1 2

93. Concetti Chiave
DISEGNARE PER GLI SCHEMI MENTALI
schemi*
già esistenti
1 2

94. Concetti Chiave
DISEGNARE PER GLI SCHEMI MENTALI
schemi* schemi*
già esistenti da creare
1 2

95. Concetti Chiave
DISEGNARE PER GLI SCHEMI MENTALI
schemi* schemi*
già esistenti da creare
1 2
* schemi mentali

96. ESEMPIO 05
Esperienza Surrogate
- implementare esperienze nell’utente -

100. RICORDO
(reale)
RICORDO
(surrogato)
Non Vengono
Percepite Differenze

101. 1
RICORDO
(reale)
2 RICORDO
(surrogato)

102. Concetti Chiave
SFRUTTARE TUTTI I TIPI DI RICORDI
1 2

103. Concetti Chiave
SFRUTTARE TUTTI I TIPI DI RICORDI
reali: per
ottimizzare sm*
1 2

104. Concetti Chiave
SFRUTTARE TUTTI I TIPI DI RICORDI
reali: per surrogati: per
ottimizzare sm* creare sm*
1 2

105. Concetti Chiave
SFRUTTARE TUTTI I TIPI DI RICORDI
reali: per surrogati: per
ottimizzare sm* creare sm*
1 2
* schemi mentali

106. ESEMPIO 06
Regole Sociali
- usare regole sociali nelle interazioni -
V Summit di Architettura dell’Informazione - Milano, 5-7 maggio 2011 84

108. 1sec

110. Concetti Chiave
UTENTE ASPETTA SEMPRE UN FEEDBACK
1 2

111. Concetti Chiave
UTENTE ASPETTA SEMPRE UN FEEDBACK
nella
navigazione
1 2

112. Concetti Chiave
UTENTE ASPETTA SEMPRE UN FEEDBACK
nella nelle
navigazione interazioni
1 2

113. ESEMPIO 07
Valore Sociale
- incrementare la reputazione con i feedback -

116. Principio
Similarità + Principio
Validazione Sociale

117. Concetti Chiave
USARE SEMPRE LA VALIDAZIONE SOCIALE
1 2

118. Concetti Chiave
USARE SEMPRE LA VALIDAZIONE SOCIALE
per motivare
gli indecisi
1 2

119. Concetti Chiave
USARE SEMPRE LA VALIDAZIONE SOCIALE
per motivare per rafforzare
gli indecisi la reputazione
1 2

120. Concetti Chiave
USARE SEMPRE LA VALIDAZIONE SOCIALE
per motivare per rafforzare
gli indecisi la reputazione
1 2
* in quanto essere umano

121. ESEMPIO 08
Creare Empatia
- uso delle immagini per motivare azioni -

122. Neuroni Specchio
- sfruttare indirettamente l’empatia -

123. Più Aggressivo
- sfruttare direttamente l’empatia -

124. Ads Dinamici
- aumentano realismo ed impatto cognitivo* -

125. Ads Dinamici
- aumentano realismo ed impatto cognitivo* -
* percepiti più aderenti al contesto

127. Concetti Chiave
CREARE EMPATIA CON GLI UTENTI
1 2

128. Concetti Chiave
CREARE EMPATIA CON GLI UTENTI
in maniera
diretta
1 2

129. Concetti Chiave
CREARE EMPATIA CON GLI UTENTI
in maniera in maniera
diretta indiretta
1 2

130. Concetti Chiave
CREARE EMPATIA CON GLI UTENTI
in maniera in maniera
diretta indiretta
1 2
* in quanto essere umano

131. UCD per il Mobile
Grazie per l’ascolto!
more info:
www.andreapicchi.it
slideshare.net/andreapicchi
twitter.com/andreapicchi
it.linkedin.com/in/andreapicchi
info@andreapicchi.it

132. uscita:
29 GIU 2011
http://www.apress.com/9781430232469