Interaction design. Progettare per l'utente, progettare con l'utente.

Ho consegnato questo documento per l’appello d’esame del 16 settembre 2011 del corso di Interaction Design Theory (Teorie dell’interazione) tenuto da Gillian Crampton Smith con Philip Tabor alla Facoltà di Design e Arti, Università Iuav di Venezia.

Per tutte le sequenze di parole che ho copiato da altri fonti, ho: a) riprodotte in corsivo, inoltre b) messo virgolette di citazione al loro inizio e fine, inoltre c) indicato, per ogni sequenza, il numero della pagina o lo URL del sito web della fonte originale.

Per tutte le immagini che ho copiato da altre fonti, ho indicato: a) l’autore e/o proprietario, inoltre b) il numero della pagina o lo URL del sito web della fonte originale.

Dichiaro che tutte le altre sequenze e immagini di questo documento sono state scritte o create esclusivamente da me.

9 settembre 2011

Interaction Design Progettare per l’utente, progettare con l’utente.

Gianpiero Spinelli

Indice

pag.7

Introduzione

pag.9

Intelligent Ambient

pag.12

Affordance

pag.18

Mapping e feedback

pag.23

Modelli mentali e concettuali

pag.26

Personas e opportunitĂ

pag.30

Prototipazione

pag.34

Conclusione

pag.36

Bibliografia

5

6

Introduzione Il designer, oltre ad essere un progettista, è molto spesso un intellettuale, che s’interessa e studia molteplici aspetti della quotidianità e quindi della conoscenza.

In particolare l’interaction design,

materia molto vasta, racchiude essa stessa nozioni di design, ma anche di psicologia, di informatica così come di biologia. Un interaction designer deve essere aperto ad ogni tipo di conoscenza, e il suo obiettivo primario dev’essere la capacità di comunicare: i prodotti e i servizi che progetto sono mezzi di comunicazione, con l’uomo e tra gli uomini, in una società in cui sempre più i dispositivi digitali sono strumenti utili a questa comunicazione.

In questo libro sono raccolte le metodologie di base per affrontare un progetto, analizzarlo passo dopo passo e costruire un prodotto che soddisfi le esigenze quotidiane degli utenti.

7

8

#1

Intelligent Ambient Interagire con l’ambiente.

La vita dell’uomo, nel cosiddetto secolo breve, è stata affiancata da un

livello di evoluzione tecnologica cosĂŹ rapido ed elevato da condizionare fortemente lo stile di vita di ciascuno.

La maggior parte degli oggetti e degli

spazi intorno a noi integrano al loro interno dispositivi digitali

che ne regolano il funzionamento, interagendo strettamente con gli individui e creando veri e propri sistemi interattivi di

9

Le icone utilizzate per sintetizzare le azioni svolte durante la vita quotidiana.

comunicazione macchina-macchina e macchina-uomo. È da qui che nasce l’idea di Ambiente Intelligente, luoghi in cui gli oggetti lavorano in sintonia fra di loro facilitando e migliorando la vita di chi li abita: macchine che leggono lo stato fisico degli ambienti in cui lavorano, che interpretano i bisogni individuali, che anticipano volontà, che comunicano in modo intelligente.

Uno scenario futuristico (ma non troppo) in cui le macchine potrebbero assumere un ruolo non solo fondamentale nella vita dell’uomo, come ormai è, ma addirittura vitale,

10

nel senso più “integrale” del termine, nella misura in cui la vita potrebbe essere quasi impossibile senza il loro funzionamento. È un’esagerazione, vero, ma di fatto si pone una questione: fino a che punto è giusto che dispositivi più o meno intelligenti invadano la vita quotidiana di ognuno di noi? Fino a che punto un mondo altamente automatizzato finirebbe per essere un mondo migliore? Una risposta la fornisce lo psicologo e ingegnere Donald Norman quando afferma che “Nel migliore dei mondi possibili, dovremmo poter scegliere fra l’automatismo e il controllo manuale”. (Norman, La caffettiera del masochista, 246). Con quest’affermazione, Norman vuole ribadire la centralità dell’uomo e la sua necessità di autodeterminarsi, di gestire in prima persona ogni situazione. L’uomo, quindi, è protagonista e determina ogni momento della propria vita, in qualsiasi ambiente in cui si trova, individuali o sociali che siano.

Il ruolo dello sviluppo tecnologico, e in particolare del design dell’interazione, dev’essere quello di migliorare, e non invadere, l’uomo e gli spazi in cui vive, quindi “stabilire connessioni fra le persone attraverso questi prodotti, non connettersi al prodotto stesso.”

(Saffer, Design dell’interazione, 6).

11

Esempi di oggetti che posseggono una cattiva affordance: tagliaunghie, sturalavandini, termostato.

#2

Affordance Oggetti che parlano.

12

Il linguaggio della comunicazione è intrinseco in ogni individuo. Ognuno di noi comunica verbalmente, usa la parola per relazionarsi ad altri individui, ma ci sono meccanismi meno espliciti, meno consapevoli della parola, come ad esempio i gesti, i movimenti, la postura. Esiste

insomma, un linguaggio del corpo, meno “pensato� ma altrettanto efficace.

Anche gli oggetti, cosĂŹ come gli essere umani, possono comunicare attraverso le proprie caratteristiche

fisiche: da questa constatazione nasce il concetto di affordance, ovvero,

13

appunto, quella capacità dell’oggetto di suggerire le proprie possibilità e modalità d’utilizzo.

Queste cosiddette capacità possono essere intrinseche nell’oggetto, e in tal caso Norman le definisce reali, oppure attribuite dall’uomo in base al proprio livello culturale, sociale

14

e di esperienza, e in questo caso le si definisce percepite. (Norman, Il computer invisibile, 137).

In entrambi i casi, ad un oggetto viene attribuita una buona affordance quando il possibile utente riesce ad intuirne senza troppe difficoltà il funzionamento nelle sue modalità e

Esempi di oggetti con buona affordance: presina, interruttore, scarpa.

15

finalità. La presina nell’immagine precedente, ad esempio, ha un’ottima affordance: afferma in modo evidente di essere una “protezione” per la mano; la forma concava è quella tipica della mano nell’atto di afferrare, le quattro scanalature segnano evidentemente il “luogo” dove posizionare le proprie dita, e quindi risulta difficile immaginare di afferrare tale oggetto in altro modo.

Un altro esempio di buona affordance è rappresentato dalla scarpa: innanzitutto si presenta con la forma approssimata di un piede; poggia saldamente al suolo; i diversi materiali di cui può essere composta sono sempre resistenti ma duttili, caratteristica che suggerisce l’adattabilità ad un “elemento” che si muove e si flette; presenta una cavità per tutta la sua lunghezza che suggerisce la funzione di “involucro”; infine presenta generalmente dei lacci o altri sistemi con cui può essere allargata o stretta a seconda di quanto deve aderire all’elemento (il piede) che deve contenere.

Non sempre però, gli oggetti riescono a comunicare la propria funzione.

Molti dei dispositivi di controllo dell’acqua calda, i cosiddetti termostati, possiedono una cattiva affordance: spesso risultano essere marchingegni complessi, pieni di tasti e manopole, che suggeriscono si l’idea di una “centralina di controllo”

16

ma non si prestano per niente alla compressione delle modalità di utilizzo. Generalmente, infatti, sono accompagnati da voluminosi manuali d’istruzione, che noiosamente siamo costretti a leggere per provare a cogliere il funzionamento.

Se dispositivi digitali intelligenti possono essere utili a rendere più familiare e funzionante un ambiente, non dobbiamo però dimenticare che anche gli oggetti più comuni e semplici sono fondamentali ad aiutarci nella vita quotidiana, ma non tutti riescono a farlo nel migliore dei modi. Credo che il ruolo di un designer sia proprio quello di rendere semplice l’utilizzo e la funzionalità di oggetti comuni, prima ancora di immaginare i dispositivi più complessi del futuro.

17

#3

Mapping e feedback Storyboard e flowchart per progettare l’interazione.

Quando compiamo delle azioni su un determinato prodotto, per poterne sfruttare la funzionalità, stiamo creando delle relazioni logicospaziali tra noi utenti e il prodotto stesso. L’insieme di queste relazioni viene definito Mapping.

Così come per l’affordance, anche nel caso del mapping possiamo avere buoni o cattivi esempi di funzionamento. Un cattivo mapping si traduce in un comportamento confuso ed errato di un utente quando si approccia al prodotto o servizio. Al contrario Norman definirà naturale un mapping capace di creare “evidente correlazione spaziale tra la disposizione dei comandi e le cose comandate” (Norman, La caffettiera del masochista, 43).

Uno degli scopi del mapping è quello di semplificare il più possibile le azioni che l’utente dovrà eseguire, e risparmiargli

18

Macchina da caffè capace di riconoscere l’utente attraverso i suoi occhi, e di leggere i lsuo stato d’animo e le esigenze quotidiane.

19

il maggior numero possibile di informazioni da memorizzare. Per questo vengono utilizzate analogie fisiche, concettuali e culturali.

Ad esempio, nella macchina per caffè dell’esempio, le icone che rappresentano la quantità di zucchero da versare nella bevanda sono poste in ordine crescente da destra a sinistra, per rafforzare l’informazione “aumento della quantità di zucchero”.

In un paese arabo, dove il contesto culturale vuole che la scrittura e quindi la lettura avanzino da destra a sinistra, questo mapping non sarebbe altrettanto efficace. Le fasi di progettazione dell’interfaccia possono seguire una diverrà metodologia di rappresentazione. Una delle strade possibili vede come primo step la stesura di uno storyboard: consiste di una rappresentazione attraverso schizzi e immagini del dispositivo, accostandolo all’uso di un possibile utente in un determinato contesto.

Questo tipo di rappresentazione rende immediato e di facile lettura il mapping dell’interfaccia. Una seconda strada è invece il flowchart o flusso di compiti, che rappresenta in modo più schematico, quasi scientifico, le relazioni logicotemporali tra le azioni compiute.

I flowchart sono un metodo di rappresentazione molto utilizzato nei linguaggi di programmazione, perché forniscono una precisa visualizzazione

20

diagrammatica delle varie funzioni.

Una volta progettate le azioni che un utente deve compiere su un dato prodotto, è importante che a queste azioni corrisponda una sorta di reazione. Si parla in questo caso di feedback, generalmente un impulso visivo o sonoro, o entrambi, che faccia capire all’utilizzatore innanzitutto di aver compiuto un’azione, e quindi se questa azione risulta essere corretta o meno. Si tratta quindi di una risposta che la macchina fornisce all’utente dopo un suo dato comportamento. Norman, per far comprendere l’importanza del feedback, fa un parallelo con il mondo delle interazioni umane: “avete presente quanto può essere frustrante interagire con qualcuno il viso non lascia trapelare alcuna espressione e che non da alcun tipo di risposta verbale? Senza feedback non siamo in grado di funzionare, sia con una persona, sia con una macchina intelligente”. (Norman, Il design del futuro, 136).

Abbiamo visto, quindi, come a rendere un prodotto efficace e funzionale sono le sue caratteristiche fisiche, più o meno intrinseche, e la capacità di semplificare le azioni dell’utente su di esso, e di rispondere adeguatamente.

21

22

#4

Modelli mentali e concettuali Progettare per metafore.

Spesso, per spiegare il funzionamento di prodotti o servizi di cui non comprendiamo bene la natura, ci affidiamo a delle elaborazioni personali sottoforma di metafora, creando quindi dei veri e propri modelli mentali.

Questo fenomeno si verifica soprattutto nell’approccio ad ambienti e dispositivi interattivi, ambito in cui risulta più complessa la comprensione del funzionamento e dell’approccio al dispositivo stesso. È compito del designer fornire, durante la progettazione, degli aiuti alla comprensione dei meccanismi di ciò che sta progettando. Questi aiuti sono evidenti ad esempio quando è presente una buona affordance, o un buon mapping, ma anche quando si forniscono modelli concettuali, anche metaforici, che invitano a compiere

23

certe azioni e ne escludono delle altre.

Modello concettuale fornito dal progettista e modello mentale dell’utente, secondo Norman (Norman, La caffettiera del masochista, 35) vanno messi in stretta correlazione e confrontati, in modo tale da renderli più vicini possibile, e ottenere un’interazione che sia corretta ed efficace, e che semplifichi l’utilizzo del dispositivo o spazio interattivo che sia. La metafora è uno degli strumenti utilizzati nell’ideazione di modelli concettuali, e bene si addice nella creazione di interfacce,

24

creando correlazione tra meccanismi complessi e fenomeni comunemente conosciuti. Nell’immagine di fianco è stato rappresentato un piccolo sistema finanziario fatto di diversi tipi di entrate e varie tipologie di uscite, utilizzando la metafora del classico sistema di circolazione delle acque in natura. Vari tipi di precipitazioni (pioggia, grandine, neve) sono le entrate che vanno a rafforzare le casse di questo sistema, rappresentate come un piccolo lago. I corsi d’acqua che escono dal laghetto sono i vari tipi di uscite del sistema.

La metafora delle precipitazioni per indicare le entrate finanziarie, e quella degli estuari di un piccolo lago per indicare i consumi.

25

#5

Personas e opportunità Progettare per l’utente, progettare con l’utente.

26

Il prodotto del lavoro di un designer, del suo processo di progettazione, può essere il frutto di diversi tipi di approcci e metodologie.

Uno degli approcci possibili alle fasi di progetto è quello che mette al centro l’utente finale: incentrare il lavoro concentrandosi sulle persone che ne usufruiranno significa osservare queste persone, porre loro domande sotto forma di intervista, sottoporre dei test e far direttamente sperimentare i prototipi.

Solo in questo modo il designer può far propri punti di vista ai quali, altrimenti, non avrebbe modo di accedere, riuscendo così a cogliere nuove strade, nuove soluzioni, condividendo quindi il proprio progetto con gli ipotetici utenti finali, rendendoli, come afferma Saffer, veri e propri Co-Creatori del prodotto (Saffer, Design dell’interazione, 31).

Coinvolgendo quindi un certo numero di persone, e raccogliendo attraverso interviste, dati sensibili e informazioni utili, è possibile ricavarne “modelli” non reali ma assolutamente realistici di persone, con delle proprie caratteristiche, attitudini, esigenze, sogni: le cosiddette Personas.

Nell’esempio qui riportato, un sistema informativo sui trasporti veneziani, sono state individuate tre tipologie di utenti, per i quali le necessità di spostamento in

27

laguna sono differenziate. Le loro esigenze costituiscono, all’interno di un diagramma, degli input di informazione, a partire dai quali sono state realizzate delle “risposte” alle richieste delle varie personas, una serie di output a volte condivisi da tutti gli utenti a volte completamente differenziati.

Dopo aver individuato dapprima le esigenze e poi le risposte alle stesse, è necessario mettere in atto la propria ricerca e realizzare dei prototipi che, testati sugli stessi utenti finali, possano permettere di verificare se le fasi di progettazione sono state corrette e se hanno portato a risultati soddisfacenti.

Momolo è il sistema informativo ideato per informare diverse tipologie di utenti sul funzionamento dei trasporti su acqua di Venezia.

28

29

#6

Prototipazione Carta e penna, quick and dirty.

Di seguito alcune delle “schermate” dell’applicazione Canalia, utile ad affittare una barca a Venezia.

30

Abbiamo detto che coinvolgere ipotetici utenti finali nel processo di progettazione, e creare modelli possibili di personas, serve ad ottenere un prodotto più efficiente e funzionale possibile. Il successivo passaggio, quello finale, consiste nella costruzione di un modello, il prototipo, versione preliminare del prodotto precedente alla realizzazione industriale. Il prototipo sarà la versione più vicina e simile a quella definitva e finale, ma di fatto, proprio perché non ancora risultato della produzione industriale ma quasi oggetto di artigianato, e poiché

esso stesso sarà sottoposto ancora a test di verifica, può subire ulteriori modifiche e perfezionamenti. Per cui i prototipi, afferma Saffer “comunicano il messaggio ‘questo è come potrebbe essere’.”

(Saffer, Design dell’interazione, 114.)

I prototipi possono essere molto fedeli e raffinati, ma anche “quick and dirty” ovvero semplici realizzazioni, spesso usando schizzi a matita su carta, che rendono l’idea di come sarà il prodotto finale e soddisfano la necessità di perfezionamento.

Inoltre un prototipo realizzato in modo semplice e veloce, da la possibilità al progettista di

31

effettuare cambiamenti rapidi sul prototipo stesso, per poi ripetere immediatamente i test di usabili.

Lo stesso utente a cui saranno sottoposti i test, dinanzi ad un prodotto visibilmente non finito, sarà più spronato ad intervenire e criticarne la funzionalità.

Oltre alla funzione di testare il progetto, la prototipazione costituisce un rapido mezzo di comunicazione, in quanto rende semplice ed immediata la comprensione del progetto stesso, a differenza di una spiegazione verbale.

Nell’esempio riportato è possibile osservare un prototipo molto “elementare” realizzato in carta con schizzi rapidi ed efficaci, di un sistema per dispositivi mobili che permette di affittare una barca a Venezia. Gli obiettivi del lavoro erano principalmente due: soddisfare le esigenze di diverse tipologie di utenti, e rendere il più semplice possibile l’affitto di una barca. Pertanto, attraverso una sorta di intervista all’utente, gli viene chiesto “step by step”, il numero di persone che vogliono utilizzare la barca, per quale utilizzo la si vuole affittare, quale tipologia di barca si preferisce, in quale giorno e per quanto tempo la si vuole usare, quale attrezzatura è necessaria sulla barca (canne da pesca ed esche, se si vuole affittare la barca per andare a pesca),

32

e infine se si desiderano informazioni supplementari come previsioni del tempo o delle maree.

Con il prototipo è stato poi realizzato un breve video-scenario che racconta la piccola avventura di una ragazza che per il compleanno del suo fidanzato vuole regalargli una giornata in barca.

Il video stesso è stato un pretesto per immaginare delle personas, quindi degli ipotetici utenti alle prese con il servizio.

33

Conclusioni Lo studio delle teorie di base dell’interazione ha aperto in me una nuova consapevolezza.

Ora sono pienamente cosciente del fatto che tra designer e utente non c’è distanza, che il designer non è colui che dall’alto decide quale “giocattolo” mettere tra le mani di qualcuno. Il designer è l’utente sono la stessa persona: un designer è utente quando, nell’affrontare un nuovo progetto, si pone in prima persona nel cercare problematiche d’uso nella vita quotidiana; un utente è designer quando, nell’utilizzare qualunque oggetto o servizio pone delle critiche, esprime un giudizio e propone delle possibili varianti per il miglioramento.

La progettazione non è esercizio di stile, progettare non è dar sfogo alla propria creatività, non è creare il bello; progettare, per un interaction designer, significa soddisfare esigenze, semplificare la quotidianità, e quindi, in qualche modo, migliorare la società.

34

35

Bibliografia Moggridge, Bill.

Norman, Donald.

Designing Interaction.

Lo sguardo delle macchine:

Cambridge: MIT Press, 2006.

per una tecnologia dal volto umano.

New York, London:

Norman, Donald.

W.W. Norton & Company, 1992.

La caffettiera del masochista: psicopatologia degli

versione italiana,

oggetti quotidiani.

Firenze: Giunti Editore, 1995.

New York: Basic Books, 1988. versione italiana,

Norman, Donald.

Firenze: Giunti Editore,1990

Il design del futuro.

Milano:Apogeo Editore, 2008.

Saffer, Dan. Design dell’interazione: creare applicazioni

Deni, Michela.

intelligenti e dispositivi ingegnosi con l’interaction

Oggetti in azione, semiotica deglio oggetti:

design.

dalla teoria all’analisi.

Milano: Pearson Education, Aiga, 2007.

Milano: Franco Angeli Editore, 2002.

Preec, Jenny; Rogers, Yvonne;

Norman, Donald.

Sharp,Helen.

Il Computer invisibile: la tecnologia migliore è

Interaction Design:

quella che non si vede.

beyond human-computer interaction.

Cambridge: MIT Press, 1998.

London: Jhon Wiley & Sons, 2002.

versione italiana,

versione italiana,

Milano: Apogeo Editore, 2000.

Milano: Apogeo Editore, 2004.

36

37

In copertina Titolo: Fedra Mono, Bold, 36 pt Sottotitolo: Fedra Mono, Light, 18 pt Autore: Fedra Mono, Light, 12 pt

Indice Titolo: Fedra Mono, Bold, 32 pt Capitolo: Fedra Mono, Normal, 12 pt Numero di pagina: Fedra Mono, Light, 10 pt

All’interno Titoli: Fedra Mono, Bold, 32 pt Sottotitoli: Fedra Mono, Light, 24 pt Testi: Fedra Serif A, Book, 12 pt Citazioni: Fedra Serif A, Book Italic, 12 pt Didascalie: Fedra Mono, Light, 9 pt