Starhotels Excelsior (Bologna, Italy) 28 Ottobre 2013 Per progettare l'esperienza d'uso non puoi fermarti all'interfaccia utente statica. Devi considerare l'interazione tra l'interfaccia utente, l'essere umano e il contesto ambientale, nonché la percezione temporale. Valuta come questo impatta sull'intero processo di sviluppo applicativo, analizzando anche un caso d'uso tratto da un progetto reale. I principi illustrati nella sessione sono validi per qualsiasi piattaforma mobile, indipendentemente dai sistemi usati negli esempi.

1. 28
ottobre
2013
Bologna

2. #mobc2013

3. UI01
DESIGNING
THE USER EXPERIENCE
Andrea
Picchi
Paddy
Power,
Senior
UX
Architect
info@andreapicchi.it
www.andreapicchi.it
@andreapicchi

4. Andrea Picchi
• Formazione
• Informatica
(Università
di
Pisa)
• Psicologia
(Università
di
Padova).
• Insegnamento
• Corso:
iOS
Design
and
Dev
(Università
di
Pisa)
• Master:
Mobile
Design
and
Dev
(Università
di
Pisa).

5. Andrea Picchi
• Autore
• Objective-­‐C
2.0
per
iOS
ed
OSX
(FAG).
• Pro
iOS
Design
and
Development
(Apress).

6. Andrea Picchi
• Lavoro
• Senior
UX
Architect
(Paddy
Power).
• Head
of
UX-­‐UI
(Xool).
• …
…
…

17. ARGOMENTI
TRATTATI
Parte
1:
Framework
Cognitivo:
Macro-­‐Variabili
di
Mobile
Design.
Parte
2:
Esempi
Pratici:
Deliverables
e
Metro
Finance.

18. ARGOMENTI
NON TRATTATI
Quantificare
la
User
Experience:
Intervalli
di
Confidenza,
Probabilità,
…
Micro-­‐Variabili
di
Mobile
Design:
Completamento,
Soddisfazione.
Sforzo,
…
Implementazione
delle
Guidelines:
iOS,
Android,
Windows
Phone.

19. FRAMEWORK
COGNITIVO
Parte
1:
Il
lato
Oscuro
dell’Utente.
-­‐
>
Parallelismo
Uomo
Macchina
-­‐
Macro-­‐Variabili
del
Processo
di
Design

20. Essere Umano
def
Essere
Umano
processatore*
di
informazioni
*
Human
information
processing
theory

21. Essere Umano
Cervello
VS
TelCo
Mondiali
Cervello
VS
Chicco
Riso
*Human
Information
Processing
Theory

22. Memoria: Gerarchia
breve
media
lunga
cache
ram
hd

23. Risorse: Disponibilita’
consumo
RISORSE
LIMITATE
Es:
Processore,
Memoria,
Attenzione,
…
consumo

24. Risorse: Evoluzione
4D
RISORSE
t
LIMITATE
Es:
Working
Set

25. Risorse: Natura
def
Risorsa
Cognitiva
capacità*
di
gestire
ed
elaborare
informazioni
*
di
natura
discreta

26. Risorse: Natura
tipi
di
Risorse
Attenzione
Percezione
...
...
…
Memoria
Temporanea

27. Risorse: Natura
limite
Risorse
impossibilità
di
modellare
il
continuo
con
un
insieme
di
risorse
discrete

28. Risorse: Attenzione
Attenzione
guida
l’interazione
con
l’interfaccia
e
può
lavorare
in
varie
configurazioni
tra
cui
selettiva
o
distribuita

29. Risorse: Attenzione ed Interazione

30. Risorse: Attenzione e Parallelismo
Attenzione
“il
prendere
possesso
da
parte
della
mente..
di
uno
fra
tanti
oggetti..
che
si
presentano
come
simultaneamente
possibili..
..essa
implica
il
tralasciare
certe
cose
per
occuparsi
con
più
efficienza
di
altre.”*
*
William
James,
Principi
di
Psicologia

31. Risorse: Attenzione e Parallelismo
Attenzione
una
reale
forma
di
parallelismo
attivo*
e
performante
a
360
gradi
non
é
possibile
per
l’utente.
*
consapevole,
senza
l’introduzioe
di
azioni
automatiche
o
semi-­‐automatiche

32. Risorse: Attenzione e Concorrenza
Attenzione
vale
invece
il
concetto
di
concorrenza
tipico
degli
ambienti
a
risorse
discrete
condivise
*
consapevole,
senza
l’introduzioe
di
azioni
automatiche
o
semi-­‐automatiche

33. FRAMEWORK
COGNITIVO
Parte
1:
Il
lato
Oscuro
dell’Utente.
-­‐
Parallelismo
Uomo
Macchina
-­‐
>
Macro-­‐Variabili
del
Processo
di
Design

34. Ambiente: 3 Macro Variabili
{
Variabili
Interazione
*
costante
Design*
Utente
Contesto

35. Design: Costante
Layout
perché
é
importante?
per
controllare
la
comunicazione
utente-­‐interfaccia
*
Vista
=
singola
view
dell’interfaccia

36. Design: Costante
valore
Costante
Non
varia
rispetto
alla
vista*
Non
varia
rispetto
allo
scenario
di
interazione
*
Vista
=
singola
view
dell’interfaccia

37. Design: Costante
10100101
user

38. Design: Costante
def
Credenza
sensazione
di
certezza
riguardo
a
qualcosa
*
Vista
=
singola
view
dell’interfaccia

39. CREDENZA
POTENZIALE
RISULTATO
AZIONE

40. learning
curve
user
experience

43. Design: Costante
implicaz
Pratiche?
la
più
significativa:
il
design
influenza
il
“mondo
interiore”
dell’utente*
*
es:
nella
creazioni
di
credenze
ed
aspettative
sul
tipo
di
interazione

44. Ambiente: 3 Macro Variabili
{
Variabili
Interazione
*
variabile
Design
Utente*
Contesto

45. Utente: Variabile
Uomo
perché
é
importante?
per
modellare*
(predire
e/o
influenzare)
l’interazione
utente-­‐interfaccia
*
Vista
=
fondamentale
nella
fase
di
analisi,
design
e
di
test

46. Utente: Variabile
tipi
di
Risorse
Attenzione
Percezione
...
...
…
Memoria
Temporanea

47. Utente: Variabile
valore
Variabile
Varia
rispetto
alla
vista*
Varia
rispetto
allo
scenario
di
interazione
*
Vista
=
singola
view
dell’interfaccia

48. SU
QUESTO
ARGOMENTO
SEGUI
ANCHE:
Essere Umano > Utente
• Padre/Madre.
• Amico/Amica.
• Sviluppatore.
• Sportivo.
• Attivista.
• …
…
…
• …
…
…
• Utente.

49. Essere Umano

50. Essere Umano
INTERNET
CONNECTION

51. Essere Umano
INTERNET
CONNECTION

52. Utente: Variabile
def*
Bisogno
“forma
di
nutrimento
psicologico
innato
ed
essenziale
per
la
crescita
psicologica,
l'integrità
ed
il
benessere
dell’individuo”
*
Deci,
Ryan
-­‐
2000

53. Utente: Variabile
implicaz*
Bisogni
“influenzano
lo
stato
emotivo
condizionano
i
processi
di
pensiero
elicitano
comportamenti
orientati
alla
loro
soddisfazione
......
...
tendono
ad
essere
universali”
*
Baumeister,
Leary
-­‐
1995

54. Utente: Variabile
def*
Valore
“insieme
di
credenze,
stabili
e
generali
su
ciò
che
é
desiderabile”
*
Feather
-­‐
1992

55. Utente: Variabile
impilicaz*
Valori
“(nascono
da
processi
che)
coinvolgono
principalmente
bisogni
primari,
senso
del
se
e
norme
sociali”
*
Feather
-­‐
1992

56. Utente: Variabile
def*
Intenzione
“determinazione
ad
impegnarsi
in
un
particolare
comportamento”
*
Deci,
Ryan
-­‐
1987

57. Utente: Variabile
implicaz*
Intenzione
“rispecchiano
il
desiderio
di
raggiungere
risultati
positivi
e/o
evitare
risultati
negativi”
*
Deci,
Ryan
-­‐
1987

58. Utente: Variabile
Valori0
Valro0
…
…
…
Contesto0
Equazione
Differenziale
…….....
user
t
user
Valorin
Valron
…
…
…
Conteston

59. Utente: Variabile
Valori
Valro
…
…
…
Contesto
2a
2b
1010101010101010101
1
3
interazione
user

60. Utente: Variabile
n
0
……....................
…….....
user
t
user

61. Utente: Variabile
modello
Mentale
“fornisce
un
immediata
aspettativa
su
ciò
che
sta
per
accadere*
all’utente
dando
la
possibilità
al
sistema
emozionale
di
valutare
la
sua
valenza
positiva
o
negativa”
*
Donald
Norman,
intervista
sui
concetti
dei
modelli
mentali

62. Utente: Variabile
modello
Concettuale
dev
modello
Sistema
modello
Mentale
user

63. Utente: Variabile
implicaz
Pratiche?
le
più
significative:
l’utente
ha
risorse
limitate
la
mappa
non
è
il
territorio

64. Ambiente: 3 Macro Variabili
{
Variabili
Interazione
Design
Utente
Contesto

65. Contesto: Variabile
Contesto
perché
é
importante?
per
modellare
(predire)
le
”interferenze”
utente-­‐interfaccia

66. Contesto: Variabile
risorse
Disponibili
Risorse
Disponibili
=
Risorse
Totali
-­‐
Risorse
Ambiente

67. Contesto: Variabile
ambiente
app
utente

68. Contesto: Variabile
Istanza
(casa)
app
Istanza
(bus)

69. Contesto: Variabile
punto
Critico*
sistema
cognitivo
é
vulnerabile
a
determinate
combinazioni
di
condizioni
ambientali
e
di
condizioni
ambientali
ed
azioni
da
compiere
*
di
interazione

70. Contesto: Variabile
sovraccar
Cognitivo
risorse
disponibili
≤
risorse
necessarie

71. Contesto: Variabile
sovraccar
Cognitivo
accentuato
da
un
contesto
che
definisce
due
azioni
che
condividono
la
modalità
di
input*
e/o
di
output
*
es:
sistema
visivo

72. Contesto: Variabile
sovraccar
Cognitivo
ottimizzare
verso
il
“giusto”
carico
cognitivo
non
cercare
di
ridurlo
indiscriminatamente
!
alto
carico
cognitivo
=
alta
interferenza
basso
carico
cognitivo
=
bassa
motivazione
*
es:
sistema
visivo

73. Contesto: Variabile
implicaz
Pratiche?
la
più
significativa:
Il
contesto
ha
un
“costo”
Il
contesto
influenza
la
percezione
ed
i
livelli
di
user
experience

74. Recap: 3 Macro Variabili
{
Variabili
Interazione
Design
Utente
Contesto

75. Recap HCD*
DESIGN
UTENTE
COSTANTE
VARIABILE
CONTESTO
VARIABILE
*
Human
Centered
Design

76. Contesto: Variabile
implicaz
Progetto?
la
più
significative:
modellare
essere
umano
>
utente
(sottoinsieme)
!
esempio:
Inserire
carichi
cognitivi
(utente)
in
persona,
use
journey,
ecc..
distinguere
istanze
(contesto)
app
nei
test
e
loro
valutazione

77. ALCUNI
ESEMPI PRATICI
Parte
2:
Esempi
Pratici:
Deliverables
e
Metro
Finance.
-­‐
>
Discovery,
Research,
Design,
…
,Test.

78. Discovery: Tipo di Bisogno
• Primary
User
Requirements:
• Search
a
Security
• Add
a
Security
to
Portfolio
• Secondary
User
Requirements:
• Edit
a
Security
Orders
• View
a
Security
Chart
• Tertiary
User
Requirements:
• Read
Market
News

79. Discovery: Tipo di Bisogno
• Primary
Uman
Requirements:
• Sicurezza
• Dato
Visualizzato
(es:
rete)
• Secondary
Uman
Requirements:
• Controllo
• Opzioni
Visualizzate
(es:
ordini)
• …
…
…

80. Research: Tipo di Profilo
•
•
•
•
•
•
•
•
Dati
Anagrafici.
Lavoro.
Eta.
Quotes.
Tipo
Utente.
Abitudini.
Aspettative.
Devices.

81. Research: Tipo di Profilo

82. Research: Tipi di Carichi Cognitivi
!
Task
soggetti
a
sovraccarico

83. Design: Tipo di Attenzione

84. Test: Tipo di Contesto ed Utente
!
Task
soggetti
a
sovracarico

85. Test: Tipo di Contesto ed Utente
!
Task
soggetti
a
sovracarico

86. QUESTIONS"
"
&
ANSWERS

87. Grazie.
Non
dimenticare
di
riempire
il
modulo
di
feedback
UI01

88. #mobc2013

89. ©
EventHandler
S.r.l.
All
rights
reserved.
Microsoft,
Windows
and
all
other
trademarks
and
copyrights
are
the
property
of
their
respective
owners.
EventHandler
cannot
guarantee
the
accuracy
of
any
information
provided
after
the
date
of
this
presentation.
EVENTHANDLER
MAKES
NO
WARRANTIES,
EXPRESS,
IMPLIED
OR
STATUTORY,
AS
TO
THE
INFORMATION
IN
THIS
PRESENTATION.