Interaction Design Booklet by Silvio Lorusso

Interaction Design.I ferri del mestiere/The tools of the trade Silvio Lorusso

Libretto realizzato per il corso di Interaction design theory tenuto da Philip Tabor con Gillian Crampton Smith.

Booklet realized for the Interaction design’s theory course, given up by Philip Tabor and Gillian Crampton Smith.

Facoltà di design e Arti Università IUAV di Venezia

Facoltà di design e Arti IUAV University of Venice

A cura di Silvio Lorusso

Edited by Silvio Lorusso

Composto in ITC Conduit e FF Din

Edited with ITC Conduit and FF Din

2008

Ho consegnato questo documento per l’appello d’esame del 7 Gennaio del corso Interaction Design Theory 1 (Design dell’interazione) tenuto da Philip Tabor con Gillian Crampton Smith 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 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.

I submitted this document for the exam on the 7th of January of the Interaction Design Theory 1 course (Design dell’interazione) given by Philip Tabor with Gillian Crampton Smith at the Facoltà di Design e Arti, IUAV University of Venice. For all word-sequences which I have copied from other sources, I have: a) reproduced them in italics, and b) placed quotation marks at their start and their end, and c) indicated, for each sequence, the exact page number or webpage URL of the original source. For all images which I have copied from other sources, I have indicated: a) the creator and/or owner of the image, and b) the exact page number or webpage URL of the original source. I declare that all other wordsequences and images in this document were written or created by me alone.

Indice/ Content list

Introduction

pag.1

Problem/Opportunity

pag.2

Flowcharts

pag.4

Personas

pag.6

Mental Models

pag.8

Affordance

pag.10

Multidimensional Data Sets

pag.12

Conclusion

pag.14

III

Introduzione/ Introduction

In questo libretto sono brevemente trattati alcuni argomenti riguardanti l’interaction design e non solo.

In this booklet some arguments not only about interaction design are discussed.

Infatti l’interaction design, per sua natura, spazia in molteplici discipline come la psicologia, il design del prodotto, l’informatica, il marketing, etc.

In fact interaction design, for its nature, ranges to several subjects such as psychology, product design, computer, information technology, marketing, etc.

I temi trattati sono cruciali per un buon approccio alla progettazione, per la formulazione delle domande giuste e per gestire al meglio il flusso di lavoro.

The themes discussed are crucial for a good design’s approach, for the formulation of the correct questions and to manage well the working flow.

Gli esempi riportati sono per la maggior parte tratti dalle esercitazioni svolte per il corso di teoria del design dell’interazione tenuto da Philip Tabor e Gillian Crampton Smith.

The reported examples are, for the most part, based on the exercises done for the course of Interaction Design Theory hold by Philip Tabor and Gillian Crampton Smith.

1 Proble m/Oppo rtunity Spesso il cliente che commissiona un progetto, non è del tutto consapevole di quello che vuole, in questo caso il designer avrà l’occasione di creare “opportunità”.

Often the client who commissioned a project, is not totally aware of what he wants, in this case the designer will have the occasion to create “opportunity”.

Per fare ciò il designer si dovrà immedesimare sia nel cliente che nell’utente, e cercherà di sviluppare opportunità per entrambi. Quindi minori costi, funzionalità inaspettate, etc. Si può affermare che la prerogativa maggiore per sviluppare opportunità è quella di non dare nulla per scontato.

In order to do that the designer will have to emphatize both to the client and the user, and he will try to develop opportunity for both. So lower costs, unexpected functionalities, etc. We can say the main prerogative to develop opportunity is not to take anything for granted.

Normalmente nel gergo del design l’opportunità è un sinonimo ottimista di problema, ma in realtà la fase della risoluzione dei problemi è successiva a quella di sviluppo delle opportunità. I problemi risolti permettono la fruizione delle opportunità. Ma, allo stesso tempo, ogni nuovo problema che si presenta può essere motivo di nuove opportunità. Come sempre lo sviluppo di opportunità necessità di una visione totale e profonda del progetto: l’analisi dei target di riferimento, delle informazioni, delle modalità di utilizzo, dei tempi, etc.

Normally in the “design language” opportunity is an optimist synonym of problem, ma in fact the problem’s resolution’ phase is successive to the one of developing opportunities. Solved problems allows the fruition of the opportunities. But, at the same time, every new problem which comes out may be reason of new opportunities. As always the development of opportunities needs a deep and total vision of the project: the analysis of the reference’s target, of the informations, of the functioning, of the using time, etc.

Analisi delle opportunità per un totem che permette agli studenti di iscriversi ai corsi e di visualizzarli. Una disposizione di questo tipo facilita l’intuizione di opportunità inaspettate.

Opportunities’ analysis for a totem which permits to register and visualize courses to the students. An arrangement like this ease the intuition of unexpected opportunities.

Flowch arts Il flowchart è un linguaggio grafico per rappresentare algoritmi. Questo strumento è utilizzato in molteplici settori come l’informatica, l’ingegneria industriale, etc.etc.

Flowchart is a graphic language to represent algorithms. These instrument is used in several fields such as computer science, industrial engineering, etc.

Il primo flowchart strutturato fu proposto nel 1921 dall’ingegnere gestionale Frank Gilbreth come un valido sistema per visualizzare i processi.

The first structured flowchart was proposed in 1921 by the managing engineer Frank Gilbreth as an efficient system to visualize processes.

Nell’ambito dell’interaction design il flowchart è una tecnica di particolare interesse perché può “spezzettare” le azioni a livello variabile: noi tendiamo a vedere come azioni singole insiemi di diverse azioni, il flowchart ci permette di ponderare e decidere il livello di sintesi della nostra descrizione.

Il flowchart ci pone le azioni in un punto di vista di causa ed effetto e in una sequenza temporale, infatti avendo un solo flowchart non è possibile avere due azioni che si svolgono nello stesso lasso di tempo. Inoltre il flowchart per un’interfaccia può avere diversi punti di vista: quello della macchina, quello dell’utente e quello di altri utenti ancora, nel caso dell’interfaccia che metta in comunicazione più utenti . L’utilizzo di post-it nello sviluppo di flowchart è molto efficace perché permette di cambiare immediatamente la sequenza delle azioni. Il maggiore limite dei flowchart è quello di omettere l’aspetto “umano” nell’interazione, quindi immaginare tutto estremamente logico, meccanico. Accostare il flowchart ad altri sistemi di analisi o rappresentazione quali lo storyboard per esempio annulla questo rischio.

In the interaction design’s domain, flowchart is a very interesting technique because it can “dice” actions at a changeable level: we tend to read sets of different action as a single action, flowchart allows us to think and choose the synthesis’ level of our description.

Flowchart shows us actions from a “cause-effect” point of view and in a temporal sequence, in fact if we have only one flowchart we can’t have two actions performing at the same time. Moreover a flowchart for an interface may have different points of view: the one of the machine, the one of the user and the one of other users again, in the case of an interface that puts in touch more users. The use of post-it in the development of flowcharts is very efficient because allows to change immediately the actions’ sequence. The biggest limit of flowcharts is to omit the “human” aspect in the interaction, so to imagine all extremely logic, mechanical. To mix flowcharts with other systems of analysis or representation ,such as storyboards for example, avoid this risk.

Bibliografia /Bibliography Herman Goldstine, The Computer from Pascal to Von Neumann, Princeton University Press, Princeton, 1980

START

take a casserole

pour terrine’s mix in the casserole

cut the bacon

mix

put the bacon in a casserole

take bacon

put spaghetti in the pot

is the mixture homogeneus? cut the bacon

yes

take a terrine

are the spaghetti ready? select yolkes from two eggs

put the bacon in the casserole

put the casserole on heat

is the meal well mixed? put the yolkes in a terrine

take a pot

yes put other two eggs in the terrine

put spaghetti in the casserole

take pepper

put grated cheese in the terrine

pour terrine’s mix in the casserole

put pepper

beat the eggs

mix

put water in the pot yes

take two eggs

put the pot on heat

break the eggs no

pour the meal in the dish

select yolkes

is the water boiling? bring the dish to the table

put the yolkes in the terrine

is the meal well mixed?

is the mixture homogeneus?

take other two eggs

END yes

break the eggs

put the entire eggs in the terrine

take spaghetti

yes

put spaghetti in the pot

take pecorino cheese

yes

put water in a pot

put pepper

put the pot on heat

pour the meal in the dish

grate the cheese

bring the dish to the table

are the spaghetti ready? END

put cheese in the terrine is the water boiling?

take a riding crop yes beat the eggs

put spaghetti in the casserole

Due flowchart che sintetizzano lo stesso processo: la preparazione della pasta alla carbonara, come si può vedere sono possibili diversi livelli di sintesi.

yes

Two flowcharts sintetizing the same process: the preparation of pasta alla carbonara, as you can see different syntesis’ levels are possible.

Pers onas Le “Personas” sono dei personaggi inventati con lo scopo di essere i soggetti, cioè gli utenti, del progetto di interazione.

Essi sono basati su una ricerca precedente che ha dato come risultati i vari segmenti per i quali si progetta, quindi una definizione stereotipata dei vari “tipi” di utenti che fruiranno del progetto. Questa definizione non è sufficiente per immedesimarsi nei bisogni, nei desideri, nei gusti, nelle aspirazioni degli utenti. La persona, essendo reale almeno quanto un personaggio di un film permette questa immedesimazione. Essendo la “veridicità” l’obiettivo, per definire una persona può essere necessario creare una storia, descrivere la vita del personaggio e in generale anche aspetti che sono fuori dall’ambito del progetto. La descrizione terrà conto anche delle eccezioni raccolte nella ricerca, in modo tale che il personaggio abbia una personalità più spiccata.

Scegliere una foto della persona è utilissimo: visualizzare il personaggio spinge immediatamente a credere nella sue effettiva esistenza e inoltre stimola la curiosità. A questo scopo la foto dovrà essere casuale, veritiera, come scattata nello svolgersi della vita. Per quanto riguarda i contenuti, la forma dell’intervista è consigliabile perché fa in modo che la persona si racconti da sola e che l’autore scompaia. Un’altra possibilità è quella del video in cui il personaggio si racconta oppure un insieme scritto di citazioni. Il designer è portato a progettare per se stesso, quindi a considerare i suoi bisogni, il suo livello culturale, etc. Le persona spostano l’attenzione su di loro e ogni volta che il designer progetterà consulterà idealmente la persona.

Personas are fictional charachters made-up as subject, or rather the users, of the interaction’s project. They are based on a previous research which gave as results the various segments that we project for, so a stereotyped definition of the several “kinds” of users will use the project. This definition is not sufficient to empathize with the needs, the desires, the tastes, the aspirations of the users. The persona, being as real at least as a movie character allows this identification. Being the “truthfulness” the aim, to define a persona may be necessary to create a story, to describe character’s life and in general also aspects out of the project’s field. The description will even consider the exceptions collected during the research, in order that the character has a stronger personality. Choosing a picture of the persona is very useful: to visualize the character encourages immediately to believe in his real existence and it stimulate curiosity as well. For this aim picture will be casual, truthful, as shooted in real life. As regards contents, the form of the interview is advisable because persona tells about him/herself on his/her own and the author disappear. Another possibility is a videoclip in which the character tells about him/ herself or a series of quotations. The designer tend to design for himself, so to consider his needs, his cultural level, etc. Personas move the attenction on themselves and everytime the designer will design, he will consult ideally persona.

Bibliografia /Bibliography John Pruitt, Tamara Adlin, The Persona Lifecycle : Keeping People in Mind Throughout Product Design, Elsevier, San Francisco, 2006

y name’s Paolo, I’m 23 years old and I live in Venice. I study economy applied to art, I’m from Fano but I live in Venice in a house with other 5 people, three girls and two guys. I really love cinema, I’ve got “Scarface” poster in my room! I don’t like mess, but my room is quite messy. Every day I try to wake up early but I never succeed. I wear the first shirt I find and then I run t o lesson. I come back home for dinner then I go out again. Yesterday I fell asleep reading John Fante. In my life I’d like to organize music festivals, events, exhibitions. I like creativity but I prefer to stay offstage. I hate shaving myself, washing the dirty dishes, doing the washing. I like reading and staying with my friends. Recently I am single, I’m not shy at all but I am a romantic person I guess. I wear casual, I don’t pay too much attenction to brands, I prefer comfortable dresses.

Persona creata per LAUNDRETTE, un sistema interattivo per lavatrici che aiuta l’utente. Un display con alcune informazioni e una mini-tastiera oppure un touch screen. Persona designed for LAUNDRETTE, an interactive system for washing machines which helps the user. A display with certain informations and a mini-keyboard or a touch screen.

Mental models Un modello mentale è la spiegazione mentale di come qualcosa funziona nella realtà. Spesso non conosciamo il reale funzionamento di oggetti che usiamo quotidianamente, ma tendiamo a semplificarne il meccanismo. Un piccolo esempio, quando facciamo la spesa, vediamo che la commessa passa i nostri acquisti su una superficie con una luce rossa e ogni passaggio fa bip; a noi non serve necessariamente sapere cos’è e come funziona un codice a barre, ma ci accontentiamo di immaginare che lì ci sia un occhio che “vede” gli acquisti e ci dica i prezzi. Non è detto che il modello mentale debba essere sviluppato inconsciamente dall’utente, ma può essere progettato direttamente dal designer per facilitargli la vita. Più le funzionalità sono complesse, più c’è bisogno di un modello mentale semplice. Come sempre, il modello mentale progettato deve tener conto dell’utente finale, quindi considerare il livello culturale, le conoscenze medie.

Il modello mentale è stato teorizzato nel 1943 da Kenneth Craik, quindi non è un concetto contemporaneo ma negli ultimi tempi sta assumendo una presenza rilevante a causa dello sviluppo sempre maggiore dei software, ci troviamo sempre di più di fronte a mondi che ne nascondono altri. Per economia di tempo e di pensiero siamo sempre più lontani dagli strumenti che utilizziamo, ma da un altro punto di vista siamo molto più vicini perché sono più familiari, più umani. In questo senso è illuminante un racconto di Isaac Asimov nel quale si immagina che l’umanità abbia dimenticato come si fanno i calcoli.

A mental model is the mental explanation of how something works in reality. Often we don’t know the real functioning of the object we use everyday, but we tend to simplify the mechanism. A little example, when we go shopping, we see the shop assistant moving our purchases through a surface with a red light and a beep; we don’t need necessarily to know what is and how a barcode works, but we are satisfied to wonder there is an eye “sees” the purchases and says the prices. Not necessarily mental model has to be developed unconsciously from the user, but it may directly designed by the designer in order to ease the things. The more complex functionalities are, the more we need a simple mental model.

As always, the designed mental model has to consider the final user, so it has to consider the cultural level, the average knoledges.

Mental model was theorized in 1943 by Kenneth Craik, so is not a contemporary concept but in the last years it’s gaining a relevant presence because of the development in great measure of softwares; we move ever more in worlds that hides others. Because of lack of time and thoughts we are more and more far from the tools we use, but from another point of view, we are very near because they are more familiar, more human. In this sense a tale by Isaac Asimov is illuminating, because it tells about humanity who forget how to make counts.

Bibliografia /Bibliography Kenneth Craik, The nature of explanation, Cambridge U.P., Cambridge, 1967 Isaac Asimov, Nine times seven, in The best science fiction, New Amer Library, London, 1988 8

Uno storyboard per un distributore di caffè e the, il modello mentale utilizzato è quello del desktop: con un touchscreen l’utente avrà l’impressione di versare lui stesso il caffè e gli altri ingredienti nella tazza.

A storyboard for a tea and coffee dispenser, the mental model used is the desktop: with a touchscreen the user will have the impression of pouring the ingredients in the cup by himself.

Afforda nce L’affordance è l’aspetto fisico di un oggetto che permette all’utilizzatore di dedurne le funzionalità o i meccanismi di funzionamento. Il termine è stato introdotto nel 1966 dallo psicologo James J. Gibson. Egli si riferiva alle possibilità di azione percepibili tra il mondo e un “attore” (persona o animale). Grazie ad esse noi compiamo azioni nel mondo. A volte esse sono nascoste, pericolose, inaspettate.

Un cilindro che fuoriesce dalla superficie di un oggetto è probabilmente un pulsante. Questo viene percepito perché la volontà è quella di livellare la superficie. L’affordance può essere intesa anche negativamente: un certo aspetto fisico può mostrare che un tipo di azione è impraticabile. Al giorno d’oggi risulta difficile valutare se l’affordance è caratteristica dell’oggetto o convenzione acquisita. L’oggetto è acceso quando il pulsante fuoriesce oppure quando è allo stesso livello della superficie? Probabilmente la seconda delle due, ma lo sappiamo grazie all’esperienza di una convenzione. L’affordance è probabilmente il primo ambito da sviluppare in un’interazione, perché è il primo aspetto che interagisce con l’utente, lo informa del funzionamento dell’oggetto, gli suggerisce dove mettere le mani, o dove non metterle. Si può dire che lo studio dell’affordance è a metà tra l’ergonomia e il pensiero estetico del Movimento Moderno. Non è un sinonimo di ergonomia perché essa si pone anche altre questioni quali la sicurezza, il comfort, etc. Mentre il rapporto col Movimento Moderno è nell’assunto che “la forma segue la funzione”.In realtà non è detto che la forma, seguendo la funzione, riesca a suggerirla.

Affordance is the physical aspect of an object which allows the user to understand the functionalities or the functioning. The term was introduced in 1966 by the psychologist James J. Gibson. He refers to the possibilities of action perceivable between the world and an “actor” (person or animal). Thanks to affordances we make actions in the world. Often they are hidden, dangerous, unexpected.

Probably a cylinder which comes out from the surface of an object is a button. This is perceived because the will is to level the surface. Affordance may also be read negatively: a certain physical aspect may show a kind of action is unworkable. Nowadays It’s difficult to understand if the affordance is a feature of the object or an acquired convention. The object is one when the button comes out or when it is at the same level of the surface? Probably the second of the two, but we know it because of the experience of a convention. Probably affordance is the first domain to develop in an interaction, because is the first aspect that interacts with the user, it inform him of the object’s functioning, it suggest him where to put his hands, or where not to put them.

We can say the affordance’s study is between ergonomy and the aestethic thought of the Modern Movement. It’s not a synonym of ergonomy because it cares about other problem such as security, comfort, etc. Instead the relationship with the Modern Movement is in the task that “shape follows function”. In fact not necessarily shape, following function, can suggest it.

Bibliografia /Bibliography Don Norman, The Psychology of everyday things, Basic Books, New York, 1988 James J. Gibson, The Ecological Approach to Visual Perception, Houghton Mifflin, Boston, 1979 Louis Sullivan, The tall office building artistically considered 10

L’affordance di oggetti comuni conformati da una storia millenaria. The affordance of common objects conformed by a thousand-year history.

La forma concava del cucchiaio suggerisce la possibilità di contenere qualcosa. The concave shape of the spoon suggests the possibility of containing something.

La seghettatura del coltello, forse per convenzione, indica l’azione di tagliare. The jagged of the knife, maybe for convention, heads the action of sawing.

Le punte della forchetta rimandano immediatamente all’idea di infilzare. The fork’s points imeediately refer to the idea of pierce.

Il manico del coltello è diverso da quello della forchetta, questo perchè il modo di inpugnarli è differente. The knife’s handle is different from the fork’s one; that’s because the way of handle them is different.

Multidi mens ional da ta sets I sistemi di informazioni multidimensionali sono un potente strumento per disporre una grande mole di informazioni e relazionarle fra di loro. Il numero di dimensioni è variabile, se ne può avere una sola , come nel caso della time-line, o moltissime.

La strutturazione dell’informazione attraverso gli strumenti della grafica permette di cogliere in maniera immediata il sistema. Le variabili visuali possibili sono il tono, la texture, il colore, l’orientamento, la forma, e la dimensione. Nello sviluppo di sistemi complessi di informazioni la prima domanda da porsi è: “Cosa vuole sapere l’utente?”. Poi “A cosa gli serve l’informazione?”. In generale un’analisi del rapporto tra l’utente, l’informazione e il mezzo interattivo.

Passando dalla carta stampata allo schermo i vantaggi sono molto rilevanti: le informazioni nello spazio non sono necessariamente statiche, quindi se ne possono nascondere alcune in modo da metterne in risalto altre. Le animazioni permettono di avere diagrammi dinamici, quindi il focus sull’informazione voluta è più semplice. Su diagrammi complessi sono possibili operazioni quali lo zoom, il panning, etc. in un certo senso non sono le informazioni a muoversi ma l’impressione è quella di possibilità di muoversi tra le informazioni. Inoltre la fruizione e l’interazione può essere multisensoriale: muoversi con le dita, comandi vocali, etc. Molto spesso capita di trovare su internet sistemi complessi che forniscono informazioni senza mostrare le fonti, i calcoli effettuati. Questo è il rovescio della medaglia. In un’epoca in cui l’informazione è valore, il veicolarla in maniera corretta acquista un peso fondamentale.

Multidimensional data sets are a powerful tool to manage a big quantity of informations and to link them together. The number of dimension is variable, we can have one, as in the time-line case, or we can have a lot.

The structuration of the information through the graphic tools allows to read immediately the system. The possible visual variables are tone, texture, colour, orientation, shape and size.

In the development of complex systems of informations the first question to answer is: “What do the user want to know?”. Then “What will he do with this informations?”. In general an analysis of the relationship between the user, the information and the interactive media. Passing from the printed paper to the screen the advantages are very relevant: the informations in the space are not necessarily static, so we can hide some in order to concentrate the attention on others. Animations allows to have dynamic diagrams, so the focus on the information is simplier. On complex diagrams operations like zooming and panning are possible. In a way the informations don’t move, but the impression is the possibility of moving around the informations. Moreover fruition and interaction may be multisensorial: moving with the fingers, vocal features, etc.

Very often we find on the net complex system which give us informations without showing the sources, the counts done. This is the drawback. In an era in which the information means value, to spread it correctly acquires a fundamental weight.

Bibliografia /Bibliography Robert Jacobson, Information Design, MIT press, Boston, 1999 Sitografia/Sitography www.visualcomplexity.com 12

presenze

19.00

18.00

60%

70%

31%

90%

Laboratorio di design dei tipi

Leonardo Sonnoli

magazzini ligabue

17.50 17.15

17.15

17.00 16.30 16.00

15.00

tempo libero

14.00

13.00

Teoria della comunicazione

12.00

13.00

Giovanni Anceschi

Teoria della comunicazione

13.00

mensa

Interaction Design Theory

Giovanni Anceschi

13.00

Storia della grafica

10.30

Carlo Vinti

10.00

Storia della grafica Carlo Vinti

9.00

lun ed ì

presenze

ma r

me rc ole dì

te dì

30%

Un grafico che mostra gli orari delle lezioni, gli orari effettivi, i corsi, i professori, il tipo di corso , il tempo libero, i luoghi delle lezioni, la percentuale di presenze.

60%

gio ve dì

ve ne rd ì

20%

52%

A set showing lessons’ timetables, the actual hours, courses, teachers, the kind of courses, free time, lessons’ places, presence’s percentage.

13.00

terese

Philip Tabor Gillin Crampton Smith

11.00

Interaction Design Theory

11.00

Conclusione/ Conclusion

L’interaction design, come peraltro il design in generale, è in continua evoluzione. I concetti e le idee espressi in questo booklet devono essere ogni giorno implementati e confrontati con la realtà. Perchè la progettazione ha sempre bisogno di un duplice punto di vista che sappia guardare sia alla metodologia, alle problematiche e alla teoria ma anche alla realtà in movimento ed in evoluzione. L’interaction designer, progettando comportamenti, deve essere ancora più vicino alla realtà, alla società ed infine all’uomo.

Interaction design, as design in general, is always in evolution. The ideas and concepts discussed in this booklet have to be implemented and compared with reality everyday. Beacuse design always needs a double point of view which is able to watch both the metodology, the problematics, the theory and the reality in evolution. The interaction designer, designing behavoiurs, must be more colose to reality, to society and in the end to man.