A short, fast workshop on UX and HCD design

1. UX-XPLOSION
User Experience Design
WORKSHOP
2016
Francesca Murtas

2. FRANCESCA MURTAS
Interaction designer
UX designer
User Researcher
UI Designer
Product designer
core2design
umanista
mapper
sindacalista degli esseri umani
nella tecnologia

3. Francesca

4. User Experience
L’esperienza di una persona che usa un prodotto
come un sito internet, un’applicazione o una
tecnologia che preveda l’interazione umana.

5. “Ho inventato il termine UX perché ho
pensato che le parole “interfaccia umana” e
“usabilità” fossero troppo limitate.
Ho voluto considerare tutti gli aspetti
dell’esperienza di una persona con il
sistema, incluso l’industrial design, la
grafica, l’interfaccia, l’interazione.”
DON NORMAN

6. “Le persone, le loro attività e il contesto delle loro
azioni: ecco cos’è la UX”
Stephen P. Anderson

7. User Experience Design is the process of
development and improvement of quality
interaction between a user and all facets
of a company.

8. A plan to make do things to users
USER EXPERIENCE DESIGN

12. COME?

16. Quali limiti?

18. http://www.abbanoa.it

19. QUALE AZIONE?

21. QUALE CONTESTO?
Quando + Dove

22. COSA?
CHI?
DOVE?
QUANDO?
QUANTO?

23. Progettare significa porsi domande

24. DESIGN IS NOT JUST
WHAT IT LOOKS LIKE AND
IT FEELS LIKE.
DESIGN IS HOW IT WORKS
Steve Jobs

25. DIFFERENZE TRA UI E UXU I = U s e r I n t e r f a c e s , è l a
visualizzazione della UX. Sono gli
elementi visivi che compongono
l’esperienza. E’ sempre frutto della
strategia di UX
La UX= è l’esperienza nel completo
di un prodotto

27. UI

28. UX

29. it’s about questions
UN GRAFICO SI CHIEDE
“E’ BELLO?”
UNO UX DESIGNER SI
CHIEDE “SERVE?”

32. Fonte: Usabilia

33. INTERACTION DESIGN
Le interazioni sono la base della UX, sono tutte le azioni che
fa una persona con un prodotto digitale: click, tap, scroll ect.
Possiamo scegliere che tipo di interazioni vogliamo inserire,
la frequenza con cui si ripetono, l’ordine,la quantità, la
piacevolezza.
Indovinare le interazioni è già la metà di una UX

34. INFORMATION ARCHITECTURE
Organizzare l’informazione in modo da aiutare gli utenti a
capire dove sono, cosa possono fare per completare la loro
azione.
Quali sono le categorie principali di azione?Quali sono i
contenuti più importante? Quali categorie possono
contenerne altre?

36. h t t p : / / i n d i a r a i l i n f o . c o m / s e a r c h / a g r a - c a n t t - a g c - t o - e r n a k u l a m - s o u t h - e r s / 4 5 0 / 0 / 5 2 ?
&qt=0&date=14709600&kkk=1463458143543

37. CONTENT STRATEGY
I contenuti sono moto importanti per un sito, devono essere
scritti in maniera chiara, seguire anch’essi una logica vicina
al prodotto e alla Ux che si è decisa.
I contenuti possono di essere di varia natura: testi, blog, foto,
mappe, video, podcast, social media.

38. VISUAL DESIGN
L’estetica è molto importante in alcuni servizi digitali, perché
come esseri umani la vista è uno dei nostri sensi fondamentali
e nell’interazione con un prodotto digitale la piacevolezza,
quindi la grafica serve a creare un’esperienza positiva.
Il 75% del primo giudizio su un sito web è dato dalla
sensazione provata allo sguardo (look and feel)

39. TIPOGRAFIA
La leggibilità e la facilità di comprensione del nostro prodotto
digitale sono essenziali. Aggiungiamo che la tipografia ha
anche un altro potere che è quello della piacevolezza,
possiamo veicolare anche bellezza attraverso le
caratteristiche dei font che scegliamo.

41. FUNZIONALITA’
Questo è uno dei fondamentali più semplici, una prodotto
digitale DEVE funzionare. Un sito/un’app un servizio servono
a fare qualcosa: che sia offrire un’informazione, promuovere
una prodotto, fare una prenotazione, spiegare dove si trova
una struttura. Ogni elemento, contenuto, organizzazione
deve osservare sempre questo principio: DEVE funzionare.
Ancora una volta ci chiederemo quando facciamo qualcosa:
A cosa serve? Che funzionalità ha?

42. USER INTERFACE
L’interfaccia, che spesso viene confusa con la UX, è invece
ciò che l’utente vede del prodotto digitale, è ciò con cui
l’utente interagisce.

43. “L’usabilità è un indicatore di qualità che ci dice
quanto una determinata cosa è semplice da
usare.
Jakob Nielsen
USABILITA’

44. USABILITA’
L’usabilità è una caratteristica di una buona UX
L’usabilità del passato era standard
L’usabilità attuale è in continuo divenire

45. Chi stabilisce l’usabilità?
Sistemi operativi

46. Chi stabilisce l’usabilità?
Sistemi operativi
Persone

47. Chi stabilisce l’usabilità?
Sistemi operativi
Persone Contesti

49. ERGONOMIA COGNITIVA
Fare in modo che la progettazione
pensata sia nella misura massima
possibile più aderente ai bisogni
cognitivi e ai modelli mentali delle
persone a cui si rivolge

50. Un artefatto digitale che deve essere
utilizzato da una persona è un artefatto
cognitivo.
Una buona progettazione è aderente ai
bisogni, limiti e desideri dell’uomo

51. MENTAL MODELS
I modelli mentali di come facciamo le
cose e come percepiamo il mondo
esterno:
una possibile azione, un possibile
prodotto, una possibile esperienza

52. DA DOVE INIZIO?

53. 1. INTERVISTARE IL PROPRIO CLIENTE
- Chi sono i suoi utenti attuali?
- Chi vorrebbe che fossero i suoi futuri
clienti?
-Cosa vuole comunicare?
-Cosa vuole ottenere dal prodotto
digitale che noi creeremo?

54. POI?

55. EFFETTO AMICO IMMAGINARIO

56. REGOLA DI
PROGETTAZIONE
NON SI PROGETTA MAI
PER SE’ STESSI

57. LA UX E’ IL PROCESSO FRUTTO
DELL’INCONTRO DEI BISOGNI E LIMITI
DI UN’AZIENDA CON QUELLI DELLE
PERSONE

58. IDEO
COSA VOGLIONO?
COSA DOVREMMO FARE?
COSA POSSIAMO FARE?

59. PROGETTARE PER
LE PERSONE E IL CONTESTO
+ strategie business
+ limiti tecnologici
UX DESIGN

60. LIMITI UMANI
BISOGNI
EMOZIONI
CONTESTO

61. SVILUPPARE L’EMPATIA
E’
SVILUPPARE L’ASCOLTO
E
L’OSSERVAZIONE

62. “Connettersi agli altri empiricamente non significa
raccontarsi o piangere con gli altri, ma potenziare le
proprie capacità di ascolto.Avere l’abitudine di chiedere ai
propri amici o colleghi circa specifiche esperienze è positivo.
Fare domande costringe noi progettisti a vedere il mondo con
i loro occhi”
Questo si può fare soltanto ascoltando gli altri

63. STRUMENTI

64. L’ESSENZIALEUN BLOCCO IN CUI ANNOTARE

65. Orecchio

66. KILLER TOOL

67. RICERCA O USER RESEARCH

68. USER RESEARCH
capire +
esplorare

69. TOOL USER RESEARCH
Interviste
User Personas
Card sorting
Focus group
Task analysis
Questionari
Osservazione

70. OSSERVAZIONE + ASCOLTO
UTENTI E CAMPO DI AZIONE

71. OSSERVAZIONE

72. USER RESEARCH
FARLA

73. USER RESEARCH
FARLA
FARLA PRIMA

74. USER RESEARCH
FARLA
FARLA PRIMA
FARLA SPESSO

75. USER RESEARCH
Capire il più possibile la persona
Capire il contesto

76. CHI?
*Capire gli utilizzatori presenti o futuri
*Una user research sufficiente varia dai 5 ai 15
utenti
*La demografia non conta
*Dividiamo i nostri utenti per pattern di
comportamento

77. Intervista

78. “Cosa vorresti?”
“Come lo vorresti?”

79. OTTENERE DEI REQUISITI DI
PROGETTAZIONE

80. DOWNLOAD DATA

81. PERSONAS

82. PERSONAS

83. HOW MIGHT WE
-USER A: mi reco spesso nei negozi *Tiscali per
sapere se ci sono nuove tariffe convenienti o
offerte
COME POTREMMO?
ESERCIZIO

84. HOW MIGHT WE
-USER A: mi reco spesso nei negozi *Tiscali per sapere se ci
sono nuove tariffe convenienti o offerte
COME POTREMMO?
-Come potrebbe la piattaforma informarmi del negozio più
vicino?
-Come potrei migliorare il negozio in modo che l’offerta attiri
anche dalla strada?
-Come potrei migliorare il negozio in modo che l’offerta attiri
anche dalla strada?

85. ANALISI
=
una buona user research ci permette di
progettare con intenzionalità,con degli
obiettivi chiari per i nostri utenti
lungo tutto il progetto

86. SNAPCHAT-Case
Fonte: http://www.kimlagesse.com

87. SNAPCHAT
NUOVA UI
Fonte: http://www.kimlagesse.com

88. SNAPCHAT
TUTORIAL
Fonte: http://www.kimlagesse.com

89. PROTOTIPAZIONE

90. DON’T EXPLAIN VISUALIZE!
Storyboard
1

91. DON’T EXPLAIN VISUALIZE!
Rapid Prototyping
2

92. DON’T EXPLAIN VISUALIZE!
Rapid Prototyping
3

93. DON’T EXPLAIN VISUALIZE!
Integra il feedback e implementa
4

94. WIREFRAMES
• I wireframes sono le “brutte” delle interfacce
• Servono a prioritizzare l’informazione
• Servono a costruire i layout
• Possono essere testati

95. Wireframe

96. SKETCH+ MIRROR

97. CARTA!!!

98. ARDUINO

99. TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTEST
TEST
TEST
TEST
TEST
TEST

100. LAB TEST
LIVE TEST

101. VALIDAZIONE
IMPLEMENTAZIONE

102. COSA?
IL DESIGN E’ INVISIBILE

103. NON PROGETTARE PER TE STESSO

104. HUMAN
CENTERED
DESIGN

105. DISEGNARE L’IMPATTO
…di un servizio o di un prodotto
nel sistema in cui è inserito

107. Il nostro servizio si inserisce SEMPRE in
un’ecosistema già esistente

108. DONT’ BE UBER

109. SIATE RESPONSABILI
GLI UMANISTI SERVONO!

110. GRAZIE
Images on 67, 89-93 taken by “An introduction to HCD - IDEO ” , IDEO- Design kit 2016

111. HAVE NO FEAR OF PERFECTION.
YOU’LL NEVER REACH IT
Salvador Dali