SlideShare une entreprise Scribd logo
1  sur  111
Télécharger pour lire hors ligne
UX-XPLOSION
User Experience Design
WORKSHOP
2016
Francesca Murtas
FRANCESCA MURTAS
Interaction designer
UX designer
User Researcher
UI Designer
Product designer
core2design
umanista
mapper
sindacalista degli esseri umani
nella tecnologia
Francesca
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.
“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
“Le persone, le loro attività e il contesto delle loro
azioni: ecco cos’è la UX”
Stephen P. Anderson
User Experience Design is the process of
development and improvement of quality
interaction between a user and all facets
of a company.
A plan to make do things to users
USER EXPERIENCE DESIGN
COME?
Quali limiti?
http://www.abbanoa.it
QUALE AZIONE?
QUALE CONTESTO?
Quando + Dove
COSA?
CHI?
DOVE?
QUANDO?
QUANTO?
Progettare significa porsi domande
DESIGN IS NOT JUST
WHAT IT LOOKS LIKE AND
IT FEELS LIKE.
DESIGN IS HOW IT WORKS
Steve Jobs
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
UI
UX
it’s about questions
UN GRAFICO SI CHIEDE
“E’ BELLO?”
UNO UX DESIGNER SI
CHIEDE “SERVE?”
Fonte: Usabilia
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 
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?
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
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.
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)
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.
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?
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. 
“L’usabilità è un indicatore di qualità che ci dice
quanto una determinata cosa è semplice da
usare.
Jakob Nielsen
USABILITA’
USABILITA’
L’usabilità è una caratteristica di una buona UX
L’usabilità del passato era standard
L’usabilità attuale è in continuo divenire
Chi stabilisce l’usabilità?
Sistemi operativi
Chi stabilisce l’usabilità?
Sistemi operativi
Persone
Chi stabilisce l’usabilità?
Sistemi operativi
Persone Contesti
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
Un artefatto digitale che deve essere
utilizzato da una persona è un artefatto
cognitivo.
Una buona progettazione è aderente ai
bisogni, limiti e desideri dell’uomo
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
DA DOVE INIZIO?
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?
POI?
EFFETTO AMICO IMMAGINARIO
REGOLA DI
PROGETTAZIONE
NON SI PROGETTA MAI
PER SE’ STESSI
LA UX E’ IL PROCESSO FRUTTO
DELL’INCONTRO DEI BISOGNI E LIMITI
DI UN’AZIENDA CON QUELLI DELLE
PERSONE
IDEO
COSA VOGLIONO?
COSA DOVREMMO FARE?
COSA POSSIAMO FARE?
PROGETTARE PER
LE PERSONE E IL CONTESTO
+ strategie business
+ limiti tecnologici
UX DESIGN
LIMITI UMANI
BISOGNI
EMOZIONI
CONTESTO
SVILUPPARE L’EMPATIA
E’
SVILUPPARE L’ASCOLTO
E
L’OSSERVAZIONE
“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
STRUMENTI
L’ESSENZIALEUN BLOCCO IN CUI ANNOTARE
Orecchio
KILLER TOOL
RICERCA O USER RESEARCH
USER RESEARCH
capire +
esplorare
TOOL USER RESEARCH
Interviste
User Personas
Card sorting
Focus group
Task analysis
Questionari
Osservazione
OSSERVAZIONE + ASCOLTO
UTENTI E CAMPO DI AZIONE
OSSERVAZIONE
USER RESEARCH
FARLA
USER RESEARCH
FARLA
FARLA PRIMA
USER RESEARCH
FARLA
FARLA PRIMA
FARLA SPESSO
USER RESEARCH
Capire il più possibile la persona
Capire il contesto
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
Intervista
“Cosa vorresti?”
“Come lo vorresti?”
OTTENERE DEI REQUISITI DI
PROGETTAZIONE
DOWNLOAD DATA
PERSONAS
PERSONAS
HOW MIGHT WE
-USER A: mi reco spesso nei negozi *Tiscali per
sapere se ci sono nuove tariffe convenienti o
offerte
COME POTREMMO?
ESERCIZIO
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?
ANALISI
=
una buona user research ci permette di
progettare con intenzionalità,con degli
obiettivi chiari per i nostri utenti
lungo tutto il progetto
SNAPCHAT-Case
Fonte: http://www.kimlagesse.com
SNAPCHAT
NUOVA UI
Fonte: http://www.kimlagesse.com
SNAPCHAT
TUTORIAL
Fonte: http://www.kimlagesse.com
PROTOTIPAZIONE
DON’T EXPLAIN VISUALIZE!
Storyboard
1
DON’T EXPLAIN VISUALIZE!
Rapid Prototyping
2
DON’T EXPLAIN VISUALIZE!
Rapid Prototyping
3
DON’T EXPLAIN VISUALIZE!
Integra il feedback e implementa
4
WIREFRAMES
• I wireframes sono le “brutte” delle interfacce
• Servono a prioritizzare l’informazione
• Servono a costruire i layout
• Possono essere testati
Wireframe
SKETCH+ MIRROR
CARTA!!!
ARDUINO
TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTEST
TEST
TEST
TEST
TEST
TEST
LAB TEST
LIVE TEST
VALIDAZIONE
IMPLEMENTAZIONE
COSA?
IL DESIGN E’ INVISIBILE
NON PROGETTARE PER TE STESSO
HUMAN
CENTERED
DESIGN
DISEGNARE L’IMPATTO
…di un servizio o di un prodotto
nel sistema in cui è inserito
Il nostro servizio si inserisce SEMPRE in
un’ecosistema già esistente
DONT’ BE UBER
SIATE RESPONSABILI
GLI UMANISTI SERVONO!
GRAZIE
Images on 67, 89-93 taken by “An introduction to HCD - IDEO ” , IDEO- Design kit 2016
HAVE NO FEAR OF PERFECTION.
YOU’LL NEVER REACH IT
Salvador Dali

Contenu connexe

Tendances

UXstrategy: User Experience e Global Brand Experience
UXstrategy: User Experience e Global Brand ExperienceUXstrategy: User Experience e Global Brand Experience
UXstrategy: User Experience e Global Brand Experience
UXconference
 

Tendances (12)

UXstrategy: User Experience e Global Brand Experience
UXstrategy: User Experience e Global Brand ExperienceUXstrategy: User Experience e Global Brand Experience
UXstrategy: User Experience e Global Brand Experience
 
UX TTC
UX TTCUX TTC
UX TTC
 
Design thinking: Redesign the school-to-work transition
Design thinking: Redesign the school-to-work transitionDesign thinking: Redesign the school-to-work transition
Design thinking: Redesign the school-to-work transition
 
Data Driven UX - Come lo facciamo
Data Driven UX - Come lo facciamoData Driven UX - Come lo facciamo
Data Driven UX - Come lo facciamo
 
Responsive Design: dall'identità al web
Responsive Design: dall'identità al webResponsive Design: dall'identità al web
Responsive Design: dall'identità al web
 
Come mentono i prodotti
Come mentono i prodottiCome mentono i prodotti
Come mentono i prodotti
 
Data Driven UX - Un caso di studio - TIM IS UX? Mobile Tea #Unconference @Cod...
Data Driven UX - Un caso di studio - TIM IS UX? Mobile Tea #Unconference @Cod...Data Driven UX - Un caso di studio - TIM IS UX? Mobile Tea #Unconference @Cod...
Data Driven UX - Un caso di studio - TIM IS UX? Mobile Tea #Unconference @Cod...
 
User testing nello sviluppo di un'architettura dell'informazione: il Card Sor...
User testing nello sviluppo di un'architettura dell'informazione: il Card Sor...User testing nello sviluppo di un'architettura dell'informazione: il Card Sor...
User testing nello sviluppo di un'architettura dell'informazione: il Card Sor...
 
Service Design per prodotti digitali migliori
Service Design per prodotti digitali miglioriService Design per prodotti digitali migliori
Service Design per prodotti digitali migliori
 
Buone pratiche di progettazione per i siti web della PA. Tutto quello che av...
Buone pratiche di progettazione  per i siti web della PA. Tutto quello che av...Buone pratiche di progettazione  per i siti web della PA. Tutto quello che av...
Buone pratiche di progettazione per i siti web della PA. Tutto quello che av...
 
WIAD Genova
WIAD GenovaWIAD Genova
WIAD Genova
 
User Experience
User ExperienceUser Experience
User Experience
 

En vedette

TARANCUEÑA 08
TARANCUEÑA 08TARANCUEÑA 08
TARANCUEÑA 08
fiep
 
Industrialization Powerpoint
Industrialization PowerpointIndustrialization Powerpoint
Industrialization Powerpoint
acrumlish
 
ข้อมูลพรรณไม้
ข้อมูลพรรณไม้ข้อมูลพรรณไม้
ข้อมูลพรรณไม้
pukesasin
 
Presentation Ob Liana
Presentation Ob LianaPresentation Ob Liana
Presentation Ob Liana
qeqey
 
LWB486 Week 4 Copyright
LWB486 Week 4 CopyrightLWB486 Week 4 Copyright
LWB486 Week 4 Copyright
Peter Black
 
CS65 Presentation
CS65 PresentationCS65 Presentation
CS65 Presentation
boyz26
 
Cluetrain Manifesto
Cluetrain ManifestoCluetrain Manifesto
Cluetrain Manifesto
Randee Bato
 
LWB486 Week 5 Copyright
LWB486 Week 5 CopyrightLWB486 Week 5 Copyright
LWB486 Week 5 Copyright
Peter Black
 

En vedette (20)

My Design Process: 7 Steps To A Successful Outcome
My Design Process: 7 Steps To A Successful OutcomeMy Design Process: 7 Steps To A Successful Outcome
My Design Process: 7 Steps To A Successful Outcome
 
Everest 2003 North Face Rescue
Everest 2003 North Face RescueEverest 2003 North Face Rescue
Everest 2003 North Face Rescue
 
Science is like a child looking at a butterfly
Science is like a child looking at a butterflyScience is like a child looking at a butterfly
Science is like a child looking at a butterfly
 
TARANCUEÑA 08
TARANCUEÑA 08TARANCUEÑA 08
TARANCUEÑA 08
 
APIdays 2015 - The State of Web API Languages
APIdays 2015 - The State of Web API LanguagesAPIdays 2015 - The State of Web API Languages
APIdays 2015 - The State of Web API Languages
 
Industrialization Powerpoint
Industrialization PowerpointIndustrialization Powerpoint
Industrialization Powerpoint
 
System analysis to Cellular Respiration
System analysis to Cellular RespirationSystem analysis to Cellular Respiration
System analysis to Cellular Respiration
 
The Future Of Horse Racing
The Future Of Horse RacingThe Future Of Horse Racing
The Future Of Horse Racing
 
ข้อมูลพรรณไม้
ข้อมูลพรรณไม้ข้อมูลพรรณไม้
ข้อมูลพรรณไม้
 
Presentation Ob Liana
Presentation Ob LianaPresentation Ob Liana
Presentation Ob Liana
 
Chardi Kala
Chardi KalaChardi Kala
Chardi Kala
 
Vertsol Theses Powerpoint Slides
Vertsol Theses   Powerpoint SlidesVertsol Theses   Powerpoint Slides
Vertsol Theses Powerpoint Slides
 
LWB486 Week 4 Copyright
LWB486 Week 4 CopyrightLWB486 Week 4 Copyright
LWB486 Week 4 Copyright
 
CS65 Presentation
CS65 PresentationCS65 Presentation
CS65 Presentation
 
Cluetrain Manifesto
Cluetrain ManifestoCluetrain Manifesto
Cluetrain Manifesto
 
LWB486 Week 5 Copyright
LWB486 Week 5 CopyrightLWB486 Week 5 Copyright
LWB486 Week 5 Copyright
 
Thesis 15 - 21
Thesis 15 - 21Thesis 15 - 21
Thesis 15 - 21
 
Seri Sejarah Ekonomi Islam: faktor faktor yang mempengaruhi pemikiran ekonomi...
Seri Sejarah Ekonomi Islam: faktor faktor yang mempengaruhi pemikiran ekonomi...Seri Sejarah Ekonomi Islam: faktor faktor yang mempengaruhi pemikiran ekonomi...
Seri Sejarah Ekonomi Islam: faktor faktor yang mempengaruhi pemikiran ekonomi...
 
1st week middle school life science course intro
1st week middle school life science course intro1st week middle school life science course intro
1st week middle school life science course intro
 
Thesis 5 14
Thesis 5 14Thesis 5 14
Thesis 5 14
 

Similaire à Ux fast - workshop

Similaire à Ux fast - workshop (20)

Ux for nerds
Ux for nerdsUx for nerds
Ux for nerds
 
Etnograph - Overview
Etnograph - OverviewEtnograph - Overview
Etnograph - Overview
 
IoT Design Deck - Il metodo per il Co-Design della UX di prodotti e servizi c...
IoT Design Deck - Il metodo per il Co-Design della UX di prodotti e servizi c...IoT Design Deck - Il metodo per il Co-Design della UX di prodotti e servizi c...
IoT Design Deck - Il metodo per il Co-Design della UX di prodotti e servizi c...
 
pdfPresFeb2014
pdfPresFeb2014pdfPresFeb2014
pdfPresFeb2014
 
Data Driven UX: Come lo facciamo? C. Frinolli & N. Molchanova (Nois3)
Data Driven UX: Come lo facciamo? C. Frinolli & N. Molchanova (Nois3)Data Driven UX: Come lo facciamo? C. Frinolli & N. Molchanova (Nois3)
Data Driven UX: Come lo facciamo? C. Frinolli & N. Molchanova (Nois3)
 
Datadrivenux
DatadrivenuxDatadrivenux
Datadrivenux
 
Portfolio ux ui_gellify
Portfolio ux ui_gellifyPortfolio ux ui_gellify
Portfolio ux ui_gellify
 
User Experience su Mobile con Enrico Maioli.
User Experience su Mobile con Enrico Maioli.User Experience su Mobile con Enrico Maioli.
User Experience su Mobile con Enrico Maioli.
 
Data Driven UX - From Social networks to target audience
Data Driven UX - From Social networks to target audienceData Driven UX - From Social networks to target audience
Data Driven UX - From Social networks to target audience
 
Progetto di Ergonomia Cognitiva: Decathlon +Plus
Progetto di Ergonomia Cognitiva: Decathlon +PlusProgetto di Ergonomia Cognitiva: Decathlon +Plus
Progetto di Ergonomia Cognitiva: Decathlon +Plus
 
Touchpoint - Conoscere, Capire, Progettare
Touchpoint - Conoscere, Capire, ProgettareTouchpoint - Conoscere, Capire, Progettare
Touchpoint - Conoscere, Capire, Progettare
 
Progettazione UX. UX design per non designers
Progettazione UX. UX design per non designersProgettazione UX. UX design per non designers
Progettazione UX. UX design per non designers
 
Experience Matters!
Experience Matters!Experience Matters!
Experience Matters!
 
Layout tesi stampa
Layout tesi stampaLayout tesi stampa
Layout tesi stampa
 
Progettare e gestire la user experience nel processo di sviluppo del software
Progettare e gestire la user experience nel processo di sviluppo del softwareProgettare e gestire la user experience nel processo di sviluppo del software
Progettare e gestire la user experience nel processo di sviluppo del software
 
Quanto conosciamo i nostri utenti | Italian Agile Day 2018
Quanto conosciamo i nostri utenti | Italian Agile Day 2018Quanto conosciamo i nostri utenti | Italian Agile Day 2018
Quanto conosciamo i nostri utenti | Italian Agile Day 2018
 
Ux activities
Ux activitiesUx activities
Ux activities
 
La semiotica a supporto della progettazione: vademecum per UX designers
La semiotica a supporto della progettazione: vademecum per UX designersLa semiotica a supporto della progettazione: vademecum per UX designers
La semiotica a supporto della progettazione: vademecum per UX designers
 
Costabile fiera del levante 13 set 2018
Costabile fiera del levante 13 set 2018Costabile fiera del levante 13 set 2018
Costabile fiera del levante 13 set 2018
 
UX VS UI
UX VS UIUX VS UI
UX VS UI
 

Ux fast - workshop