growing into interaction

45
Growing into Interaction Stella Morelli

Upload: stella-morelli

Post on 12-Mar-2016

214 views

Category:

Documents


1 download

DESCRIPTION

A booklet realized for Interaction Theory I course at Iuav, University of Venice with Gillian Crampton Smith and Philip Tabor.

TRANSCRIPT

Page 1: Growing into interaction

Growing into InteractionStella Morelli

Page 2: Growing into interaction

Ho consegnato questo documento per l’appello d’esame di 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 l’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.

Stella Morelli, Febbraio 2012, Venezia

Page 3: Growing into interaction

Growing into InteractionStella Morelli

Interaction Design Theory Course IFaculty of Design and ArtsIUAV University of Venice

Page 4: Growing into interaction
Page 5: Growing into interaction

Introduzione ........................................................................................

I principi del Design dell’Interazione1 | Affordance .........................................................................................Cosa fare con questo oggetto?

2 | Mapping ............................................................................................Lovable coffee dispenser

3 | Modelli Concettuali ........................................................................Come fare una doccia perfetta

4 | Metafora ............................................................................................Metafora finanziaria

Approcci al Design dell’Interazione5 | Metodi di ricerca ............................................................................Intervista

6 | Design dei servizi ............................................................................Chiosco del vaporetto

Conclusione ..........................................................................................Colophon ................................................................................................Bibliografia ...........................................................................................

5

9

13

19

23

27

33

414345

Indice

Page 6: Growing into interaction

Il titolo “Growing into Interaction” è stato scelto per spiegare il primo apporccio a questa disciplina proponendo un percorso in grado di introdurre tutti gli argomenti necessari alla comprensione della materia.

La copertina e le prime pagine dei diversi capitoli hanno l’intento di mostrare questa “crescita” tramite l’incremento dei triangoli, i quali rappresentano la conoscenza. La copertina mostra il percorso completato. Con l’avanzare dei capitoli tale conoscenza cresce.

La griglia di impaginazione è modulare e composta da cinque righe e cinque colonne che permettono ai contenuti e alle immagini di adattarsi perfettamente alle esigenze senza costringerne la forma e rendendo ogni pagina unica.

Page 7: Growing into interaction

Introduzione

“We become what we behold. We shape our tools, and thereafter our tools shape us”-Marshall McLuhan-

L’interaction design è una disciplina nata attorno agli anni ‘90. Il termine fu coniato da Bill Moggridge indicando una disciplina che univa il design della comunicazione, il product design, l’informatica, e molte altre in un’unica materia con l’obiettivo di unire le persone attraverso i prodotti utilizzati e che si prefissava il compito di fornire una giusta interazione e quindi un giusto utilizzo del prodotto in questione.

Nella società odierna si ha a che fare in ogni momento con oggetti che necessitano di interazione, si pensi all’automobile, al forno, al cellulare, al computer o ai giochi per bambini. Tutto è progettato in seguito a un’attenta analisi del comportamento delle persone, del contesto d’uso basandosi sulla cultura, in quanto questa può formare nelle persone un modello mentale ben preciso che si cerca di mantenere per non creare scompensi o frustrazioni nell’utilizzo.

I capitoli seguenti sono il risultato delle lezioni di “Teorie del Design dell’Interazione” tenute da Gillian Crampton Smith e Philip Tabor presso l’Università IUAV di Venezia, nell’anno accademico 2011/2012.

I capitoli sono organizzati in modo da introdurre i principali aspetti dell’interaction design e spiegare con quali approcci porsi durante la progettazione al fine di creare un prodotto mirato all’utilizzo dell’utente finale.

Ipotesi di “Smart environment” che interagisce e semplifica le azioni della vita quotidiana

Page 8: Growing into interaction
Page 9: Growing into interaction

Affordance

Page 10: Growing into interaction

10

Note:

Tratto e/o rielaborato da:

[1] Don Norman “Affordance and

design” www.jnd.org

[2] Donald A. Norman, “The

Psychology of Everyday Things”,

1988 New York. Pagg 26 e 27.

[3] William W. Gaver, “Tecnhology

affordances”, articolo.

[4] Dan Saffer, “Designing for

Interaction “2010.

Bill Moggridge, “Designing

Interactions” 2007.

A tutti è capitato almeno una volta di non capire quale interruttore accendesse una luce o quale tasto rendesse possibile una specifica azione. Questo succede perché le azioni possibili non sempre sono chiare, non hanno collegamenti con quello che ci aspettiamo di fare o semplicemente sono nascoste.

Il termine affordance (autorizzazione) fu coniato dallo psicologo cognitivista James Gibson nel 1966 come riferimento alle azioni possibili tra mondo e utente riferendosi contemporaneamente all’uno e all’altro.[1]

Il termine non venne usato fino al 1988 con la pubblicazione del libro The Psychology of Everyday Things di Don Norman.

Quando parliamo di interazione tra utente e oggetto parliamo di affordance ovvero che cosa è possibile fare con un oggetto. Questo in genere fornisce inviti e vincoli per aiutare a comprendere il suo funzionamento. Gli inviti (o affordances) ci danno informazioni sui possibili usi e funzioni, al contrario, i vincoli, limitano le possibilità di azione.

Un oggetto ben progettato non deve necessitare di istruzioni e dovrebbe poter essere usato anche al buio. Spesso però capita di usarne di apparentemente semplici, come ad esempio le porte, che però necessitano di veri e proprio manuali d’uso. [2]

Page 11: Growing into interaction

11

I progettisti non sempre si immedesimano nella situazione d’uso dell’oggetto, progettando cose belle esteticamente, ma che nascondono le loro possibilità di azione, frustrando le persone che le utilizzano convinte che sia un loro problema non saperle far funzionare.

William W. Gaver, in ”Technology affordance” suddivide le affordances in diverse categorie:

• Affordances percepibili (perceptible): le informazioni sono percepibili in modo semplice e immediato

• Affordances nascoste (hidden): le informazioni per una giusta interazione sono nascoste.

• Affordances false (false): le informazioni suggerite danno vita ad azioni inesistenti. Le persone sbagliano ad interagire con l’oggetto.

• Affordances sequenziali (sequential): sono affordances che si susseguono. La prima rende visibile la seconda e così via.

• Affordances nidificate (Nested): descrivono affordances raggrupapte tra loro. [3]

Le immagini di queste pagine sono il risultato dell’assignement n° 2, in cui veniva richiesto di cercare esempi di buono e cattivo affrodance.

Nella pagina corrente sono illustrati alcuni oggetti riferiti al buon affordance. Sono stati selezionati il lettore DVD (nella pagina accanto), che presenta tutti i comandi indispensabili a vista, rendendo semplice il suo utilizzo pur mantenendo un’armonia estetica. I guanti e il rubinetto della doccia sono altri due esempi di buon affordance in quanto grazie alla loro forma suggeriscono come interagire con essi. Il rubinetto inoltre suggerisce tramite l’uso dei colori convenzionali come il rosso e il blu la temperatura dell’acqua.

Affordance sequenziali

Page 12: Growing into interaction

12

Tutte le immagini di questo capitolo sono state scattate da Stella Morelli, Chieri, Torino, Ottobre 2011.© Tutti i diritti riservati.

Con questa classificazione è possibile comprendere che non sempre le possibilità di azione sono chiare o che le informazioni fornite dagli oggetti non hanno sempre una forma che permette di comprenderne il funzionamento, ma possono fornire tali informazioni che coinvolgano tutti i sensi.

Inoltre un oggetto di buon design oltre a mettere in mostra tutte le sue possibili funzioni deve dare risposte immediate in modo da evitare la ripetizione di un’azione solo perché, non dando feedback istantaneo, si pensa che l’azione non sia andata a buon fine. [4]

In queste pagine sono riportati due esempi di cattive affordance. Un cartello stradale estremamente complicato che porta l’utente a non individuare chiaramente il messaggio che vuole trasmettere e un bagno con diversi comandi non chiari e univoci per lo sciacquone e l’allarme.

Page 13: Growing into interaction

Mapping

Page 14: Growing into interaction

14

“Mapping è il termine usato per indicare la relazione tra due cose, in questo caso tra comandi e il loro azionamento e i risultati che ne derivano nel mondo esterno.” [1]

Il mapping è un concetto che sfrutta il naturale posizionamento degli oggetti per agire in modo efficace e permettere all’utente di utilizzare un oggetto nel migliore dei modi e senza fare confusione.

Un buon principio di mapping è quello che funziona con il naturale senso logico, come, ad esempio, per aumentare un’intensità, il comando dovrà muoversi verso l’alto, viceversa se si vuole diminuire si muoverà verso il basso. Si parla di dimensioni additive, in quanto aggiungo qualcosa.

Un esempio di cattivo mapping è la centralina della canalizzazione dell’aria di un camper preso in esame. Consiste in un interruttore che aziona sia la canalizzazione del riscaldamento, che il ricircolo dell’aria fredda proveniente da sotto il camper.

Nella stagione invernale un errore può portare a un immediato raffreddamento della parte interna.

Note:

Tratto e/o rielaborato da:

[1] Donald A. Norman, “The Psy-

chology of Everyday Things”, 1988

New York. p. 42.

[2] Donald A. Norman, “The Psy-

chology of Everyday Things”, 1988

New York. p. 44.

Page 15: Growing into interaction

15

In aggiunta è necessario specificare che il pulsante si muove in orizzontale, senza alcuna segnalazione cromatica.

Immaginando di non cambiare la struttura dell’interruttore nè il suo posizionamento forse, se il tasto fosse orientato in verticale, potrebbe assumere il valore: in alto “alzo” = aria calda;

in basso “abbasso” = aria fredda (proveniente appunto da sotto il mezzo).

“Un buon design richiede riflessione, pianificazione e consapevole attenzione ai bisogni dell’utente” [2]

Un progettista dovrebbe tenere conto del mapping naturale, ovvero dare una senso logico a comandi e pulsanti in modo da limitare la confusione e soprattutto le etichette, le istruzioni e gli schemi. Questi sono spesso importanti e necessari, ma con l’uso di un mapping naturale si possono ridurre fino ad eliminarli.

Una buona organizzazione veicola da sola le informazioni necessarie per comprendere il funzionamento.

Interruttore della canalizzazione dell’aria calda

e fredda come si presenta attualmente.

Interruttore della canalizzazione con una piccola

miglioria, intervenendo solamente sull’orientamento.

Interruttore della canalizzazione con una

piccola miglioria e utilizzo di indicazioni cromatiche.

L’assignement n° 3 prevedeva la realizzazione di una Task Flow e uno storyboard per un particolare distributore di caffè. In alto è ripor-tato il flusso di lavoro per il funzionamento di tale oggetto che illustra tutte le azioni possibili. A pagina 17 è riportato lo storyboard.

START

YES NO

Page 16: Growing into interaction

16

Spesso, per spiegare il mapping, si utilizzano storyboard e flussi di compiti o task flows.

La creazione di un flusso di compiti illustra passo a passo cosa può fare l’oggetto o il servizio in questione. Può essere definito come tabella che illustra in modo dettagliato i passaggi da un’azione all’altra. Bisogna prestare attenzione a non dimenticare alcun passaggio, spesso considerato banale, in modo da non omettere nessuna azione possibile.

Lo story board consiste nella creazione, solitamente figurata (disegni, immagini o foto), del flusso d’utilizzo dell’oggetto all’interno del suo scenario d’uso. Tramite lo storyboard si possono sottolineare e mostrare le azioni chiave che l’utente deve eseguire con l’oggetto in questione. Lo storyboard è accompagnato da un testo descrittivo che spiega ogni passaggio.

Il principio del mapping è dunque molto importante per non creare sconforto nell’utente. All’acquisto è quindi consigliabile provare gli oggetti per vedere con quale si interagisce meglio. [3]

Note:

Tratto e/o rielaborato da:

[3] Dan Saffer, “Designing for

Interaction” 2010.

Donald A. Norman, “The Psychol-

ogy of Everyday Things”, 1988 New

York..

Le immagini sottostanti sono esempi di storyboard realizzati dalla Disney®.

Sulla destra uno schema riassume i simboli da utilizzare per creare un flusso dei compiti.

http://www.animationartgallery.com

http://www.romanoscarpa.net

Page 17: Growing into interaction

17

Vai al distributore di caffe,...

...inserisci le monete...

...scegli cosa vuoi battendo le mani il numero di volte corrispondente al numero della bevanda scelta...

STORYBOARD

Page 18: Growing into interaction

18

...abbraccia se vuoi lo zucchero, piu, stringi e piu, il caffe, sara, dolce, colpisci i lati se non lo

vuoi...

...aspetta il suono YEAH, indica che il caffe, e,

pronto!

...gusta il caffe,!

STORYBOARD

Page 19: Growing into interaction

Modelli concettuali

Page 20: Growing into interaction

20

Note:

Tratto e/o rielaborato da:

[1] Donald A. Norman, “The Psy-

chology of Everyday Things”, 1988

New York. Pag 60.

[2] Donald A. Norman, “The Psy-

chology of Everyday Things”, 1988

New York. § 1, 2, 7.

“I modelli mentali, ovvero i modelli concettuali delle persone di come funzionano gli oggetti, come succedono gli avvenimenti, come si comportano le persone, derivano dalla tendenza innata a formare spiegazioni. Essi sono essenziali per capire le esperienze, prevedere i risultati delle azioni e si basano sulla conoscenza acquisita”. [1]

Un modello concettuale, oltre a basarsi sulle esperienze personali, è dato anche dalla visibilità e dalla chiarezza dei suoi inviti e vincoli.

Un esempio di un oggetto chiaro ed efficace sono le forbici. Queste presentano tutti i loro vincoli e inviti. I due anelli suggeriscono di inserire qualcosa all’interno, e vista la loro dimensione non possono

che essere le dita. Tutte le parti operative di questo oggetto sono ben visibili in modo da non creare difficoltà nell’utilizzo da parte dell’utente. Diversamente, l’orologio digitale ha diversi tasti, ma nessuno ha una correlazione logica evidente. Ognuno di essi ha la sua funzione, ma per comprenderla bisogna provare (rischiando di cambiare data, ora e sveglie) o leggere il manuale di istruzioni.

Fornire un buon modello mentale, cioè i modelli che le persone hanno di sè, degli altri, dell’ambiente e delle cose, è il principale compito del progettista. Egli deve infatti riuscire a far coincidere il modello mentale suo e quello dell’utente. [2] I modelli mentali si formano grazie all’esperienza, all’addestramento e alle istruzioni.

Page 21: Growing into interaction

21

La Bicicletta convergente di Jacques Carelman. Tratta da Donald A. Norman, “La Caffettiera del Masochista” pag. 30.

Basti pensare ad esempio a un qualsiasi lettore. La prima volta i simboli, le sue funzioni possono essere difficili, ma una volta imparati, si sa dove inserire le prese scart, come utilizzare i tasti, come inserire videocassette, dvd e quant’altro.

Spesso succede di avere immagini di sistema incoerenti che portano l’utente a una cattiva interazione con il dispositivo, con un conseguente malfunzionamento dell’oggetto. Se un modello mentale è difettoso porta disagio all’individuo, il quale si sente responsabile della sua incapacità di utilizzare e interagire con l’oggetto stesso.

.

Capita inoltre di formare proprie teorie che spiegano il funzionamento di un oggetto solo perché questo non dà sufficienti segni visivi delle sue funzionalità. [3]

Il funzionamento di qualsiasi dispositivo si impara facilmente se l’utente ha un buon modello concettuale, che si acquisisce grazie alla possibilità di osservare facilmente le sue funzioni, alla coerenza delle azioni e alla loro visibilità. Si pensi alla guida: il modello mentale sa dirci che per girare bisogna muovere il volante, che

un pedale accelera, uno frena e l’altro serve a cambiare le marce. Tutti i dispositivi necessari alla guida (cambio, volante e pedali) sono facilmente visibili e raggiungibili. Con la pratica e una buona spiegazione la tecnica di guida è facilmente acquisibile.

Norman, suddivide i modelli mentali in:

• Modello progettuale è la concettualizzazione del modello del progettista, ovvero la creazione di un modello mentale sensato e coerente con quello dell’utente.

• Modello dell’utente è sviluppato per spiegare il funzionamento dell’oggetto e corrisponde a ciò che l’utente ha compreso.

Questi due in una condizione ideale dovrebbero essere equivalenti.

• Immagine del sistema è il punto più importante in quanto porta il progettista ad essere certo che il suo prodotto sia coerente con il modello concettuale giusto e che riesca a rendere fruibile il funzionamento.

Solo con il rispetto di questi tre modelli mentali l’utente ne può sviluppare uno corretto in grado di tradurre le intenzioni in azioni e lo stato del sistema in interpretazioni esatte. [4]

Con l’introduzione di nuove tecnologie, lontane dall’esperienza passata delle persone, spesso capita di utilizzare modelli mentali incomprensibili perché lungi dalle possibili spiegazioni dell’utente.

Con l’utilizzo di sistemi affidabili molti errori umani dovuti all’incapacità o alla confusione nell’utilizzare un dispositivo possono essere corretti inserendo un sistema di comunicazione uomo-macchina. Nel 1989 un volo di linea perse il controllo forse per la confusione di un pulsante, causando la morte di 50 persone. [5]

Note:

Tratto e/o rielaborato da:

[3] Donald A. Norman, “The

Psychology of Everyday Things”,

1988 New York. Pagg 240, 241.

Bill Moggridge, “Designing

Interactions” 2007. Pagg 408-410.

[4] Donald A. Norman, “The

Psychology of Everyday Things”,

1988 New York. Pagg 240, 241.

[5] Denis Besnard, “Building

Dependable Systems With Fallible

Humans” articolo.

“Human error in the air: The report

on the M1 plane crash at Kegworth”

http://www.newscientist.com

Page 22: Growing into interaction

22

Rubinetto con regolatore di temperatura.http://media.lavorincasa.it/

L’assignement n° 4, prevedeva di individuare un oggetto con un modello mentale errato. Quello scelto è il rubinetto della doccia con regolatore di temperatura. Capita frequentemente di trovarlo in case, appartamenti ecc.. e incontrare difficoltà nel regolare la giusta temperatura, oltre che sbagliare e confondere i due rubinetti uguali.

Si è soliti vedere e utilizzare rubinetti diversi. Il miscelatore ad esempio apre e miscela direttamente in modo semplice e veoloce l’acqua calda e quella fredda. I rubinetti tradizionali, invece, fanno fuoriuscire l’acqua entrambi, uno calda, l’atro fredda lasciando la possibilità di aprire e chiudere fino al raggiungimento della temperatura desiderata. In questo tipo di rubinetto invece uno dei due, e più precisamente quello della temperatura, se girato prima dell’altro non produce alcun risultato. L’altro fa solo uscire l’acqua. Il risultato: docce gelate o bollenti prima di raggiungere quella ottimale che si susseguono nel tempo perché ogni volta ci si dimenticano le azioni precedenti.

Page 23: Growing into interaction

Metafora

Page 24: Growing into interaction

24

Note:

Tratto e/o rielaborato da:

[1] “Il Nuovo Dizionario Italiano

Garzanti”, Garzanti editori.

[2] Gillian Crampton Smith and

Philip Tabor, appunti, Iuav 2011.

[3] Bill Moggridge, “Designing

Interactions” 2007. Pagg 19-22.

Metafora s.f. figura retorica per la quale si esprime sulla base di una similitudine, una cosa diversa da quella nominata (p. e. sei un fulmine, sei velocissimo, come un fulmine) / fuor di -, in modo esplicito, senza significati nascosti. [1]

“Metaphor is a special type of conceptual model. It explains the unfamiliar in terms of the familiar. That is, in terms of something the user already knows about.”

“La metafora è uno speciale tipo di modello concettuale. Spiega l’infamiliare con termini familiari, cioè qualcosa che l’utente già conosce.” [2]

È caratteristica del cervello umano usare esempi e metafore per spiegare e comprendere le cose della vita quotidiana, aiutando l’attività di brainstorming per spiegare concetti astratti e difficili.

L’esempio più semplice che ha semplificato l’utilizzo dei computer è la metafora usata da Tim Mott nel 1974 allo Xerox PARC. Egli infatti ha sintetizzato la gestione dei contenuti, dei documenti e delle azioni possibili su un computer con le azioni che si fanno in un ufficio. Permise quindi di cestinare, aprire, spostare i documenti in modo virtuale sul desktop, il tutto reso possibile utilizzando una periferica come il mouse, senza la necessità di scrivere del codice.[3]

Page 25: Growing into interaction

25

Note:

Tratto e/o rielaborato da:

[4] Bill Moggridge, “Designing Inter-

actions” 2007. Pagg 53-54.

Dan Saffer, “Designing for

Interaction” 2010. Pagg. 120, 138,

139.

Con gli anni il sistema “ufficio” si semplificò, grazie anche a Larry Tesler subentrarono le icone basate sugli elementi dell’ufficio. L’utilizzo fu semplice e fu un successo perché anche le persone poco esperte di informatica poterono iniziare ad usare i computer. I sistemi operativi odierni mantengono la stessa metafora. Abbiamo una scrivania, delle finestre, un cestino, documenti che si aprono sovrapponendosi proprio come una pila di fogli. [4]Gillian Crampton Smith + Philip Tabor www.interaction-venice.com

DESKTOP METAPHOR

Le metafore sono dunque molto importanti e utilizzate nella vita di tutti i giorni per esprimere concetti complessi e per spiegare meglio le proprie idee. Oppure sono utilizzate nei dispositivi per semplificare l’interazione con essi, proponendo modelli mentali già esistenti nell’utente, invece di crearne nuovi, con il rischio di creare scompenso.

Gillian Crampton Smith Metaphors, Lecture 09.

Page 26: Growing into interaction

26

L’assignement n° 5, prevedeva la rappresentazione del proprio sistema finanziario tramite una metafora.

Dopo aver scelto come simbolo l’albero, si è cercato di individuare qualcosa che subisse continui cambiamenti, così come le finanze, che potesse essere influenzato dagli agenti esterni e che potesse anche avere delle solide basi.

Il terreno, nutrimento dell’albero, simboleggia le entrate fisse.Le spese fisse sono le foglie che cicilicamente cadono. Con l’influenza degli agenti esterni, per esempio il vento, ne cadono di più e sono le spese superflue o quelle impreviste. I risparmi sono i frutti, che possono nascere solo se l’albero è in salute, se riceve le cure e il nutrimento necessari.

Nella pagina precedente è mostrata la prima parte dello schema esplicativo degli elementi usati.

Page 27: Growing into interaction

Metodi di ricerca

Page 28: Growing into interaction

28

Per creare oggetti o servizi che necessitino di interazione è utile secondo Bill Verplank seguire quattro step:

• Motivazione: errori e ideePer la progettazione di un oggetto o servizio, i designer sono

solitamente motivati dagli errori o ispirati dalle idee.

• Significato: metafore e scenarioGrazie all’aiuto di metafore e scenario, il designer può avere un

quadro completo dello scenario d’uso, compreso anche grazie alle metafore.

• Modo: modelli e flussiSuccessivamente vengono analizzati i processi passo a passo in

modo da poter creare dei flussi delle azioni e trovare un modello concettuale adatto per chiarire i significati. Per questo step è necessario avere le idee chiare sulle funzioni del prodotto che si vuole creare.

• Mapping: display e controlli Alla fine della ricerca sono definite le tipologie degli schermi, la

posizione dei controlli e come questi devono essere. [1]

Note:

Tratto e/o rielaborato da:

[1] Bill Moggridge, “Designing Inter-

actions” 2007. Pagg 130-131.

[2] Dan Saffer, “Designing for Inter-

action” 2010. Pagg 33-35.

[3] Dan Saffer, “Designing for Inter-

action” 2010. Pagg 86-90.

Page 29: Growing into interaction

29

“It is essential to the success of interaction design that designers find a way to understand the perception, circumstances, habits, needs, and desires of the ultimate users” Jane Fulton Suri, 2005.

(“É essenziale al successo del design dell’interazione che il designer trovi un modo per capire la percezione, le circostanze, le abitudini, le necessità e i desideri dell’utente” )

Quando si progetta basandosi sulle proprie esperienze è più facile non commettere errori.

Il design centrato sull’utente (UCD User Centered Design) è una filosofia nata negli anni ’80 con lo sviluppo dei computer. Inizialmente il processo di sviluppo si basava sulla macchina stessa, grazie all’incremento della memoria, alla sostituzione e al miglioramento dei monitor, delle prestazioni ecc... successivamente si pensò di basare lo sviluppo dell’interazione del sistema operativo sull’utente, sapendo che egli conosce i suoi obiettivi, le sue preferenze e quindi cosa vorrebbe da quel prodotto. [2]

Grazie ai metodi di ricerca è possibile ottenere informazioni importanti circa le abitudini e le necessità dell’utente.

• OsservazioneIn primo luogo l’osservazione aiuta a comprendere quando,

dove e come il prodotto verrà utilizzato.Il metodo dell’osservazione è effettuato guardando ciò che le

persone fanno. L’osservatore non deve dare nell’occhio e osservare il contesto d’uso dell’oggetto, il background e ciò che sta intorno, la routine delle persone e interagire con le persone come se facesse parte del naturale contesto.

Si pensi per esempio alla progettazione di un’applicazione che

aiuti a fare la spesa, una sorta di lista. L’utente sarà in un luogo dispersivo, grande e con molti prodotti dove solo alcuni saranno quelli necessari per lui. Si dovranno quindi tenere conto possibili distrazioni, la presenza di suoni, musica, voci, quindi evitare comandi sonori. Inoltre spesso si ha fretta, quindi la “lista della spesa” dovrà essere immediata e aiutare, per esempio, a trovare i prodotti più in fretta. Se non si tenesse conto di questi aspetti si progetterebbe qualcosa di sbagliato per il contesto d’uso interessato.

• IntervistaUn altro modo per avere informazione è l’intervista. Ponendo

delle domande all’utente e analizzando le sue esperienze si possono avere informazioni utili alla progettazione.

Si può chiedere di raccontare una storia basandosi sulle interazioni che si hanno con l’oggetto o servizio, oppure condurre un’intervista con gruppi di persone (da IDEO vedi in basso) che parlano dell’oggetto. Infine ci sono interviste mirate, preparate in precedenza dove si pongono domande a cui non si deve rispondere in modo affemativo o negativo, ma si danno risposte mirate utili a comprendere le azioni dell’utente e le sue necessità.

• AttivitàNell’attività si coinvolge l’utente a disegnare le interazioni con

il prodotto. Con il collage, la modellazione e il disegno l’utente mostrerà qualcosa collegato al prodotto. [3]

IDEO (pronunciato “eye-dee-oh”) è uno studio che si basa sul design centrato sull’utente aiuta le organizzazioni a crescere e innovarsi.Grazie all’ideazione di diversi metodi di ricerca è in grado di progettare concentrandosi principalmente sui comportamenti, le necessità e i desideri delle persone.

Interaction Design ProcessBill Verplank suggests a four-step process. First, the designersare motivated by an error or inspired by an idea and decide whatthe ideal goal for the design should be. Next they find a metaphorthat connects the motivation to the end goal and developscenarios to help them create meaning.Then they work out step-by-step what the tasks are and find a conceptual model that tiesthem all together and clarifies the modes. Finally they decidewhat kind of display is needed, what the control are, and how toarrange them.

130 | Chapter 2

Interaction Design ProcessBill Verplank suggests a four-step process. First, the designersare motivated by an error or inspired by an idea and decide whatthe ideal goal for the design should be. Next they find a metaphorthat connects the motivation to the end goal and developscenarios to help them create meaning.Then they work out step-by-step what the tasks are and find a conceptual model that tiesthem all together and clarifies the modes. Finally they decidewhat kind of display is needed, what the control are, and how toarrange them.

130 | Chapter 2

Interaction Design ProcessBill Verplank suggests a four-step process. First, the designersare motivated by an error or inspired by an idea and decide whatthe ideal goal for the design should be. Next they find a metaphorthat connects the motivation to the end goal and developscenarios to help them create meaning.Then they work out step-by-step what the tasks are and find a conceptual model that tiesthem all together and clarifies the modes. Finally they decidewhat kind of display is needed, what the control are, and how toarrange them.

130 | Chapter 2

Interaction Design ProcessBill Verplank suggests a four-step process. First, the designersare motivated by an error or inspired by an idea and decide whatthe ideal goal for the design should be. Next they find a metaphorthat connects the motivation to the end goal and developscenarios to help them create meaning.Then they work out step-by-step what the tasks are and find a conceptual model that tiesthem all together and clarifies the modes. Finally they decidewhat kind of display is needed, what the control are, and how toarrange them.

130 | Chapter 2

Bill Verplank, Four Steps For Interaction Design Process, Bill Moggridge pag 130.

Page 30: Growing into interaction

30

Un altro metodo per avere informazioni utili alla progettazione basandosi sull’utente è quello creato da IDEO. Il metodo si basa su 51 carte suddivise in quattro categorie Learn, Look, Ask e Try.

Questo metodo incoraggia a un approccio creativo nella ricerca di informazioni.

Ogni card presenta un’immagine, un testo esplicativo su come e quando usare il metodo in questione e un esempio della sua applicazione.

Ponendosi delle domande e traendo spunto dai profili delle carte si otterranno informazioni utili a tracciare il profilo dell’utente. [4]

Ognuno di questi metodi porta alla definizione di un utente con il suo profilo, detto “persona”, in cui si indicherà una fascia di età, una tipologia di vita e lavoro, gli hobbies, e tutto ciò che può servire per avere una scheda dettagliata per la progettazione di un prodotto che sia creato ad hoc per quel genere di utente. Riconosciamo ad esempio gli studenti, i tassisti, ecc... sono tutte persone che hanno in comune delle azioni e delle necessità.

É infine opportuno, nella progettazione, tenere conto non della media delle persone, ma di quelle che hanno più difficoltà a capire il funzionamento dell’oggetto. Questo permette di creare prodotti più semplici da usare. [5]

Note:

Tratto e/o rielaborato da:

[4] Bill Moggridge, “Designing Inter-

actions” 2007. Pagg 665-682.

[5] Sara Kuhn and Terry Winograd

“Bringing Design to Software”, 1996

Thomas Erickson “Notes on De-

sign Practice: Stories and Prototypes

as Catalysts for Communication”

Donald A. Norman, “The Psychol-

ogy of Everyday Things”, 1988 New

York. Pagg 238-274.

Tutto il capitolo è frutto di

un’analisi dei testi assegnati, delle

letture e delle esercitazioni con spunti

da pagine non definite.

IDEO Methods Cards, Bill Moggridge pag. 668.

Page 31: Growing into interaction

31

L’assignement n° 7 proponeva la realizzazione di un’intervista a una persona “reale”. La prima parte consisteva nella creazione di un foglio con domande mirate da porre all’intervistato. L’immagine qui a fianco mostra, in versione riveduta e corretta, l’assignement.

Un errore a cui molte persone sono andate incontro è stato quello di porre domande semplici che portavano a risposte come si e no. Le correzioni che sono state effettuate riguardano appunto le domande poste, in modo da avere risposte più dettagliate.

Nella pagina successiva è stato quindi creato il profilo della “Persona” presa in esame, con rappresentazione dell’interfaccia che potrebbe essere adatta a lui.

Page 32: Growing into interaction

32

- Travels a lot-Works as a computer supervisor-He doesn’t have a good orientation sense- He forgets objects at home- He isn’t able to change buses, trains and airplanes.

27 YEARS OLD3D AND VISUAL EFFECTS SUPERVISOR

Page 33: Growing into interaction

Design dei servizi

Page 34: Growing into interaction

34

Note:

[1] Dan Saffer, “Designing for Inter-

action” 2010. Cap 7-8.

[2] Dan Saffer, “Designing for Inter-

action” 2010. Pagg 156-158.

Negli ultimi anni si è aperto un nuovo campo di attività chiamato design dei servizi.

Esso si propone di realizzare servizi fruibili in modo semplice ed efficace dall’utente.

Per progettare in modo corretto si deve, come detto in precedenza, progettare in base alle esigenze dell’utente tenendo conto di tutti i fattori che possono influenzarne l’uso (luogo, background ecc..). [1]

Durante le progettazione di un servizio viene utilizzato un documento chiamato service blueprint, il quale descrive in modo dettagliato il contesto d’uso del servizio.

Si divide in due parti:• Service moment

dove vengono presentati tutti i momenti di utilizzo e viene creato un servizio per ognuno di essi.

Per ogni service moment il blueprint deve mostrare quali elementi del servizio sono influenzati e come le persone sono coinvolte.

• Service stringquesta parte del documento porta in una forma visuale le ricerche fatte in precedenza. Attraverso uno storyboard si illustrano tutte le azioni possibili con il servizio indicato. [2]

Page 35: Growing into interaction

35

Gli assignement n° 5 e n° 6 si basano sulla progettazione del design dei servizi. In questa pagina è rappresentato il blueprint dell’assignement 6 che chiedeva di progettare l’interfaccia per un chiosco alla fermata del vaporetto della linea arancio per controllare gli orari di navigazione.

BLUEPRINT

Page 36: Growing into interaction

36

In seguito alla progettazione, si passa alla prototipazione, che viene prima messa in pratica tramite una simulazione con oggetti simili a quelli che si proporranno nella situazione di utilizzo, in modo da avere le idee chiare su quello che si progetta. Il prodotto funzionerà se le scelte dell’interfaccia e del supporto permetteranno all’utente di essere in grado di usarlo.

Così come nel design dei servizi il design dei prodotti, deve essere progettato in modo funzionale. Deve essere intuitivo e non portare difficoltà e frustrazione nell’utente.

Norman con 7 regole riesce a condurre il designer a una buona progettazione:

• Usare sia la conoscenza interna che quella esternaEntrambe dovrebbero essere usate senza entrare in conflitto tra di esse. La conoscenza interna è quella che ogni individuo ha e che si è formata tramite l’esperienza. Quella esterna si ricava attraverso vincoli naturali o convenzioni.

• Semplificare la struttura dei compitiOgni cosa deve avere una struttura semplice. Si deve quindi prestare attenzione ai comandi superflui o alle azioni inutili, perché la memoria e l’attenzione umana hanno un limite.

• Rendere visibili le coseOgni azione deve essere ben visibile e corrispondere alle intenzioni dell’utente.

• Impostare bene le correlazioniSfruttando il mapping (vedi cap. 2) è possibile progettare oggetti aventi una correlazione immediata con quello che l’utente ha nella mente.

• Sfruttare i vincoli sia artificiali che naturaliAiutarsi con forme, colori e quant’altro per porre dei vincoli in modo da impostare una e una sola azione possibile con quel comando.

• Lasciare un margine di erroreSi sa che l’utente prima o poi sbaglierà. Permettergli di rimediare al suo errore è un buon modo di progettare.

• StandardizzareSe è possibile far si che comandi simili abbiano le stesse azioni in modo da non confondere l’utente. [3]

Seguendo i consigli elencati in questo booklet, che sono un’analisi dei contenuti dei libri letti, è possibile creare oggetti o servizi che tengono conto di importanti fattori necessari per la progettazione che spesso vengono tralasciati o dimenticati.

Immedesimandosi nell’utente e considerando tutti i fattori che caratterizzano i capitoli precedenti si andrà incontro a una progettazione mirata alle esigenze e si potrà quindi produrre qualcosa di funzionale invece che il solito oggetto o servizio considerato “bello”.

Note:

[3] Donald A. Norman, “The Psy-

chology of Everyday Things”, 1988

New York. Cap 7.

Page 37: Growing into interaction

37

WHAT?

WHY?

WHO?

WHERE?

HOW?

Un chiosco che permette di ottenere tutte le informazioni necessarie sul servizio di navigazione.

Per aiutare gli utenti ad avere un quadro completo degli orari, delle linee e delle tariffe.

É rivolto a tutti coloro che necessitino di informazioni sul servizio di navigazione.

É situato ad ogni fermata del vaporetto, nei punti di informazione turistica e nei luoghi turistici.

Non necessita di una persona che dia informazioni, si usa tramite un touch screen e invia le informazioni allo smartphone in modo da averle sempre sotto occhio.

TOUCH SEE SEND

Nell’Assignement5 si è progettato un chiosco per le informazioni riguardanti il servizio di navigazione tramite l’analisi riguardante al luogo di posizionamento, all’utente, il servizio che offre, come lo offre ecc. Dopo questa analisi si è scelta l’interazione migliore del software e del dispositivo.

Page 38: Growing into interaction

38

La seconda parte dell’assignement n° 6 consisteva nel creare una visualizzazione statica degli orari del vaporetto. L’esempio riportato mostra alcuni orari posizionanti in un cerchio. Tutte le informazioni necessarie sono ben visibili e chiare in modo da essere consultate anche velocemente dall’utente.

Page 39: Growing into interaction

39

Infine bisognava creare l’interfaccia per un servizio dinamico che potesse offrire le stesse informazioni di quello precedente (orari, fermate, tariffe e durata)Prendendo in esame un normale utilizzatore del servizio, sono stati riscontrati i seguenti problemi nella visualizzazione dell’attuale tabella orari: non sono chiari, troppi son quelli da leggere e scritti piccoli, non sempre si vogliono sapere gli orari di tutta la giornata, si fa fatica a capire qual è la tariffa migliore per il viaggio, si deve calcolare la durata del viaggio.

Si è quindi creato un servizio in cui, tramite la compilazione di una tabella circa il luogo di partenza, arrivo, numero di persone e tipologia, orario si possono avere solo le informazioni richieste. Inoltre passando il dito (o il cursore) sulla fermata desiderata è possibile visionare l’intero piano orari oppure con la stessa modalità precedente richiedere le informazioni necessarie.

Page 40: Growing into interaction
Page 41: Growing into interaction

41

Conclusioni

L’interaction design è una disciplina nata di recente, atta a soddisfare le esigenze degli utenti in modo semplice ed efficace.I progettisti devono sempre tenere conto di diversi fattori durante la progettazione, in modo da evitare inutili frustrazioni.

Il compito dell’interaction design è oltre che progettare oggetti nuovi, quello di rendere accessibili alla maggior parte delle persone le tecnologie già esistenti, che spesso spaventano i più abitudinari convincendoli a non comprare prodotti tecnologicamente più avanzati solo perché paiono difficili da usare. La tecnologia infatti spesso spaventa e buona parte degli utenti per evitare inutili frustrazioni e sentirsi incapaci ad usarla la evitano. L’interaction design deve quindi creare, in base all’utente tecnologie accessibili facilmente e senza indurre l’utente a pensare a “cosa deve fare”.

Ognuno può testare l’efficacia dell’interaction design. Basta andare in un qualsiasi negozio, sopratutto dove si vendono elettrodomestici, cellulari, televisioni e tutti oggetti di ultima tecnologia e provare ad usarli. Alcuni risulteranno più semplici e immediati degli altri questo perché il designer ha tenuto conto dei principi di un buon design, quali mapping e modelli concettuali dell’utente permettendo così una buona ed immediata interazione.

Ogni oggetto tiene conto di questi parametri e induce quindi a un’azione possibile e ben visibile, immediata e che faccia leva sulle esperienze passate.

Dopo la lettura di questo booklet, che è il riassunto di quanto imparato e colto durante questo corso, sicuramente si guarderà di più all’interazione con gli oggetti e probabilmente si potranno attribuire più colpe al designer o all’oggetto che non all’utente.

Page 42: Growing into interaction
Page 43: Growing into interaction

43

Colophon

Stesura testi, contenuti, impaginazione, fotografie e progetto grafico a cura di Stella Morelli

Chapter headings : Revelation BTN Regular, 36pt, color= 58, 97, 40, 33.Main text: Revelation BTN Regular, 11pt, color= BlackCaptions: Revelation BTN Regular, 9pt, color= Black 30%Paper: Hello Silck 170 gr/m2 distribuita da Polyedra

Questo booklet è stato realizzato con Adobe InDesign CS5. Tutte le illustrazioni, i disegni, la grafica e le illustrazioni vettoriali come diagrammi e flowmap sono realizzate a mano o con Adobe Illustrator CS5. Le foto sono trattate con Adobe Ligthroom and Photoshop. Tutte le foto senza didascalia sono state scattate da Stella Morelli con una Nikon D90 18-105mm.

Printed by Gaidano e Matta S. n. c. Via Roma, 7 10023 Chieri, Torino.February 2012

Page 44: Growing into interaction
Page 45: Growing into interaction

45

Biblio&Sito-grafia

Moggridge, Bill. 2007. Designing Interactions. Cambridge: MIT Press.

Norman, Donald A. 1997. La caffettiera del masochista. Psicopatologia degli oggetti quotidiani. Florence: Giunti. (Trans. of The Psychology of Everyday Things. New York: Basic Books. 1988.)

Saffer, Dan. 2006. Designing for Interaction: Creating Smart Applications and Clever Devices. Berkeley CA: Peachpit.

Scott MccLoud. Understanding comics: the invisible art. Harpercollins, New York, 1993.

Massimo Vignelli, The vignelli Canon, 2009.

Roberto Lesina, Il Nuovo Manuale di Stile, Zanichelli 2009.

William W. Gaver, Technology Affordances,

Sara Kuhn and Terry Winograd “Bringing Design to Software”, 1996

Thomas Erickson “Notes on Design Practice: Stories and Prototypes as Catalysts for Communication”

Denis Besnard, “Building Dependable Systems With Fallible Humans” articolo.

“Human error in the air: The report on the M1 plane crash at Kegworth”

Tutto il materiale è stato consultato prima del mese di Febbraio 2012

www.newscientist.com

www.asktog.com/papers/magic.html

www.livework.co.uk/

www.cooper.com/journal/personas/

www.disambiguity.com/yes-you-should-be-using-personas/