Attività UXWHITE LABEL
Giuseppe Burdo
UX, IxD
giuseppe.burdo@gmail.com
UX Intro
UX è l’acronimo di “User experience” ed
è un’insieme di attività il cui obiettivo è di
progettare soluzioni efficaci, tenendo a
mente i bisogni degli utenti, del business
e delle possibilità tecnologiche.
Dove si vede la UX
La user experience riguarda l’interazione
con qualsiasi “touchpoint”, ovvero ogni
momento di contatto con il servizio
offerto da un brand (dispositivo digitale,
un prodotto fisico, un interlocutore, uno
spazio fisico, etc.).
Perché è importante
Il rischio maggiore è di realizzare
qualcosa che non dia le aspettative
previste, sebbene dopo aver investito
molto tempo e risorse.
Design thinking
Indipendentemente dal prodotto finale,
ci sono due fasi: capire il giusto
problema e utilizzare la giusta soluzione.
Questo approccio si chiama “Design
thinking” ed è una forma mentis
utilizzata anche nel business.
Creare delle scelte
Fare delle scelte
A. Ricerca
B. Progetto
A B
Soluzione
Che si tratti di un’app o un sito web, di
un negozio interattivo o realtà virtuale,
la differenza principale sta nella fase di
progettazione, dove la tecnologia ha un
ruolo di differenziazione.
Collaborazione
La progettazione richiede momenti di
incontro, a volte molto collaborativi
come “workshops” e “design sprints”
soprattutto se si è nella fase iniziale di
un prodotto.
https://designsprintkit.withgoogle.com/
Fasi di lavoro UX
1. Pianificazione e scoperta
Pianificazione UX
Intervista stakeholders
Workshop
Brief di progetto
2. Analisi e ricerca
Info mancanti
Ricerca con utenti
Utenti tipo e contesti
Analisi competitiva UX
Best practices
Patterns di contenuto
3. Design
Debrief
Principi di design
Wireframe lo-fi
Scelta dei wireframe lo-fi
Flussi
Wireframes
Microinterazioni
Patterns UX
4. Validazione
Prototipi
Valutazione
Test di usabilità
Allineamento periodico
1. Pianificazione e scoperta
Pianificazione UX
Intervista stakeholders
Workshop
Brief di progetto
Pianificazione UX
Comprendere le attività da fare a
seconda del progetto, contesto,
obiettivi, budget, etc.
https://trello.com/c/astaySkK/2-ux-project-plan
Intervista stakeholders
Conoscere le priorità del team di lavoro,
fornitori, partner, investitori, chi decide
http://boxesandarrows.com/a-stakeholder-interview-checklist/
Workshop
Allineamento su come funziona al
momento, cosa non funziona e quale
sarebbe lo stato ideale da raggiungere
http://rosenfeldmedia.com/ux-team-of-one/ix-method-of-the-week-opportunity-workshop/
http://rosenfeldmedia.com/ux-team-of-one/ux-method-of-the-week-strategy-workshop/
Brief di progetto
Identificare le aspettative del progetto e
le modalità di lavoro, i tempi, i ruoli
https://www.nomensa.com/blog/2016/how-write-great-ux-brief
2. Analisi e ricerca
Info mancanti
Ricerca con utenti
Utenti tipo e contesti
Analisi competitiva UX
Best practices
Patterns di contenuto
Info mancanti
Definizione degli aspetti ancora non
conosciuti e piano per ottenere le
informazioni utili.
http://rosenfeldmedia.com/ux-team-of-one/ux-method-of-the-week-learning-plan
Ricerca con utenti
Sondare con gli utenti in maniera diretta
(intervista sul luogo, in laboratorio, in
remoto) o indiretta tramite i dati.
https://www.usability.gov/what-and-why/user-research.html
Utenti tipo e contesti
Raggruppare le persone con motivazioni
e bisogni simili e conoscere i contesti e
le situazioni in cui si può predirre il
comportamento utente
https://blog.intercom.com/using-job-stories-design-features-ui-ux
Analisi competitiva UX
Comparare il proprio servizio, o quello di
riferimento con altri competitors tramite
una mappatura visiva e metriche.
Questa attività può essere supportata da
social listening, sul proprio servizio o di
competitors.
https://medium.com/@tomwray13/5-whats-a-heuristic-markup-1db09422de22
Best practices
Identificare i trend e le soluzioni nello
stesso mercato di riferimento o in altri
che possono tornare utili.
http://www.goodui.org https://www.ventureharbour.com/form-design-best-practices
Patterns di contenuto
Mappare la struttura editoriale del
servizio già offerto.
http://v3.danielmall.com/articles/content-display-patterns/
3. Design
Debrief
Principi di design
Wireframe lo-fi
Scelta dei wireframe lo-fi
Flussi
Wireframes
Microinterazioni
Patterns UX
Debrief
Rivedere il brief di progetto e fornire
delle indicazioni chiare sugli interventi
da fare, come utenti di riferimento,
funzionalità e personalità, attività
possibili per l’utente.
https://blinkux.com/blog/debrief-2/
Principi di design
Capisaldi per la user experience, di
riferimento al team e di percezione per
stakeholders e utenti finali
https://www.gov.uk/design-principles
Wireframe lo-fi
Scheletro di base su come
rappresentare i contenuti e funzionalità.
Il vantaggio è di poter creare
velocemente diverse versioni e di
cambiarle in corso.
https://www.smashingmagazine.com/2014/10/the-skeptics-guide-to-low-fidelity-prototyping
Scelta dei wireframe lo-fi
Identificazione dei patterns UX che
meglio rispondono agli obiettivi.
Flussi
Collegare tutte le schermate così da
avere un quadro chiaro dei “journeys”
dell’utente, dove entra e dove atterra per
ogni collegamento.
https://medium.com/inspiration-supply/wireframes-by-top-ux-designers-d6922d34ddb8
Wireframes
Rappresentazioni visive comprensibili
da chiunque e che servono come base
per il resto del team (grafici,
sviluppatori) e di comunicazione
indiretta per documentazione o con
stakeholders e cliente.
https://medium.com/inspiration-supply/wireframes-by-top-ux-designers-d6922d34ddb8
Microinterazioni
Assicurarsi di ricevere un feedback da
un’azione, di trarne piacere e di
riconoscere il brand.
http://zurb.com/article/1454/you-re-thinking-too-big-create-impact-wit
Pattern UX
Linee guida su come progettare e quindi
perseguire i bisogni del business e degli
utenti tramite l’interfaccia. Non sono da
confondere con i pattern UI che si
esprimono con la rappresentazione
visiva e di brand.
https://www.gov.uk/service-manual/design#find-patterns
4. Validazione
Prototipi
Valutazione
Test di usabilità “quick and dirty”
Allineamento periodico
Prototipi
Si utilizzano software o applicazioni
web “point and click” come Invision per
collegare le schermate tra di loro e
lasciarle provare all’utente per verificare
che abbiano senso.
https://www.uxpin.com/studio/blog/what-is-a-prototype-a-guide-to-functional-ux
Valutazione
Review delle parti che potrebbero
essere migliorate. A seconda della
complessità si adottano diverse
tecniche.
Test di usabilità
Pianificare, condurre e analizzare
l’interazione dell’utente con un
prototipo. Si fa a livello esplorativo
(avere un’idea generica se il prodotto ha
senso per l’utente) e su precise attività
(verificare che l’applicazione sia in linea
con gli standard di usabilità).
https://www.usability.gov/how-to-and-tools/methods/planning-usability-testing.html
Allineamento periodico
Un prodotto digitale continua a evolversi
quando viene lanciato, per cui è ottimale
la possibilità di monitorare in maniera
periodica l’andamento, ad esempio
tramite A/B test.
https://blog.bonzaiengineering.com/3-steps-to-a-great-ux-health-check-ccca9e7f358d
THANK YOU
Giuseppe Burdo
UX, IxD
giuseppe.burdo@gmail.com

Ux activities

  • 1.
    Attività UXWHITE LABEL GiuseppeBurdo UX, IxD giuseppe.burdo@gmail.com
  • 2.
    UX Intro UX èl’acronimo di “User experience” ed è un’insieme di attività il cui obiettivo è di progettare soluzioni efficaci, tenendo a mente i bisogni degli utenti, del business e delle possibilità tecnologiche.
  • 3.
    Dove si vedela UX La user experience riguarda l’interazione con qualsiasi “touchpoint”, ovvero ogni momento di contatto con il servizio offerto da un brand (dispositivo digitale, un prodotto fisico, un interlocutore, uno spazio fisico, etc.).
  • 4.
    Perché è importante Ilrischio maggiore è di realizzare qualcosa che non dia le aspettative previste, sebbene dopo aver investito molto tempo e risorse.
  • 5.
    Design thinking Indipendentemente dalprodotto finale, ci sono due fasi: capire il giusto problema e utilizzare la giusta soluzione. Questo approccio si chiama “Design thinking” ed è una forma mentis utilizzata anche nel business. Creare delle scelte Fare delle scelte A. Ricerca B. Progetto A B
  • 6.
    Soluzione Che si trattidi un’app o un sito web, di un negozio interattivo o realtà virtuale, la differenza principale sta nella fase di progettazione, dove la tecnologia ha un ruolo di differenziazione.
  • 7.
    Collaborazione La progettazione richiedemomenti di incontro, a volte molto collaborativi come “workshops” e “design sprints” soprattutto se si è nella fase iniziale di un prodotto. https://designsprintkit.withgoogle.com/
  • 8.
    Fasi di lavoroUX 1. Pianificazione e scoperta Pianificazione UX Intervista stakeholders Workshop Brief di progetto 2. Analisi e ricerca Info mancanti Ricerca con utenti Utenti tipo e contesti Analisi competitiva UX Best practices Patterns di contenuto 3. Design Debrief Principi di design Wireframe lo-fi Scelta dei wireframe lo-fi Flussi Wireframes Microinterazioni Patterns UX 4. Validazione Prototipi Valutazione Test di usabilità Allineamento periodico
  • 9.
    1. Pianificazione escoperta Pianificazione UX Intervista stakeholders Workshop Brief di progetto
  • 10.
    Pianificazione UX Comprendere leattività da fare a seconda del progetto, contesto, obiettivi, budget, etc. https://trello.com/c/astaySkK/2-ux-project-plan
  • 11.
    Intervista stakeholders Conoscere lepriorità del team di lavoro, fornitori, partner, investitori, chi decide http://boxesandarrows.com/a-stakeholder-interview-checklist/
  • 12.
    Workshop Allineamento su comefunziona al momento, cosa non funziona e quale sarebbe lo stato ideale da raggiungere http://rosenfeldmedia.com/ux-team-of-one/ix-method-of-the-week-opportunity-workshop/ http://rosenfeldmedia.com/ux-team-of-one/ux-method-of-the-week-strategy-workshop/
  • 13.
    Brief di progetto Identificarele aspettative del progetto e le modalità di lavoro, i tempi, i ruoli https://www.nomensa.com/blog/2016/how-write-great-ux-brief
  • 14.
    2. Analisi ericerca Info mancanti Ricerca con utenti Utenti tipo e contesti Analisi competitiva UX Best practices Patterns di contenuto
  • 15.
    Info mancanti Definizione degliaspetti ancora non conosciuti e piano per ottenere le informazioni utili. http://rosenfeldmedia.com/ux-team-of-one/ux-method-of-the-week-learning-plan
  • 16.
    Ricerca con utenti Sondarecon gli utenti in maniera diretta (intervista sul luogo, in laboratorio, in remoto) o indiretta tramite i dati. https://www.usability.gov/what-and-why/user-research.html
  • 17.
    Utenti tipo econtesti Raggruppare le persone con motivazioni e bisogni simili e conoscere i contesti e le situazioni in cui si può predirre il comportamento utente https://blog.intercom.com/using-job-stories-design-features-ui-ux
  • 18.
    Analisi competitiva UX Comparareil proprio servizio, o quello di riferimento con altri competitors tramite una mappatura visiva e metriche. Questa attività può essere supportata da social listening, sul proprio servizio o di competitors. https://medium.com/@tomwray13/5-whats-a-heuristic-markup-1db09422de22
  • 19.
    Best practices Identificare itrend e le soluzioni nello stesso mercato di riferimento o in altri che possono tornare utili. http://www.goodui.org https://www.ventureharbour.com/form-design-best-practices
  • 20.
    Patterns di contenuto Mapparela struttura editoriale del servizio già offerto. http://v3.danielmall.com/articles/content-display-patterns/
  • 21.
    3. Design Debrief Principi didesign Wireframe lo-fi Scelta dei wireframe lo-fi Flussi Wireframes Microinterazioni Patterns UX
  • 22.
    Debrief Rivedere il briefdi progetto e fornire delle indicazioni chiare sugli interventi da fare, come utenti di riferimento, funzionalità e personalità, attività possibili per l’utente. https://blinkux.com/blog/debrief-2/
  • 23.
    Principi di design Capisaldiper la user experience, di riferimento al team e di percezione per stakeholders e utenti finali https://www.gov.uk/design-principles
  • 24.
    Wireframe lo-fi Scheletro dibase su come rappresentare i contenuti e funzionalità. Il vantaggio è di poter creare velocemente diverse versioni e di cambiarle in corso. https://www.smashingmagazine.com/2014/10/the-skeptics-guide-to-low-fidelity-prototyping
  • 25.
    Scelta dei wireframelo-fi Identificazione dei patterns UX che meglio rispondono agli obiettivi.
  • 26.
    Flussi Collegare tutte leschermate così da avere un quadro chiaro dei “journeys” dell’utente, dove entra e dove atterra per ogni collegamento. https://medium.com/inspiration-supply/wireframes-by-top-ux-designers-d6922d34ddb8
  • 27.
    Wireframes Rappresentazioni visive comprensibili dachiunque e che servono come base per il resto del team (grafici, sviluppatori) e di comunicazione indiretta per documentazione o con stakeholders e cliente. https://medium.com/inspiration-supply/wireframes-by-top-ux-designers-d6922d34ddb8
  • 28.
    Microinterazioni Assicurarsi di ricevereun feedback da un’azione, di trarne piacere e di riconoscere il brand. http://zurb.com/article/1454/you-re-thinking-too-big-create-impact-wit
  • 29.
    Pattern UX Linee guidasu come progettare e quindi perseguire i bisogni del business e degli utenti tramite l’interfaccia. Non sono da confondere con i pattern UI che si esprimono con la rappresentazione visiva e di brand. https://www.gov.uk/service-manual/design#find-patterns
  • 30.
    4. Validazione Prototipi Valutazione Test diusabilità “quick and dirty” Allineamento periodico
  • 31.
    Prototipi Si utilizzano softwareo applicazioni web “point and click” come Invision per collegare le schermate tra di loro e lasciarle provare all’utente per verificare che abbiano senso. https://www.uxpin.com/studio/blog/what-is-a-prototype-a-guide-to-functional-ux
  • 32.
    Valutazione Review delle partiche potrebbero essere migliorate. A seconda della complessità si adottano diverse tecniche.
  • 33.
    Test di usabilità Pianificare,condurre e analizzare l’interazione dell’utente con un prototipo. Si fa a livello esplorativo (avere un’idea generica se il prodotto ha senso per l’utente) e su precise attività (verificare che l’applicazione sia in linea con gli standard di usabilità). https://www.usability.gov/how-to-and-tools/methods/planning-usability-testing.html
  • 34.
    Allineamento periodico Un prodottodigitale continua a evolversi quando viene lanciato, per cui è ottimale la possibilità di monitorare in maniera periodica l’andamento, ad esempio tramite A/B test. https://blog.bonzaiengineering.com/3-steps-to-a-great-ux-health-check-ccca9e7f358d
  • 35.
    THANK YOU Giuseppe Burdo UX,IxD giuseppe.burdo@gmail.com