Follow the UX path @Appsterdam
Upcoming SlideShare
Loading in...5
×
 

Follow the UX path @Appsterdam

on

  • 470 views

Qual è il processo ideale di design, almeno agli occhi due UX designer? Come si può andare incontro a una progettazione più User Centered? ...

Qual è il processo ideale di design, almeno agli occhi due UX designer? Come si può andare incontro a una progettazione più User Centered?

5 Takeaways derivanti dall'esperienza di Luana Donetti (@ldonetti) e Marco Buonvino (@marcobuonvino) all'interno di web agency e agenzie di comunicazione.

Statistics

Views

Total Views
470
Views on SlideShare
468
Embed Views
2

Actions

Likes
7
Downloads
15
Comments
0

2 Embeds 2

http://miaricerca.wikispaces.com 1
http://www.lbollini.it 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Follow the UX path @Appsterdam Follow the UX path @Appsterdam Presentation Transcript

  • “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
  • UXthis Andiamo 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-fi design Med-fi design Hi-fi design Mantenimento / ottimizzazione Web Analytics / A-B testing Implementazione Usability design T E S T T E S T T E S T
  • ● 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 qualitativi Behavioural 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 Analysis Behavioural 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 / Etnografia Behavioural 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’uso Documenti 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-fi design Med-fi design Hi-fi design Mantenimento / ottimizzazione Web Analytics / A-B testing Implementazione Usability design T E S T T E S T T E S T 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 Usability Quando 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 #1 Coinvolgere l’utente prima possibile #2 Testare il lavoro quanto prima, con l’utente reale (non serve per forza un laboratorio, basta anche qualcosa più informale) #3 Usare degli strumenti semplici per non perdere mai di vista gli obiettivi degli utenti
  • #4 I test servono a tutte le figure coinvolte, perché aumentano la coscienza sui problemi di usabilità tramite prova diretta. #5 Avere 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 ● Agile Agile SCRUM workshop, 21 settembre --ci vediamo là http://milan.impacthub.net/files/2013/09/Agile_Workshop.pdf ● Lean UX ebook by: Jeff Gothelf, Josh Seiden http://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