Issuu on Google+

INTERACTION DESIGN Valentina De Agnoi


Ho consegnato questo documento per l’appello d’esame del 28 gennaio 2013 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) 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.

23 gennaio 2013 Valentina De Agnoi


Valentina De Agnoi

Interaction Design.


PER CHI DISEGNAMO?

11

COSA, COME, PERCHÈ PROGETTO?

15

GUARDARE CIÒ CHE CI CIRCONDA

19

MODELLI CONCETTUALI: COINCIDONO SEMPRE?

23

SEMPLIFICARE MODELLI COMPLESSI

26

AIUTARE LA COMPRENSIONE

29

BIBLIOGRAFIA

35


Con questo corso mi si è aperta una finestra su una disciplina che non conoscevo. L’interaction design studia e progetta il modo di interagire tra persone e oggetti e soprattutto cerca di rendere più intuitivo il loro utilizzo. È una disciplina giovane, nata una ventina di anni fa quando Bill Moggridge gli diede il nome nel 1990, si può dire che derivi dal design del prodotto e dal design della comunicazione; essa infatti cerca di “mettere in comunicazione le persone attraverso i prodotti che usano.” 1 Quando c’è una buona progettazione l’utente non si accorge del lavoro svolto dal designer, esso è invisibile, mentre, quando questa è cattiva, ce ne si accorge subito; si interagisce con difficoltà con l’oggetto, a volte si pensa che il problema sia nostro, non riusciamo a capire come dobbiamo agire. Spesso ci sentiamo inutili e “stupidi” perché non riusciamo a far funzionare un dispositivo, non capiamo se dobbiamo spingere o tirare una porta per aprirla, ecc. Bisogna tener conto che si progetta per l’utente, e lo scambio tra uomo e macchina dev’essere intuitivo e semplice, è di questo che si deve occupare il designer. Con questo piccolo libro vorrei riportare, attraverso gli esercizi svolti, ciò che spero di aver imparato durante il corso. Come, prima della progettazione vera e propria, bisogna conoscere il campo in cui si va ad agire, attraverso studi specifici. Partendo, quindi, dalle interviste fino al prototipo finale della nostra applicazione, passando per lo studio di ciò che ci circonda e dei modelli concettuali che si possono formare gli utenti, spesso diversi da quelli del designer. Quando si progetta bisogna tener conto che il designer non è l’utente, ce ne possiamo dimenticare spesso, presi dalle nostre idee. In questo libretto ho voluto riportare gli esercizi disegnati a mano su carta con pennarelli, perché credo che prima di iniziare a progettare o disegnare a computer sia fondamentale passare per il disegno manuale.

1. D. Saffer. Design dell’interazione. Creare applicazioni intelligenti e dispositivi ingegnosi con l’interaction design. Firenze, Pearson Education, 2007, p. 3

9


PER CHI DISEGNAMO?

1 e 2. D. Saffer. Design dell’interazione. Creare applicazioni intelligenti e dispositivi ingegnosi con l’interaction design. Milano, Pearson Education, 2007, p. 31 3. D. Saffer. Design dell’interazione. Creare applicazioni intelligenti e dispositivi ingegnosi con l’interaction design. Milano, Pearson Education, 2007, p. 79

Credo che come designer la prima domanda che dobbiamo porci sia ‘per chi disegnamo?’. L’utente per cui andiamo a sviluppare qualcosa è di rilevante importanza. Bisogna cercare di conoscere chi saranno le persone che andranno ad utilizzare i nostri prodotti. Come possiamo fare, per esempio, un’applicazione per giovani genitori se non conosciamo i problemi che possono verificarsi nella loro vita di tutti i giorni? Come dice Saffer “Gli utenti lo sanno meglio” 1, essi, infatti conoscono i propri bisogni ed esigenze e il designer, quindi, deve solo chiedere. Il suo compito è quello di cercare di progettare qualcosa per “aiutare l’utente a raggiungere i suoi obiettivi“2 nel modo più facile possibile. La prima cosa che deve fare il designer è, quindi, cercare informazioni sul campo, per farlo si può avvalere di vari metodi di ricerca. Questi possono essere suddivisi in tre categorie: osservazione, attività e interviste. Il primo consiste nell’osservare cosa le persone stiano facendo, senza intervenire; con il metodo dell’attività si cerca di coinvolgere i soggetti nella costruzione di un artefatto, liberando in questo modo la loro creatività. L’intervista, invece, si basa sul chiedere agli utenti, cercando sempre di metterli a proprio agio e facendo domande che non prevedano come risposta solo ‘si’ o ‘no’, ma anche sul come, cosa e perché. “È sorprendente quanto si possa scoprire semplicemente chiedendo.” 3 Per esempio, nell’esercizio riportato avevamo il compito di intervistare una persona, in questo caso Elda, una signora di 81 anni che vive sola. Dovevo mettere a proprio agio l’intervistata e attraverso le domande capire quali fossero i problemi, i disagi e le esigenze degli anziani che vivono soli. Da questa intervista ho scoperto cose che non potevo sapere, perché il designer non è l’utente. Con le informazioni raccolte ho potuto avere le idee più chiare di cosa potrebbe aver bisogno Elda, ho capito che la sua esigenza più grande è quella di un mezzo di trasporto per far visita ai parenti e per andare alle varie visite mediche. Per quanto riguarda la spesa e i lavori di casa non ha particolare bisogno di aiuto. Anche vivere da sola non le pesa molto, le piace la tranquillità e la calma di casa sua. Grazie alle interviste, in seguito, si può creare una Persona, cioè un utente tipo con i suoi pregi e difetti, i bisogni e i problemi, e progettare per essa. Cosa direbbe della nostra applicazione, le piacerebbe? la capirebbe? sarebbe veramente utile? Se la ricerca è stata svolta bene la risposta sarà si.

11


COSA, COME, PERCHÈ PROGETTO?

1. D. Saffer. Design dell’interazione. Creare applicazioni intelligenti e dispositivi ingegnosi con l’interaction design. Milano, Pearson Education, 2007, p. 7

Una volta capito per chi stiamo progettando dobbiamo capire cosa, come, dove e perché. Le interviste e le Persona sono utili per capire i bisogni dell’utente, ma bisogna prestare la stessa attenzione anche al cliente. Uno degli obiettivi del designer dell’interazione è quello di equilibrare le richieste dei clienti con i bisogni degli utenti. Il compito dell’esercizio era individuare un’opportunità, in questo caso dovevamo capire come progettare un “Restaurant finder”, un dispositivo che cerca i ristoranti (e li trova). Come progettarlo? Per chi? Un’applicazione per telefono o un chiosco in giro per la città? E soprattutto perché? ‘Perché?’ è una delle domande principali che si deve porre il designer: perché sto progettando questa cosa? Perché deve funzionare in questo modo? Attraverso l’esercizio ho cercato di rispondere a queste domande, ed è importante farlo prima di iniziare la progettazione vera e propria, per chiarirsi le idee e per capire lo scopo del nostro progettare. Una volta chiarite le idee sul cosa e perché, si inizia a pensare al come. Questa era la seconda parte dell’esercizio, che abbiamo svolto in gruppo. Si trattava di creare un prototipo fatto di carta della nostra idea, e poi girare un video per spiegarne il funzionamento. I prototipi sono importanti perché servono per testare le nostre idee. “Ogni prototipo non rappresenta necessariamente la soluzione, ma una soluzione” 1, in questo modo possiamo capire qual’è quella migliore. Noi abbiamo pensato ad un’applicazione per dispositivi mobili: My Dining Table. L’idea era quella di creare un specie di network; registrandosi all’applicazione è possibile seguire i nostri amici, vedere dove sono andati a mangiare e le opinioni sui vari ristoranti, e in base a questo scegliere dove dirigerci. Una volta fatto il log-in compare la pagina del nostro profilo, da lì possiamo iniziare la ricerca del ristorante, selezionando la città e utilizzando diversi filtri di ricerca, come il tipo di ristorante o le opinioni degli amici. Verrà visualizzata una schermata con i risultati, la grandezza dell’icona del ristorante corrisponde alla vicinanza rispetto alla nostra posizione (più grande, più vicino). Da qui basta scegliere cliccando e ci troviamo sulla pagina del ristorante, dove possiamo vedere il menu e, se vogliamo, effettuare la prenotazione. L’applicazione ci fornisce anche una mappa per raggiungere sani e salvi il ristorante prescelto. Attraverso il prototipo siamo riusciti ad avere un’idea chiara sul funzionamento dell’applicazione e sui problemi che possono emergere nel realizzarla.

15


GUARDARE CIÒ CHE CI CIRCONDA

1. D. Saffer. Design dell’interazione. Creare applicazioni intelligenti e dispositivi ingegnosi con l’interaction design. Milano, Pearson Education, 2007, p. 50 2. D. A. Norman. La caffettiera del masochista. Psicopatologia degli oggetti quotidiani. Firenze, Giunti, 2009, p. 42 3. D. A. Norman. La caffettiera del masochista. Psicopatologia degli oggetti quotidiani. Firenze, Giunti, 2009, p. 106

Si può imparare molto anche guardandosi intorno, soffermandosi a pensare se gli oggetti che utilizziamo tutti i giorni sono facili da usare o creano confusione. Nell’esercizio riportato dovevamo guardarci intorno, ricercare e disegnare degli oggetti che, secondo noi, avessero una buona o una cattiva affordance, e oggetti con un buono o cattivo mapping. Con affordance si intende “una proprietà, o un insieme di proprietà di un oggetto, che fornisce indicazioni su come interagire con quell’oggetto” 1. Per esempio, secondo me, un dispensatore di sapone ha una buona affordance, in quanto è naturale pensare di schiacciarne la “testa” per prelevare il liquido. Lo stesso per il temperino, l’unico modo per fare la punta alla matita è inserirla nel buco, non ci sono possibilità di sbagliare. Anche lo spremiagrumi, l’unica cosa da fare è schiacciare l’arancia su quella parte appuntita. Una cattiva affordance, invece, può portare confusione nell’utente; per esempio il cavatappi, chi non si è mai chiesto come funzionasse questo strano oggetto? A tavola nessuno vuole mai aprire il vino a causa di questo oggetto difficile da usare. I coltelli colorati che vanno di moda adesso, invece, possono sembrare meno taglienti di quello che sono o addirittura dei giocattoli, l’uso dei colori sgargianti maschera la loro pericolosità, anche questa può essere considerata cattiva affordance. Il termine mapping serve per indicare la relazione “fra i comandi e il loro azionamento e i risultati che ne derivano nel mondo esterno”2. I problemi di mapping sono numerosi, è buono quando i comandi corrispondono effettivamente a quello che ci si aspetta che facciano. Si può considerare per esempio lo sportello del Bancomat, non è complicato da usare e basta seguire passo passo le istruzioni dateci, ad ogni azione che vogliamo svolgere corrisponde un tasto sullo schermo. Oppure il phon, ha due pulsanti contraddistinti da due colori diversi, uno per la velocità di emissione dell’aria e uno per la temperatura. Incontriamo un cattivo mapping, invece, nei comandi del microonde, ci sono pochi tasti con più funzioni, lo stesso vale per gli orologi più tecnologici con cronometri, luci, e opzioni varie. Questo confonde l’utente, ‘con questo tasto cosa farò?’. Quando si progetta bisogna, quindi, pensare se il nostro dispositivo è intuitivo o se serve per forza il libretto delle istruzioni, “se un progetto ha bisogno di etichette scritte può darsi che sia difettoso” 3.

19


MODELLI CONCETTUALI: COINCIDONO SEMPRE?

1. D. A. Norman. La caffettiera del masochista. Psicopatologia degli oggetti quotidiani. Firenze, Giunti, 2009, p. 60 2. D. A. Norman. La caffettiera del masochista. Psicopatologia degli oggetti quotidiani. Firenze, Giunti, 2009, p. 241

Quando noi guardiamo gli oggetti ci formiamo inconsciamente un modello concettuale sul loro funzionamento. Questi modelli si basano su vincoli e aspetti fisici dell’oggetto. Per esempio una chiavetta usb, può solo essere infilata su una delle porte del computer, quale? cercheremo quella giusta per forma e grandezza. La forma della chiavetta ci fornisce dei vincoli che limitano le sue possibilità di utilizzo. Noi “basiamo i nostri modelli sulla conoscenza che abbiamo” 1, e basiamo questa conoscenza su ciò che il sistema ci fa vedere. Quando però il funzionamento dell’oggetto non è così chiaro come sembra ci possiamo formare un modello concettuale sbagliato, che ci porta a non capire o ad usare in modo errato l’oggetto. Il modello che ci siamo creati è falso, e non coincide con quello che aveva pensato il progettista. Ci sentiamo confusi e stupidi e non capiamo come far funzionare correttamente il dispositivo. In questo caso ho preso come esempio la macchinetta per foto-tessera, basandomi su un mio recente utilizzo. Entrando mi sono chiesta ‘e ora?’, non sapevo da che parte iniziare, e le indicazioni non mi aiutavano. Inserendo i soldi si attivava la macchina, a questo punto potevo selezionare il tipo di foto, fatto ciò partiva lo scatto. Rivedendolo mi sono resa conto che non mi piaceva, così ho schiacciato il pulsante indicatomi per rifarlo per altre due volte, al terzo tentativo mi sono accorta che stava stampando l’ultimo scatto effettuato. Niente mi aveva avvertito, pensavo di poter scegliere lo scatto migliore e stampare quello. Mi sono creata un falso modello concettuale sul funzionamento della macchina. Per migliorare il dispositivo ho proposto un cambiamento, alla fine dei tre scatti poter scegliere il nostro preferito vedendoli sullo schermo, e premendo il pulsante corrispondente. L’esercizio prevedeva anche il disegno di un diagramma di flusso con rappresentato il funzionamento della macchina. “Il modello dell’utente è essenziale, [...] in quanto corrisponde a ciò che [...] ha capito del sistema.” 2 Il progettista, quindi, deve pensare ad un funzionamento che sia chiaro per l’utente. Non sempre, però, il modello dell’utente deve coincidere con quello del progettista. Il modello di quest’ultimo può essere più complesso, per esempio in una macchina del caffè il modello del progettista deve includere anche la parte “dietro” della macchina, cioè il suo funzionamento specifico, come si fa il caffè; mentre il modello dell’utente sarà più semplice e riguarderà solo il “davanti” cioè dove mettere i soldi, che pulsanti premere e dove verrà fuori la bevanda, tralasciando tutto il meccanismo della preparazione.

23


26

SEMPLIFICARE MODELLI COMPLESSI Nel capitolo precedente abbiamo capito che un modello concettuale è un’idea che le persone si fanno su come funziona un dispositivo o un oggetto. Quando il funzionamento è complesso le persone si possono creare dei falsi modelli concettuali, per semplificarli, ci si può avvalere dello strumento della metafora. Essa cerca di far comprendere una cosa sconosciuta in termini differenti, ma più familiari. Cerca di spiegare un concetto complesso attraverso la sua sostituzione con un altro, più semplice e in un campo semantico che può essere conosciuto meglio dall’utente. Le metafore possono essere verbali, come, per esempio, quando diciamo “Marco è un leone”: non è veramente un leone, ma dicendo così facciamo capire al nostro interlocutore che Marco è una persona coraggiosa e audace. Possono essere anche non verbali (visive e concettuali), un esempio importante di questo tipo di metafora è l’uso della “scrivania” come interfaccia del personal computer pensata da Tim Mott, sono presenti cartelle, cestini e documenti, come in una vera scrivania. Le metafore possono essere molto utili perché aiutano gli utenti a capire un sistema complesso attraverso termini più familiari e conosciuti. Esse, però, possono diventare troppo incoerenti, se si esagera nel volerle estendere. Inoltre, sono destinate a decadere, in quanto rimangono nonostante il cambiamento di tecnologie e quindi di modelli concettuali. Nell’esercizio ho provato ad applicare una metafora visiva al sistema economico di un giovane studente universitario. Ho cercato di rappresentare le varie entrate ed uscite monetarie, prendendo come termine di paragone un sistema fisico. Ho associato i soldi all’acqua, il portafoglio dello studente è una grande caraffa, dove possono entrare e uscire i suoi risparmi sotto forma di ghiaccio, i soldi dei genitori sono un distributore d’acqua, perché sono limitati, i possibili stipendi, invece, sono rappresentati da un rubinetto. Dalla caraffa escono anche le varie spese, come tutto ciò che riguarda l’università, una pianta che si spera crescerà e darà dei frutti, le uscite con gli amici (bicchieri) o gli hobby (tazza di te). Con questa metafora spero di aver reso più semplice e intuitivo la comprensione del sistema economico di un ragazzo universitario, semplicemente guardando ai disegni, senza bisogno di spiegazioni.


AIUTARE LA COMPRENSIONE Rendere semplice la lettura e la visualizzazione delle informazioni date aiuta la comprensione per gli utenti. Per fare questo possiamo usare i data visualization, ovvero trasformare i dati in immagini. Facendo ciò cerchiamo di racchiudere molti dati in un’unica immagine, non solo per semplificare la visualizzazione ma anche per analizzare meglio i dati stessi e quindi ricavare nuovi fatti o teorie. Possono essere statiche o dinamiche. Sono statiche quelle su carta, per esempio i tabelloni informativi, i diagrammi ad albero, le liste, i calendari, le linee del tempo nei libri di storia. Presentano diverse variabili, che devono interagire tra di loro per dare un’informazione, come per esempio gli orari, i binari e giorni nei tabelloni dei treni. Con l’avvento dei dispositivi elettronici come computer e smartphone, però, si possono creare “dataviz” dinamiche, e trasformare direttamente i dati in immagini, si può mettere insieme molte più variabili e rendere il tutto più chiaro e semplice. È possibile, inoltre, interagire con le informazioni, magari scegliendo che tipo di dati vedere. Con questa esercitazione dovevamo provare a rendere più semplici e comprensibili i dati riguardanti la linea arancio dell’Alilaguna, prima in modo statico e poi dinamico. La linea è quella che collega l’aeroporto con Piazza S. Marco, molto utilizzata dai turisti. Attualmente le informazioni sono sparse su diverse pagine del sito internet, e non sono molto chiare. Noi dovevamo, per quanto riguarda la visualizzazione statica, riunirle tutte in un’unica immagine. Attraverso il disegno della linea con le stazioni ho cercato di far capire la distanza tra le varie fermate graficamente, oltre che temporalmente leggendo l’ora. E ho cercato di ridurre tutta la tabella degli orari in una rappresentazione grafica più semplice, con indicato solo gli orari di partenza, l’arrivo e la durata lo si può dedurre con l’aiuto della “linea del tempo” presente sopra. Per quanto riguarda la rappresentazione dinamica, ho pensato ad una nuova pagina internet dove si possono vedere le fermate della linea sulla mappa di Venezia, selezionando la stazione di partenza e di arrivo compaiono gli orari e viene visualizzato il percorso. Cliccando, poi, l’orario prescelto si vede quando si arriverà ad ogni fermata. I data visualization sono molto utili per la comprensione se fatti bene, e possono aiutare molto gli utenti, chiarendogli le idee e semplificandogli la vita.

29


Che cos’è, quindi, un interazione? “Un’interazione [...] è una forma di comunicazione” 1. L’interaction design cerca di aiutare le persone a comunicare tra loro attraverso i vari dispositivi, e con gli oggetti quotidiani e i servizi. Dopo questo corso sono convinta che questa disciplina si debba basare sull’utente, in quanto uno dei suoi scopi è semplificare la vita delle persone. È importante entrare in contatto con loro e capirne bisogni e necessità. Nell’introduzione scrivevo che quando non capiamo come si interagisce con un oggetto ci sentiamo incapaci e che probabilmente la colpa è del designer, per evitare almeno in parte questo, il progettista non deve ignorare che errare è umano, tutti sbagliamo, quindi quando si progetta bisogna tener conto del fatto che le persone potrebbero commettere errori usando il nostro prodotto. Gli utenti devono imparare ad usare gli oggetti, e nel processo è inivitabile che qualcuno sbagli. Dobbiamo cercare di “capire [le possibili] cause dell’errore” e tentare di “ridurle al minimo”2, dare, inoltre, la possibilità di “annullare il già fatto”3, cioè creare reazioni reversibili. Quando si studia un nuovo prodotto dobbiamo chiederci “come lo userebbe una persona? Potrebbe commettere errori?” se sì, dobbiamo cercare di arginarli. Il compito del designer, quindi, è scoprire i problemi e trovare diverse possibili soluzioni ad essi. Bisogna tener conto, però, che queste soluzioni sono giuste solo per un particolare problema in un determinato momento. Infatti le varie tecnologie cambiano frequentemente e molte cadono in disuso a favore di nuove interfaccia e nuovi dispositivi. L’interaction design è una disciplina nata da poco e quindi ancora in continuo sviluppo, ogni giorno si presentano nuovi prodotti, e anche nuovi problemi di interfaccia che aspettano di essere risolti dai designer. Il metodo però rimane quello, capire di cosa ha bisogno la persona, e provare a soddisfarla. Spero con questo libro di aver dato un’idea di cos’è l’interaction design secondo me, e del percorso da fare nella progettazione.

1. D. Saffer. Design dell’interazione. Creare applicazioni intelligenti e dispositivi ingegnosi con l’interaction design. Firenze, Pearson Education, 2007, p. 46 2 e 3. D. A. Norman. La caffettiera del masochista. Psicopatologia degli oggetti quotidiani. Firenze, Giunti, 2009, p. 170

33


BIBLIOGRAFIA Per i testi Norman, Donald A. La caffettiera del masochista. Psicopatologia degli oggetti quotidiani. Firenze, Giunti, 2009. Saffer, Dan. Design dell’interazione. Creare applicazioni intelligenti e dispositivi ingegnosi con l’interaction design. Milano, Pearson Education, 2007. Moggridge, Bill. Designing Interactions. Cambridge MA: MIT Press. 2007. Lesina, Roberto. Il nuovo manuale di stile. Guida alla redazione di documenti, relazioni, articoli, manuali, tesi di laurea. Bologna, Zanichelli editore, 2009. Le lezioni presentate al corso, Prof.ssa Gillian Crampton Smith e Philip Taylor, A.A. 2012-13.

Per la grafica Vignelli, Massimo. The Vignelli Canon. - www.vignelli.com/canon.pdf

35


DETTAGLI DI PRODUZIONE Titoli Capitoli: Nexa Light, 14 pt Testi (Caption): Helvetica Light, Light Oblique, 10 pt, interlinea 13 pt Note: Helvetica Light, 8 pt Indice: Nexa Light, 10 pt Titolo: Nexa Light, 46 pt, 16 pt Software usati: InDesign by Adobe, Photoshop by Adobe. Disegni capitoli: carta e pennarelli Disegno copertina: carta e penna, modificato in photoshop.

37



Interaction Design booklet