Lezione Comunicazione Visiva e Design delle Interfacce - Unimib - 2014 edition

UX design: una breve panoramica su ruoli e strumenti

UX / Interaction designer

Marco Buonvino@marcobuonvino

https://twitter.com/MarcoBuonvino

https://twitter.com/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


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


Si occupa della gestione e dell’organizzazione dei contenuti

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


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






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


I ruoli

Usability test qualitativi

• Svolgimento task attraverso:

- desktop


Tipologie



- desktop

- mobile devices


Tipologie



- desktop

- mobile devices

- paper prototypes


Tipologie



• Card sorting

- desktop

- mobile devices

- paper prototypes


Tipologie



Usability test quantitativi

• Eye Tracking

• Card sorting

- desktop

- mobile devices

- paper prototypes


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


Quanti utenti?

http://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/

http://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/

http://www.nngroup.com/articles/card-sorting-how-many-users-to-test/

http://www.nngroup.com/articles/card-sorting-how-many-users-to-test/

http://www.nngroup.com/articles/how-many-test-users/

http://www.nngroup.com/articles/how-many-test-users/

http://www.sensible.com/rsme.html

http://www.sensible.com/rsme.html

http://home.comcast.net/~tomtullis/publications/UPA2004CardSorting.pdf

http://home.comcast.net/~tomtullis/publications/UPA2004CardSorting.pdf

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


Quando fare un test?

• Indicazione dei problemi di usabilità riscontrati

• Suddivisione per gravità e priorità di intervento

• Raccomandazioni per la fase di UI design


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


Card Sorting

http://www.slideshare.net/bastianlion/user-testing-nello-sviluppo-di-unarchitettura-dellinformazione-il-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


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


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


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à


Personas

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

Set di:Jason Travis

(Flickr)


Personas





• 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


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


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


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

http://www.balsamiq.com/products/mockups
































• Design intermedio

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

LE FASI DEL DESIGN

Med - Fi Design





http://www.axure.com






















































• 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


Analisi tramite linee guida

• http://userium.com


Analisi tramite linee guida

http://userium.com

http://userium.com

http://userium.com

http://userium.com

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

Lezione Comunicazione Visiva e Design delle Interfacce - Unimib - 2014 edition

Technology

Transcript of Lezione Comunicazione Visiva e Design delle Interfacce - Unimib - 2014 edition