introduction to
INTERACTION DESIGN
Matteo Marcato IxD theory1
introduction to
INTERACTION DESIGN Matteo Marcato
Ho consegnato questo documento per l’appello d’esame del 17 febbraio 2012 del corso 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, o messo virgolette di citazione al loro inizio e fine, inoltre b) 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 altri 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.
Matteo Marcato
Booklet realizzato per il corso di Interaction Design Theory 1 tenuto da Gillian Crampton Smith e Philip Tabor, a.a. 2011/2012 Facoltà di Design e Arti Università Iuav di Venezia
INDICE INTRODUZIONE
p.1
LE COSE CHE COMUNICANO
p.2
Hunt affordance LE COSE CHE INTERAGISCONO
p.4
Design interaction L’UTENTE AL CENTRO
p.6
Conceptual model TRADURRE IL COMPLESSO
p.8
Metaphor COMUNICARE ALL’UTENTE
p.10
Represent service PROPORRE SOLUZIONI
p.12
Design oppurtunity CONCLUSIONI
p.14
FONTI
p.15
INTRODUZIONE Questo lavoro ha l’obiettivo di descrivere una panoramica complessiva di che cos’è e con quali strumenti opera l’interaction design. Questa discliplina raccoglie a sè una eterogenea gamma di scienze: dalla psicologia alla sociologia, dall’ergonomia al design del prodotto, dall’informatica agli studi comportamentali. Ai giorni nostri, con il progresso continuo della tecnologia è diventata necessaria al buon design, ovvero alla corretta progettazione di un prodotto o di un servizio. I capitoli che seguono trattano macro aspetti dell’interaction design, prima analizzando come gli oggetti quotidiani comunichino al loro utilizzatore finale, poi concentrandosi sulle problematiche di utilizzare linguaggi universali e immediati per rappresentare o spiegare cose più complesse. In ultimo si sottolinea come il design debba necessariamente proporre soluzioni innovative a problemi in costante cambiamento con la società. La struttura dei capitoli è composta da una parte di trattazione generale sul tema affiancata dagli assignment svolti durante il corso che aiutano a comprendere attraverso esempi puntuali in che modo l’interaction design sia presente nella progettazione.
1
LE COSE CHE COMUNICANO HUNT AFFORDANCE
Per comprendere quanto incida l’interaction design su un corretto approccio , è bene partire dalle cose che ci circondano.
lo uso?) non è nient’altro che un’informazione che viene inconsciamente o consciamente recepita, elaborata e restituita sotto forma di azione-risposta in un lasso di tempo il più possibile breve, capiamo immediatamente che questa enorme quantità di informazioni deve essere in qualche modo regolamentata o facilitata da un qualche sistema.
Questi oggetti, per il solo fatto di esistere e anche quando non li stiamo utilizzando, condizionano fortemente le nostre azioni. Implicano da parte dell’utente un costante sforzo per organizzare gli spazi dove posizionarli, magari perché questi interagiscano correttamente a loro volta con altri oggetti, ad esempio la caffettiera sul fornello e ovviamente ci pongono di fronte al fatto che dobbiamo sapere come questi funzionano, per non parlare di conoscere eventualmente il modo di aggiustarli o mantenerli.
Qui entra in gioco l’affordance, ovvero la proprietà intrinseca degli oggetti e dei materiali di comunicare qualcosa. Una corretta metodologia di progettazione sfrutta a proprio vantaggio questa proprietà: conoscendo l’azione che deve essere compiuta si utilizzeranno dei “suggerimenti” tali da invitare l’utente a compierla senza doverci riflettere.
“There are an amazing number of everyday things, perhaps twenty thousand of them.”
Questi inviti sono sostanzialmente legati alla visibilità che è strettamente connessa all’affordance, si tratta infatti di rendere esplicite le parti con cui l’utente deve interagire e nascondendo quelle superflue o di funzionamento profondo. Alla visibilità si aggiungono i vincoli culturali, che funzionano molto bene quando si tratta di oggetti semplici e riconosciuti universalmente per il loro uso.
Donald A. Norman
Il numero di oggetti con cui ogni giorno abbiamo a che fare è stimato intorno ai ventimila pezzi. Tutti a loro volta composti da parti mobili, scocche che nascondono meccanismi, viti di congiunzione tra le parti, ognuno con una funzione specifica. Se consideriamo che ognuno di questi aspetti (dove lo metto? come funziona? come
2
HUNT AFFORDANCE Tra gli esempi di ottima affordance la leva che comanda il rubinetto dei bagni pubblici. Impossibile da non notare e a differenza dei sistemi ottici, il feedback è immediato. La zip non può che essere utilizzata secondo il sistema previsto, non ci sono altri elementi da tirare. Il maniglione antipanico rientra tra la tipologia di quel design che si affida alla logica e al buon senso (se voglio uscire spingo!) uniti all’attenzione di fruizione in casi critici. La chiavetta usb pone un duplice problema: dove la inserisco e in quale verso? Esistono infatti molte entrate diverse e non è immediata l’associazione icona = parte alta. Un cattivo mapping è la ragione per cui non sappiamo individuare immediatamente l’interruttore giusto. Le macchinette automatiche spesso hanno un’interfaccia ridotta e una sequenza azione/risposta difficile da conoscere a priori.
3
LE COSE CHE INTERAGISCONO DESIGN INTERACTION
Il passo successivo alla comprensione delle proprietà comunicative intrinseche degli oggetti insieme all’analisi dei vincoli strutturali e culturali, è quello di offrire all’utente un’esperienza d’uso il più naturale possibile evitando di dover coinvolgere processi mentali profondi.
venire sulla semplificazione, limitare il più possibile quelle non corrette, o comunque prevedere la possibilità di indietro. In questa attività si inserisce la necessità di una risposta di ritorno (feedback) per ogni azione che l’utente compie, in modo da informarlo sulla presa in carico di una richiesta, dello suo stato di avanzamento e sull’esito finale che questa comporta. Si pensi come led o rumori, di un elettrodomestico come la lavatrice, ci informino sullo stato di attività: nessuna spia attiva indica lo stato di spegnimento, se lampeggia richiama l’attenzione a una determinata opzione, il rumore prodotto dal cestello che è in funziona e addirittura un rumore non consueto ci potrebbe far venire il sospetto che qualcosa si sia rotto o stia per farlo a breve.
“Interaction design is about behavior, and behavior is much harder to observe and understand than appearance.” Dan Saffer
Norman sottolinea come sia importante trasferire più informazioni possibili dalla nostra testa nel mondo che ci circonda, in modo da alleggerire il peso delle scelte. In questo senso diventano fondamentali l’uso di icone per riconoscere immediatamente la funzione di un tasto o una leva, così come la loro posizione spaziale su di un pannello di comandi, questo sistema è noto con il nome di mapping.
L’interaction design nella sua definizione più ampia ha a che fare coi processi cognitivi così come lo studio delle azioni e quasi paradossalmente anche della previsione degli errori. In altre parole, ha l’obiettivo di indagare la relazione uomo/macchina in case al binomio azione/risposta.
Un ottimo metodo per analizzare la complessità d’utilizzo degli oggetti è la realizzazione di flow chart e storyboard. in questo modi risultano evidenti tutte le possibilità che l’utente ha a disposizione e si può inter4
DESIGN INTERACTION Riprogettare una macchina di uso comune come il distributore automatico di caffè per offrire un’esperienza piacevole necessita l’analisi delle azioni da compiere per arrivare al risultato finale. In questa proposta mi sono concentrato sul favorire la socializzazione durante “la pausa caffè”. Il distributore è costituito da un tavolo circolare con tre erogatori nella parte superiore. L’utente sceglie il bicchiere di carta dove è riportata la scritta della tipologia di caffè (espresso, lungo...). Posizionato insieme allo stick del cucchiaino sotto all’erogatore, vengono letti i codici QR abbinati. Il pagamento, una volta visualizzato l’importo sul display, può avvenire tramite smartphone con la tecnologia NFC o con le monete.
5
L’UTENTE AL CENTRO MODELLI CONCETTUALI
Se è così facile individuare gli aspetti per una buona progettazione, perché ogni giorno ci scontriamo con la frustrazione di non capire come funziona un oggetto? Possono sembrare ostacoli banali, ma sopratutto per le azioni ripetitive quelle che potremmo definire solo scocciature influiscono in modo massiccio sulle nostre attività. Pensiamo quanto tempo perdiamo per eseguire operazioni sulla carta semplici come fotocopiare un documento o farsi una fototessera alle macchinette automatiche.
più gravi anche incidenti rilevanti, premere un pulsante al posto di un altro in una cabina di pilotaggio di un aereo. La fase di progettazione non può prescindere dall’ignorare l’utente che poi andrà a utilizzare l’oggetto. Sembrerebbe un fatto ovvio, ma chi progetta ha conoscenze maggiori degli utilizzatori finali e troppo spesso fa affidamento su queste per far evitare la lunga fase di prototipi e test che invece sono comunque necessari. Evitando di ritornare alla corretta progettazione, sono molto utili le considerazioni di Donald Norman riferite all’utente dove definisce sette stadi d’azione, i primi tre per l’esecuzione: formare lo scopo; formare l’intenzione; specificare un’azione. Gli altri quattro per la valutazione: eseguire l’azione; percepire lo stato del mondo, interpretare lo stato; valutare il risultato. La distanza tra cosa si aspetta l’utente e cosa realmente accade viene definita dallo stesso Norman come golfi di esecuzione e valutazione più questi sono profondi più vi è discordanza tra i modelli concettuali.
“Conceptual models should be visually appealing pieces of graphic design.” Dan Saffer
Il problema risiede nel differente approccio che utente e progettista hanno sul medesimo oggetto. In particolare il primo deve tenere in considerazione una serie di problematiche che saranno ignorate dall’utente che tende a semplificare il più possibile il funzionamento di un oggetto per ottenere una risposta veloce, perdendo così elementi fondamentali per la comprensione. Ecco quindi che si creano due modelli concettuali diversi, dove la non coincidenza produce spesso scocciature, come non sapere se tirare o spingere una porta, oppure in casi 6
CONCEPTUAL MODEL In questo esempio ho presto in analisi il funzionamento dell’apertura delle finestre dove la maniglia, opposta ai cardini, a seconda dei casi si può trovare sull’infisso a destra o a sinistra del vetro. La prima spiegazione che l’utente assegna al funzionamento della maniglia è in realtà errata. Infatti la rotazione della maniglia in senso orario o antiorario non è assumibile come sempre vera. Ma in realtà deve essere considerata la finestra nel suo complesso: dove la rotazione verso la finestra comanda l’apertura e verso l’infisso la chiusura. Un’azione anche logica pensando al disturbo che creerebbe la maniglia verso il muro, ma che l’utente non perde tempo a prendere in analisi, ricorda come ha aperto l’ultima finestra e così procede.
7
TRADURRE IL COMPLESSO METAPHOR
Compresa l’importanza di tenere in considerazione le conoscenze dell’utente mettendolo al centro del progetto, si arriva a tentare di tradurre l’oggettivamente complesso in qualcosa che possa essere interpretato velocemente senza sforzo. La metafora non è solo una figura retorica della linguistica, ma il metodo che spesso usiamo inconsapevolmente per semplificare il mondo che ci circonda.
La metafora risulta molto utile anche come attività progettuale. Definito un problema è necessario frammentarlo in sotto problemi che presenteranno difficoltà minori man mano che si scende nello specifico e proporre così soluzioni attraverso la trasposizione di questa complessità in un ambiente più famigliare o comunque meno complesso. Anche qui si nasconde una pericolosa insidia, quella di adeguare il progetto alla metafora scelta, anziché limitarsi all’utilizzare questo strumento per un’analisi a posteriori. In ultimo, come affermano J. Preece, H. Sharp e Y. Rogers nel libro Interaction Design: “limita l’immaginazione del designer verso nuovi paradigmi e nuovi modelli”. Se la metafora trova una discreta attinenza con il modello fisico di riferimento, è possibile che questa venga presa come assunto per i successivi progetti, senza considerare che magari il modello fisico è stato progettato male generando in questo modo errori che si ripetono a cascata.
“Good metaphors are stories, creating visible pictures in the mind.” Bruce Tognazzini
L’informatica fa ampio uso di metafore in quanto deve spiegare il funzionamento di sistemi virtuali, si pensi all’ambiente desktop dei nostri computer, dove l’organizzazione dei files è paragonata a scrivanie, cassettiere e cestini. Ma anche alla “home” dei siti web, la bacheca e il diario di facebook, i calendari e le agende elettroniche, ecc... L’uso smodato delle metafore è fortemente criticato dagli stessi designer, arrivare a ricreare ambienti troppo simili alla realtà porta al risultato opposto a quello voluto, creando modelli concettuali sull’utilizzo errati.
8
METAPHOR I flussi di cassa del proprio conto bancario sono stati tradotti attraverso la metafora del viaggio in mongolfiera. Ogni causale di pagamento o di incremento del conto è stata abbinata a un elemento della struttura della mongolfiera. Il concetto alla base risulta molto semplice: se la mongolfiera resta in aria vuol dire che le entrate sono maggiori delle uscite, la bancarotta è rappresentata dallo schianto al suolo. Come variabili alla definizione dell’altitudine entrano in gioco i pesi per le uscite, mentre il gas e l’aria calda sono associate alle entrate.
9
COMUNICARE ALL’UTENTE REPRESENT SERVICE
Fin qui si è discusso sul rapporto comunicativo tra oggetti e utente, di come lo facciano naturalmente e di come utilizzare a nostro vantaggio la forza dei vincoli, della visibilità e del feedback. Quando a dover essere comunicato è un servizio ci si trova di fronte a dover considerare altre problematiche, ma di fatto nulla cambia nell’approccio progettuale.
ha realmente bisogno. In aiuto al progettista interviene in modo preponderante la l’info graphic design, che tenta di tradurre i dati in elementi grafici dal maggior impatto visivo e dalla più facile comprensione rispetto a una lunga tabella di numeri. La tecnologia offre un vasta gamma di soluzioni, ad esempio un touch screen può essere facilmente utilizzato per richiedere un’informazione personalizzata, inoltre l’integrazione di sistemi differenti permette un costante aggiornamento dei dati, come ad esempio la tecnologia GPS montata sugli autobus e connessi alle pensiline delle fermate è in grado di fornire in tempo reale una stima dei tempi di attesa.
“All design decisions are taken with respect to the context of users.” J. Preece, H. Sharp, Y. Roger
Un servizio a differenza di un oggetto coinvolge in maniera sostanzialmente diversa il concetto di spazio, in quanto sono difficilmente individuabili i confini entro i quali opera, e il concetto di tempo, spesso un servizio è fruibile in tempi diversi, è ripetibile o prolungabile. In sostanza il progettista, in questo caso deve spostare maggiormente l’attenzione al contesto in cui andrà ad operare.
Rimane ben inteso dell’inesistenza di un modello ideale di rappresentazione grafica delle informazioni, questo dipende da troppe variabili differenti: la profondità e l’estensione dell’informazione, la frequenza di aggiornamento, il destinatario, il media con cui veicolare i messaggi. Un buon design deve sapersi adattare al contesto cogliendo tutte le possibili opportunità.
L’obiettivo dell’utente può essere anche semplice, come spostarsi da un luogo all’altro della città o sapere dove prendere un taxi, la complessità risiede nel dover organizzare tutte le informazioni del servizio ma mostrare facilmente all’utente solo quelle di cui 10
a
da
da AEREOPORTO
BIGLIETTI 15 €
@ 13 €
24h
26 €
A/R
25 €
24 €
72h
60 €
20 p.p.
10 € p.p.
@ 45 €
con carta Venezia
AEREOPORTO
8.00
9.00
20.15
21.45
ai minuti .00 .30 22.45
23.45 F.TE NUOVE
7€
ai minuti .00 .30 MADONNA DELL’ORTO
20.00
21.20
8.42
9.42
20.12
21.32
8.51
9.51
20.21
21.41
8.57
9.57
20.27
21.47
9.01
10.01
20.31
21.51
9.14
10.14
20.44
21.04
22.20
23.20
00.20
LI
G
U
9.30 ai minuti .00 .30
MADONNA DELL’ORTO
G
8.30
E
GUGLIE
TA F. VE
O
U
N
ai minuti .12 .42 22.32
23.32
00.32
E
A ST
S.
S. STAE
ai minuti .21 .51 22.41
23.41
00.41
EL
O
R
IA
LT O
RIALTO
S.
A
N
G
ai minuti .27 .57 22.47
23.47
S.MARCO
00.47 S. ANGELO
ai minuti .31 .01 22.51
23.51
00.47 S. MARCO
REPRESENT SERVICE
ai minuti .44 .14
La linea arancio dei vaporetti di Venezia collega la città all’aeroporto. Le informazioni che quindi devono essere comunicate sono: 1) il percorso; 2) gli orari dei passaggi in entrambe le direzioni; 3) il costo del servizio. La mappa è stata semplificata evidenziando in modo alternato le fermate. La disposizione spaziale è stata forzatamente ridotta a una linea dove affianco compaiono le tabelle orarie dei passaggi. Le informazioni di costo sono visualizzate in modo iconico per una rapida e univoca lettura.
11
22.04
23.04
00.04
a
PROPORRE SOLUZIONI DESIGN OPPORTUNITY
Progettare un nuovo prodotto o un servizio è un’operazione complessa, devono essere bilanciate due forze opposte. Nella società odierna la standardizzazione è la chiave per abbattere i costi di produzione, dall’altra parte proporre qualcosa di personalizzato alle esigenze dell’utente è la tendenza del mercato. Con il diffondersi di tecnologie mobile, che sfruttano applicazioni, questa inevitabile divergenza finalmente trova soluzione.
mazioni e guidare l’utente a capire su quali criteri operare le scelte. Risulta quindi evidente che il lavoro del designer non si limita più a progettare un qualcosa (prodotto o servizio) compiuto, ma deve piuttosto proporre soluzioni che l’utilizzatore finale poi compirà. Questo parziale passaggio di consegne non è di poco conto: l’enorme potere di disegnare le nostre abitudini, di condizionare fortemente le preferenze dei consumatori fino a questo momento era in mano a una cerchia ristretta di progettisti che attraverso le strategie di marketing ceravano nuove esigenze per far accogliere nuovi prodotti sul mercato. Ora le cose non sono cambiate in maniera così strutturale da poter dire che ci troviamo di fronte a una rivoluzione dei consumi, ma non si può negare che sia nato un processo inverso, esteso a tutti i consumatori e quindi più democratico dove loro stessi sono in grado di adattare il progetto alle richieste.
“Over the next decade, there will be a wide range of products and services online, from highly structured to nearly formless.” Dan Saffer
Alla base del funzionamento di queste app non c’è nient’altro che quel dialogo tra progettista e utente che è il primo passo per un buon design. Le app restituiscono risultati filtrando l’enorme quantità di dati a disposizione grazie alla connessione internet con le preferenze inserite dalla persona o imparando dalle sue scelte. In questo modo il servizio non è dato a priori ma in costante adattamento alla sue necessità. Ciò non toglie che il progettista continui ad avere una enorme responsabilità nell’organizzazione e visualizzazione delle infor12
DESIGN OPPORTUNITY Questo esercizio è rivolto alla creazione di un’app per la ricerca di ristoranti e bar in città turistiche come Venezia. Il concept è mostrare suggerimenti immediati, così come sono improvvise le decisioni e necessità dei turisti. Incrociando i dati del database costantemente aggiornato e la posizione geografica del device e accendendo la telecamera, l’app è in grado di mostrare sullo schermo i prezzi indicativi del ristorante e il rating assegnato. Inoltre visualizza la posizione e la distanza di alternative nei paraggi.
13
CONCLUSIONI FORZA E RESPONABILITÀ DEL DESIGN
“Progettare è facile quando si sa come si fa.” Bruno Munari
Progettare è un’attività seria, specie se l’utilizzatore finale non siamo noi ma altre persone, questo impone una metodologia e un’etica molto rigorose. Basta poco per creare qualcosa con un cattivo design che si possa ripercuotere negativamente sulle nostre attività quotidiane, mentre ci vuole molta esperienza e studio per arrivare a soddisfare i molteplici requisiti che si presenteranno davanti. Un oggetto o un servizio perché abbia successo deve avere contemporaneamente un’estetica accattivante, una facile comprensione d’uso, un costo economico e di tempo adeguato allo scopo e non deve essere esclusivo a una ristretta cerchia elitaria. In questa breve trattazione sull’interaction design si è tentato di sottolineare l’importanza che riveste nella progettazione oggi sulla corretta attività di progettazione. Il ruolo del designer è diventato meno elitario ma non per questo è privo di responsabilità.
14
FONTI DONALD A. NORMAN, La caffettiera del masochista, Giunti, Firenze 2005 (ed. originale 1988) DAN SAFFER, Design for interaction - second edition, New Riders, Cambridge 2010 BILL MOGGRIDGE, Designing Interactions, Mitt Press, Berkeley CA J. PREECE, H. SHARP, Y. ROGERS, Interaction design, Apogeo Editore, Milano 2004 BRUNO MUNARI, Da cosa nasce cosa, Editori Laterza, Bari 2009 BRUCE TOGNAZZINI, First principles of Interaction Design, www.asktog.com/basics/firstPrinciples.html
Fonts Titoli: Din bold 36pt, 24pt Testo: Din regular, Din italic 11pt, 9pt Citazioni: Din 16 italic 18pt, 6pt
15