UX design: una breve panoramica su ruoli e strumenti

UX / Interaction designer

Marco Buonvino@marcobuonvino

Ex studente di TTC

Interaction designer /Usability researcher

THE STORY SO FAR...

UX / Interaction designer

Che cos’è la UX?

User eXperience

CHE COS’È LA UX?

Contesto e ambiente

Utilizzo dell’interfaccia

Formazione della necessità

Momenti successivi

L’utente

CHE COS’È LA UX?

Interaction Design

CHE COS’È LA UX?

Interaction Design

StrategiaRicerca

CHE COS’È LA UX?

Architettura

��

Ciò che una persona prova quando si relaziona con un prodotto, un sistema, un servizio, un brand.

Comprende tutto ciò che si avviene prima (l’aspettativa), durante (l’esperienza) e dopo (il ricordo) l’interazione,

all’interno del contesto di svolgimento.

CHE COS’È LA UX?

User eXperience

http://www.youtube.com/watch?v=Ovj4hFxko7c

What the #$%@ is UX Design?

CHE COS’È LA UX?

Le figure professionali

UX designerProgetta l’esperienza d’uso di un processo o di un obiettivo

Cerca di capire: • chi è l’utente, le sue caratteristiche e le sue necessità• come sfruttare il contesto d’interazione

Lavora con: • strumenti di behavioural design, come Personas, Scenari

d’uso e User Journeys

LE FIGURE PROFESSIONALI

Interaction designer

Lavora per realizzare una User Interface: • che risponda alle necessità dell’utente• che sia usabile e accessibile

Lavora con: • Sketch, Wireframe, Flussi di interazione e Prototipi

LE FIGURE PROFESSIONALI

Si occupa di progettare l’interazione uomo-interfaccia

Cerca di rendere i contenuti: • facilmente individuabili e raggiungibili• ordinati logicamente in strutture adatta ai requisiti

Adora lavorare con: • Schemi e diagrammi di architettura informativa

Information Architect

LE FIGURE PROFESSIONALI

Si occupa della gestione e dell’organizzazione dei contenuti

Usability ResearcherIndividua i problemi di usabilità e ne identifica le motivazioni

LE FIGURE PROFESSIONALI

Nel suo lavoro: • collabora strettamente con il designer• chiede la partecipazione di utenti finali• va d’accordo con esperti di web analytics

I suoi strumenti: • Test di usabilità, Valutazione euristica, Linee guida

http://www.onwardsearch.com/UX-Career-Guide/

A guide to UX careers

LE FIGURE PROFESSIONALI

Capitolo UNO

Prima di fare design bisogna conoscere l’utente

• Bisogni e necessità

• Contesto e abitudini d’uso

• Comportamento durante l’interazione

• Atteggiamento e predisposizione

CAPIRE L’UTENTE

Cosa bisogna capire?

• Test di usabilità

• Competitive analysis

• Field Study / Etnografia

• Web Analytics

• A-B test / Multivariate test

Qualitativi

Quantitativi

CAPIRE L’UTENTE

Alcuni strumenti

Il test di usabilità

Strumento a supporto della fase di progettazione di un sito web

Permette di raccogliere indicazioni da utenti reali, slegati dal progetto

Alta qualità di risultati per costi contenuti

Varie metodologie, adattabili al contesto d’indagine

CAPIRE L’UTENTE - Il test di usabilità

Utenteutilizza l’interfaccia, svolge i task assegnati

Facilitatoreillustra i task, assiste l’utente, sprona il metodo thinking aloud

Osservatoriraccolgono indicazioni sui comportamenti e sui percorsi di interazione dell’utente

CAPIRE L’UTENTE - Il test di usabilità

I ruoli

Usability test qualitativi

• Svolgimento task attraverso:

- desktop

CAPIRE L’UTENTE - Il test di usabilità

Tipologie

Usability test qualitativi

• Svolgimento task attraverso:

- desktop

- mobile devices

CAPIRE L’UTENTE - Il test di usabilità

Tipologie

Usability test qualitativi

• Svolgimento task attraverso:

- desktop

- mobile devices

- paper prototypes

CAPIRE L’UTENTE - Il test di usabilità

Tipologie

Usability test qualitativi

• Svolgimento task attraverso:

• Card sorting

- desktop

- mobile devices

- paper prototypes

CAPIRE L’UTENTE - Il test di usabilità

Tipologie

Usability test qualitativi

• Svolgimento task attraverso:

Usability test quantitativi

• Eye Tracking

• Card sorting

- desktop

- mobile devices

- paper prototypes

CAPIRE L’UTENTE - Il test di usabilità

Tipologie

Card sorting

x ~15

‣ Nielsen, Why You Only Need to Test with 5 Users, Alertbox, 2000

‣ Nielsen, Card Sorting: How Many Users to Test, Alertbox, 2004‣ Nielsen, How Many Test Users in a Usability Study?, Alertbox, 2014‣ Steve Krug, Rocket Surgery Made Easy, New Riders, 2010

‣ Tullis and Wood, How Many Users Are Enough for a Card-Sorting Study?, 2004

Qualitative desktop

Qualitative tablet /smartphone

Paper prototyping

x ~5

Eyetracking

x ~30

CAPIRE L’UTENTE - Il test di usabilità

Quanti utenti?

Il prima possibile!Si può fare un test fin dai primi momenti di vita di un progetto

CAPIRE L’UTENTE - Il test di usabilità

Quando fare un test?

• Indicazione dei problemi di usabilità riscontrati

• Suddivisione per gravità e priorità di intervento

• Raccomandazioni per la fase di UI design

CAPIRE L’UTENTE - Il test di usabilità

Risultati

• con metodo Aperto

• con metodo Chiuso

WIAD 2013“User testing nello sviluppo di un'architettura dell'informazione: il Card Sorting”http://www.slideshare.net/bastianlion/user-testing-nello-sviluppo-di-unarchitettura-dellinformazione-il-card-sorting

CAPIRE L’UTENTE - Il test di usabilità

Card Sorting

Altri metodi

• Particolare tipo di test di usabilità

• Si effettua un test su un competitor

• Findings positivi (best practices) e negativi (problemi da evitare!)

• Ok, se non si ha ancora un sito proprio

CAPIRE L’UTENTE - Altri strumenti

Competitive analysis

• L’osservatore segue l’utente nella sua vita quotidiana, senza interferire

• Obiettivo: raccogliere il maggior numero di informazioni sulle abitudini di interazione

• È possibile capire i punti in cui gli utenti possono aver bisogno di un’innovazione

• Molto costoso

CAPIRE L’UTENTE - Altri strumenti

Field study / Etnografia

• Le web analytics sono una raccolta quantitativa di tutti i dati di navigazione

• Sono relativi all’intero bacino di utenza

• Più è ampio il traffico, più è possibile generalizzare dei comportamenti

• Si vanno ad analizzare bounce rate, abbandoni o percorsi specifici

CAPIRE L’UTENTE - Altri strumenti

Web Analytics

• Presentazione di varianti di progettazione all’intero pubblico, in modo diretto e bilanciato

• A-B = 1 sola variabile

• Multivariate = più variabili contemporanee

• Devi comunque progettare tutte le variabili

CAPIRE L’UTENTE - Altri strumenti

A-B / Multivariate test

Capitolo DUE

Fare design, considerando l’utente

• Personas

• Sketch

• Scenari d’uso

• User journeys

DESIGN PER L’UTENTE

Gli strumenti principali

• Rappresentazioni di utenti tipo

• Necessità, obiettivi, caratteristiche e abitudini d’uso della tecnologia

• Derivati da serie di interviste con utenti reali

• Proto-personas: basati su web analytics e test di usabilità

DESIGN PER L’UTENTE

Personas

http://www.flickr.com/photos/jasontravis/sets/72157603258446753/

Set di:Jason Travis

(Flickr)

DESIGN PER L’UTENTE

Personas

DESIGN PER L’UTENTE

• Illustrazioni o schemi

• Raccontano la sequenza di interazione di un utente con la UI

• Scopo: verificare e 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 agli sviluppatori

DESIGN PER L’UTENTE

Sketch

• Documenti o schemi che illustrano un’interazione verosimile da parte di un utente tipo con l’interfaccia

• Considerazione del contesto e dell’ambiente

• Scopo:

• verificare come l’interfaccia potrebbe risolvere il task dell’utente,

• individuare problemi di usabilità

• individuare altre funzionalità di cui l’utente potrebbe aver bisogno

DESIGN PER L’UTENTE

Scenari d’uso

• Diagrammi che illustrano tutti i passaggi di interazione dell’utente con l’interfaccia

• Vengono considerati anche i momenti preliminari e conseguenti rispetto all’interazione (anche un eventuale ritorno)

• Scopo: identificare i punti di attrito, per capire dove concentrare il design

DESIGN PER L’UTENTE

User Journeys

Capitolo TRE

Le fasi del design

LE FASI DEL DESIGN

42

Il processo di progettazione

Low-Fi Design

Med-Fi Design

Hi-Fi Design

TEST

TEST

TEST

Sviluppo Manutenzione / Ottimizzazione

Analytics

Brief Behavioural Research

A-B test / multivariate

Behavioural Design

LOW-FI MEDIUM-FI HI-FI

Iterazioni preliminari Iterazioni intermedie Iterazioni avanzate

Sketch su carta (Carta, Balsamiq…)

Wireframe interattivi(Balsamiq, Axure…)

Visual design(HTML + CSS, Axure, mockup)

LE FASI DEL DESIGN

UI Design

• Design preliminare, ancora in fase esplorativa

• Schizzi su carta o programmi di wireframing rapido (es. Balsamiq Mockups)

LE FASI DEL DESIGN

Low - Fi Design

• Design intermedio

• Programmi di wireframing(es. Balsamiq Mockups, Axure)

LE FASI DEL DESIGN

Med - Fi Design

• Design avanzato

• Programmi di wireframing(es. Axure)

• HTML + CSS

LE FASI DEL DESIGN

Hi - Fi Design

Low-Fi Design

Medium-Fi Design

Hi-Fi Design

TEST

TEST

TEST

Paper prototypingIterazioni 1-3 utenti

Test qualitativoIterazioni 3-6 utenti

Test qualitativoIterazioni 3-6 utenti

LE FASI DEL DESIGN

Design iterativo

Costa troppo?

• Discount usability method

• È un’analisi condotta da esperti

• Per ridurre il bias, l’analisi viene condotta in modo parallelo fra più valutatori (circa 3)

• Viene seguito il percorso di un task rappresentativo, poi un’analisi completa

LE FASI DEL DESIGN - Discount methods

Analisi euristica di usabilità

• Discount usability method

• È un’analisi condotta attraverso l’utilizzo di linee guida condivise o create ad hoc

• Metodo rapido, ma talvolta poco flessibile

LE FASI DEL DESIGN - Discount methods

Analisi tramite linee guida

• http://userium.com

LE FASI DEL DESIGN - Discount methods

Analisi tramite linee guida

WORKSHOP

• Lavoro di gruppo (3 persone is ok!)

• Circa 30 minuti

• Deliverable:

Wireframe Low-Fi

• Strumenti consigliati: Carta, Balsamiq

WORKSHOP

UI design

Il Cliente vuole creare un servizio per prenotare sale prova per musicisti. Non è presente alcun sito web o app.

Obiettivi del Cliente:

• permettere ai musicisti di prenotare la sala prove

• consentire agli utenti di inserire recensioni o commenti

• dare ai gestori la possibilità di aggiungere la loro sala prove

• target di riferimento: musicisti sia novizi che esperti

WORKSHOP

Brief

• Wireframe Low-Fi della pagina principale

• (EPIC-level) Anche il wireframe Low-Fi di una pagina di dettaglio di una saletta e del sistema di prenotazione

Provate a farlo per tablet!

CHALLENGE ACCEPTED?

WORKSHOP

Consegne

• Un file di esempio per iPad

• iPad screen resolution: 1024x768

• Misure touch-friendly per le aree attive:

- 44x44 px - indice (misure Apple)

- 56x56 px - indice (misure da altre fonti)

- 72x72 px - pollice

http://bit.ly/12NZHYK

WORKSHOP

Utility

Concludendo

Balsamiqwww.balsamiq.com

Axurewww.axure.com

Adobe Fireworkshttp://www.adobe.com/it/products/fireworks.html

CONCLUDENDO

Strumenti utili

Steve Krug, “Don’t Make Me Think”“Rocket Surgery Made Easy”

Nielsen & Loranger“Web Usability 2.0”

Donald Norman, “La caffettiera del masochista”“Emotional Design”“Gestire la complessità”

Tutti i libri di A-Book-Apart

Nielsen Alertboxhttp://www.nngroup.com/articles/

CONCLUDENDO

Letture consigliate

Milan UX Book Clubhttp://milanuxbookclub.wordpress.com

Appsterdamhttp://www.meetup.com/AppsterdamMilan/

Architectahttp://www.architecta.it

AIAPhttp://www.aiap.it

CONCLUDENDO

Cosa seguire / partecipare!

Grazie.

QA Session

?@marcobuonvino