Follow the UX path @Appsterdam
-
Upload
marco-buonvino -
Category
Documents
-
view
333 -
download
0
description
Transcript of Follow the UX path @Appsterdam
“Follow the UX path”Because we love User eXperience
Ciao!
UX designer & Usability researcher
Laurea in TTC
UX Info-Interaction Designer
Laurea in TTC
Marco Buonvino Luana Donetti
@marcobuonvino @ldonetti
UXthisAndiamo a caccia di problemi di usabilità nelle
cose di tutti i giorni, che pubblichiamo su:
“UXthis!” - http://uxthis.tumblr.com
Immaginiamo...Arriva un lavoro, si inizia a pianificare il
processo di sviluppo.
Generalmente, si viene fuori con...
Un processo di lavoro tipo...
Brief Definizione requisiti di design
Wireframe Visual design Sviluppo
Mantenimento / ottimizzazione Web Analytics
Usability test Implementazione
Waterfall - Quality Control● Reparti coinvolti in sequenza
● Metodo canonico e prevedibile
● Consegna di documenti e specifiche
● Controllo della qualità after-the-fact
Ma in tutto questo...
dov’è l’utente?
Waterfall - Quality Control
Brief Definizione requisiti di design
Wireframe Visual design Sviluppo
Mantenimento / ottimizzazione Web Analytics
Usability test ImplementazioneOnly here?
Waterfall - Quality Control ● L’utente viene coinvolto tardi
● Design basato su assunzioni
● Le possibilità di correzione sono limitate
● Controllo a posteriori
Testare troppo tardi...
Che gran lavoro! Chiama l’utente e vediamo se la
casa gli va bene! Ehm...
E se ci confrontassimo con l’utente un po’ prima?
Waterfall - Quality Assurance
Brief Usability research
Low-fidesign
Med-fidesign
Hi-fi design
Mantenimento / ottimizzazione
Web Analytics / A-B testingImplementazione
Usability design
TEST
TEST
TEST
● Early testing
● Design più sicuro, basato su dati
● Migliore gestione di correzioni e modifiche
● Controllo proattivo
Waterfall - Quality Assurance
Coinvolgere l’utente
fin da subito
...e anche prima.
User Centered Design
Non progettare per te stesso.
User Centered Design
Progetta per l’utente, tenendolo sempre in considerazione
Come coinvolgere l’utente
nel processo di lavoro?
Behavioural Research“Confrontarsi direttamente con l’utente”
● Test di usabilità
● Competitive analysis
● Field study / Etnografia
Test di usabilità● Strumento a supporto della
fase di progettazione
● Permette di raccogliere indicazioni da utenti reali, slegati dal progetto
● Alta qualità di risultati per costi contenuti
● Varie metodologie, adattabili al contesto d’indagine
Behavioural Research
Svolgimento task ● desktop● mobile devices● paper prototypes
Card sorting
Usability test qualitativiBehavioural Research
● Particolare test di usabilità
● Si svolge su un competitor
● Utile per: ○ Assimilare aspetti positivi○ Evitare aspetti negativi
● Ok se non si ha ancora un sito proprio
Competitive AnalysisBehavioural Research
● L’osservatore segue l’utente nella sua vita quotidiana
● Obiettivo: raccogliere informazioni sulle abitudini di interazione
● È possibile capire i punti in cui gli utenti possono aver bisogno di un’innovazione
● Molto costoso
Field study / EtnografiaBehavioural Research
Behavioural Design“Progettare tenendo al centro l’utente”
● Personas
● Scenari d’uso
● Sketch
● User Journeys
Personas● Rappresentazioni di utenti tipo
● Necessità, obiettivi, caratteristiche e abitudini d’uso
● Interviste con utenti reali oppure basati su web analytics e test di usabilità
Behavioural Design
Scenari d’usoDocumenti che illustrano un’interazione verosimile da parte di un utente tipo
Scopo: ● verificare come l’interfaccia
potrebbe risolvere gli obiettivi dell’utente
● individuare problemi di usabilità
● individuare altre funzionalità di cui l’utente potrebbe aver bisogno
Behavioural Design
Sketch● Raccontano l’interazione di
un utente con la UI
● Scopo: condividere con il team quale possa essere l’interazione e i passaggi su cui focalizzare il design
● Molto utile per iniziare a raccontare l’idea ai membri del team
Behavioural Design
User Journeys● Diagrammi che illustrano
tutti i passaggi di interazione dell’utente con l’interfaccia
● Vengono considerati anche i momenti preliminari e conseguenti rispetto all’interazione
● Scopo: identificare i punti di attrito, per capire dove concentrare il design
Behavioural Design
UI Design“Disegnare l’interfaccia un passo alla volta”
● Low-fi design
● Medium-fi design
● Hi-fi design
Low-Fi design
● Design preliminare, ancora in fase esplorativa
● Schizzi su carta o programmi di wireframing rapido(es. Balsamiq Mockups)
UI Design
Med-Fi design
● Design intermedio
● Programmi di wireframing elettronico(es. Balsamiq Mockups, Axure, OmniGraffle)
UI Design
Hi-Fi design
● Design avanzato
● Programmi di wireframing elettronico(es. Axure, HotGloo)
● HTML + CSS
UI Design
Questo era il path ideale.
Ma non è sempre così.
Tempistiche cliente poco gestibili
=
impossibilità o difficoltà a seguire uno o più nodi del path
Tempistiche interne poco realistiche
=
stime UX unfriendly e quasi imposte
perdita di qualità
Disallineamento tra risorse
=
rework e correzioni ripetute con perdita di efficacia, tempo e focus sulla qualità.
E i costi aumentano.
Progettazione non user centered
=
mancanza test utente
“dominio delle opinioni”
Sottovalutazione usability e UX
=
wireframes su decisioni già prese lato creativo
“dominio delle opinioni”
Story
C’era una volta un brief per un gioco
tematico, destinato a un target di bambini
piccoli (fascia 6-8) e con vincoli grafici
intrinsecamente impattanti sull’usabilità.
Parola d’ordine: semplicità.
Story - i problemi
● Tempistiche ristrette e
● cambiamenti in corso d’opera
hanno portato a
● disaccordi su funzionalità e su peso dei vari
elementi del gioco
Story - i problemi
Risultato:
● perdita focus sull’utente
● perdita di alcune fette di semplicità
● dominio del pensiero soggettivo: il gioco era “così semplice da essere ovvio”
Story - l’ultima speranza
Brief Usability research
Low-fidesign
Med-fidesign
Hi-fi design
Mantenimento / ottimizzazione
Web Analytics / A-B testingImplementazione
Usability design
TEST
TEST
TEST
Fine tuning: test utente con hi-fi prototypes
Story - il (quasi) lieto fine
● i test hanno suscitato interesse e aumentato l’awareness di tutte le figure coinvolte
● hanno validato le scelte prese
e, in alcuni casi
● hanno portato alla modifica di elementi poco usabili.
Qualche trucco per un
processo più UX friendly?
Discount UsabilityQuando il test costa troppo, apriamo gli sconti!
● Valutazione euristica
● Analisi con linee guida
Valutazione euristica● Discount usability method
● È un’analisi condotta da esperti
● Per aumentare l’oggettività dei risultati, l’analisi viene condotta in modo parallelo fra più valutatori (circa 3)
● Viene seguito il percorso di un task rappresentativo, poi un’analisi completa
Analisi con linee guida● Discount usability method
● È un’analisi condotta attraverso l’utilizzo di linee guida condivise o create ad hoc
● Metodo rapido, ma talvolta poco flessibile
Takeaway - five lessons#1Coinvolgere l’utente prima possibile
#2Testare il lavoro quanto prima, con l’utente reale(non serve per forza un laboratorio, basta anche qualcosa più informale)
#3Usare degli strumenti semplici per non perdere mai di vista gli obiettivi degli utenti
#4I test servono a tutte le figure coinvolte, perché aumentano la coscienza sui problemi di usabilità tramite prova diretta.
#5Avere uno UX che minimizzi i problemi di usabilità è un bene. Fare i test è prezioso.
Takeaway - five lessons
Ogni volta che predomina l’
opinionanza e non l’
usabilità, un utente
agonizza, mentre uno UX
muore in preda a spasmi ”
“
Esistono anche altri metodi
● AgileAgile SCRUM workshop, 21 settembre --ci vediamo làhttp://milan.impacthub.net/files/2013/09/Agile_Workshop.pdf
● Lean UXebook by: Jeff Gothelf, Josh Seidenhttp://www.leanuxbook.com
Strumenti utili● Axure - http://www.axure.com ● Balsamiq - http://balsamiq.com ● OmniGraffle - http://www.omnigroup.com/ ● Morae - http://www.techsmith.com/morae.html ● Silverback - http://silverbackapp.com ● Skype - http://www.skype.com/it/
Ma a volte bastano anche:● Carta e penna● Una lavagna e dei pennarelli
What to read● Steve Krug
○ “Don’t Make Me Think”○ “Rocket Surgery Made Easy”
● Susan Weinshenk○ “100 things every designer should know about people”
● Nielsen & Loranger○ “Web Usability 2.0”
● Donald Norman○ “La caffettiera del masochista”○ “Emotional Design”○ “Gestire la complessità”
● A Book Apart - http://www.abookapart.com ● Nielsen Alertbox - http://www.nngroup.com/articles/
Your turn!
Avete già idee per coinvolgere da subito l’utente nel processo di lavoro?
Questions?
Se avete dubbi, contattateci!@ldonetti
@marcobuonvino
Grazie per l’attenzione