Ixd booklet

INTERACTION DESIGN

Alessandro Mattiuzzo

Alessandro Mattiuzzo

Interaction design

Dichiarazione di originalità

Ho consegnato questo documento per l’appello d’esame del 31/01/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) riprodotte in corsivo, o messo virgolette di citazione al loro inizio e fine, inoltre b) indicato, per ogni sequenza, il numero della pagina o lo URL del sito web della fonte originale. Per tutte le immagini che ho copiato da altri fonti, ho indicato: a) l’autore e/o proprietario, inoltre b) il numero della pagina o lo URL del sito web della fonte originale.

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

11/01/2013 Alessandro Mattiuzzo

Indice

1. Introduzione

7

2. Un ambiente intelligente

8

3. Affordance e mapping

10

4. Personas

12

5. Storyboards e flowcharts

14

6. Metafore

16

7. Informazioni dinamiche

18

8. Conclusione

21

9. Colophon

23

10. Fonti

25

5

Introduzione

In un mondo dove le tecnologie e le connessioni sono parte integrante della nostra vita il rapporto che intercorre fra noi e gli oggetti multimediali assume oggi un’importanza sempre maggiore in quanto questi ci consentono di comunicare ed interagire con le altre persone.

L’interaction design trae fonte da svariati campi del sapere che spaziano dal design del prodotto a quello della comunicazione, fino ad arrivare all’antropologia e alle tecnologie dell’informazione.

Questa disciplina pone le sue fondamenta sui bisogni e sui desideri delle persone in modo da progettare artefatti che soddisfino le aspettative degli utenti per cui sono stati progettati garantendo loro anche un’adeguata dose di soddisfazione. Il suo scopo è quello di cercare di migliorare l’interazione fra gli utenti e gli oggetti di uso quotidiano fornendo ai progettisti gli strumenti utili al raggiungimento dello scopo prefissato; ed agli utenti un modo facile, intuitivo e soddisfacente di fruire dell’oggetto stesso.

Questo libretto si pone come un’utile strumento per comprendere i principi fondamentali di questa disciplina al fine di ottenere un’utile e corretta progettazione.

7

Un ambiente intelligente

Al giorno d’oggi siamo circondati da artefatti digitali come ad esempio i telefoni cellulari che costituiscono un elemento in continua crescita all’interno delle società moderne. La cosa importante da tenere a mente quando si progetta un artefatto o un oggetto interattivo è quella di pensare alle persone che dovranno utilizzarlo.

Gli oggetti tecnologici odierni come ad esempio il telefono cellulare richiedono una costante attenzione per il loro utilizzo a causa delle molteplici interazioni che dobbiamo portare a termine con essi per ottenere ciò che vogliamo. Sarebbe bello poter avere in futuro oggetti tecnologici che si autogestiscano ed emergano dallo sfondo solo quando l’utente ne ha davvero bisogno perché altrimenti si corre il rischio di diventare schiavi di questi ultimi mettendo in secondo piano le relazioni umane.

Questi nuovi devices riescono a modificare le nostre abitudini e i nostri comportamenti riuscendo così a condizionare la nostra vita se non gli assegniamo il giusto peso ed il giusto spazio lasciando in primo piano le relazioni umane.

Nel prossimo futuro si assisterà probabilmente alla nascita di una vera e propria rete che connetterà non solo noi stessi, ma anche tutti gli oggetti che ci circondano, ci saranno software in ogni oggetto, dai libri ai pacchi postali, ai frigoriferi, fino ad arrivare a veri e propri sensori integrati negli indumenti di ogni giorno. Nascerà quello che oggi viene chiamato l’internet delle cose che metterà in comunicazione tutte le cose tra loro attraverso i sensori che invieranno i dati direttamente alla rete in modo da avere maggiore mondo fisico connesso con quello digitale. I nuovi prodotti concepiti capiranno e anticiperanno le nostre esigenze seguendo uno dei concetti chiave dell’interaction design che consiste nel creare prodotti che anticipino i bisogni delle persone collezionando dati e presentandoli in una nuova veste più significativa per le nostre esigenze. I designers inoltre dovrebbero impegnarsi per rendere disponibile la tecnologia anche a persone che ancora non possono permettersela migliorando la loro qualità di vita.

8

Storyboard che illustra nelle varie fasi della giornata come la tecnologia renderà l’ambiente intelligente.

9

Affordance e mapping

Il termine affordance “indica le proprietà reali e percepite delle cose materiali, in primo luogo quelle proprietà fondamentali che determinano per l’appunto come si potrebbe verosimilmente usare la cosa in questione”. Una lente di ingrandimento ci invita ad essere impugnata sul manico a causa della sua forma; perché se la impugniamo dalla parte della lente questa risulta scomoda ed inoltre copriamo con la mano quello che la lente dovrebbe ingrandire.

Progettare gli oggetti con una buona affordance non è sempre facile in quanto questa è influenzata da altri fattori oltre che dalla forma dell’oggetto stesso; come la cultura in cui l’oggetto con quella determinata affordance risiede ed il campo di applicazione dell’oggetto nella sua specifica funzione d’uso.

Per esempio noi sappiamo che un pulsante si preme perché la nostra cultura e la nostra esperienza ce lo suggerisce.

La difficoltà per il designer nel progettare gli oggetti o servizi interattivi sta nel fatto che deve pensare a come le persone li useranno e se utilizzandoli otterranno lo scopo voluto oppure se gli utenti riusciranno addirittura a trovare nuove funzioni agli oggetti che non avevano pensato nemmeno i loro progettisti.

Il mapping invece riguarda la disposizione degli elementi nell’interfaccia di un dispositivo e la correlazione fra i suoi elementi disposti nello spazio e il nostro modello mentale di come far realmente funzionare quel dispositivo per compiere un’azione specifica come ad esempio azionare la giusta manopola per accendere il fornello del gas. Il mapping è tanto migliore quanto più naturale risulta essere per l’utente l’azione che deve compiere per portare a termine il suo scopo in modo che le volte successive che dovrà compiere quella determinata azione non si sforzi più a pensare come deve eseguirla nel modo corretto, ma gli venga in modo del tutto naturale.

10

GOOD AFFORDANCE ▶ THE LENS CAN BE GRASPED ONLY ON THE BLACK HANDLE TO FOCUS ON SOMETHING ▶ GRASPING IT ON THE LENS IS NOT USEFUL AND COMFORTABLE

▶ THE STEAM IRON INVITES YOU TO GRASP IT ONLY ON THE CORK HANDLE BECAUSE OF THE WEIGHT OF THE IRON THAT PULLS DOWN AND BECAUSE OF THE HOT IRON WHEN IT IS SWITCHED ON

▶ THE HOURGLASS CAN BE GRABBED IN ANY WAY ▶ IF YOU PUT IT HORIZONTALLY NOTHING HAPPENS, BUT IF YOU PUT IT VERTICALLY YOU CAN SEE THE FLOWING DOWN OF THE SAND

GOOD MAPPING

BAD AFFORDANCE ▶ TO SET THE TIME FOR THE ALARM YOU HAVE TO TURN COUNTERCLOCKWISE THE WHEEL ON THE CLOCK ▶ IF YOU ARE NOT FAMILIAR WITH IT YOU CAN’T SEE THE LITTLE ARROW THAT SUGGESTS YOU TO TURN IT COUNTERCLOCKWISE

▶ ONLY IF YOU KNOW THAT THE BLACK RING HAVE TO BE PULLED DOWN AND YOU KNOW THAT THIS IS A WHISK YOU ARE ABLE TO USE THIS OBJECT PROPERLY

▶ ONLY IF YOU KNOW THAT OBJECT YOU ARE ABLE TO USE IT PROPERLY, OTHERWISE YOU CAN TRY TO USE IN SOME WAY AND MAYBE YOU CAN FIND THAT THIS IS A BAG HOLDER

BAD MAPPING

▶ ALL THE KEYS OF THE CORDLESS PHONE ARE ARRANGED IN A REASONABLE WAY

▶ ALL THE KEYS HAVE THE SAME DIMENSIONS AND SHAPE AND ARE PLACED JUST ONE UNDER THE OTHER

▶ FOR EXAMPLE THE PHONE BOOK KEY IS PLACED JUST OVER THE GREEN ANSWERING CALL KEY

▶ YOU HAVE TO READ THE INDICATIONS TO KNOW HOW TO USE THE REMOTE CONTROL

▶ IN THIS PORTABLE RADIO ALL THE CONTROLS FOR TUNING, AM-FM AND VOLUME ARE PLACED JUST ON THE RIGHT SIDE IN CORRESPONDENCE OF THE INDICATORS ON THE FRONT

▶ THIS THERMOSTAT HAS ALL THE KEYS PLACED IN THE SAME POSITION ONE CLOSE TO THE OTHER AND THE INDICATIONS ARE PLACED HORIZONTALLY AND VERTICALLY ACROSS THE KEYS

▶ THE MAIN FUNCTIONS ARE PROVIDED BY THE SLIDING BAR ON THE RIGHT AND THE GREEN BUTTON IS JUST TO SET THE TIME (MINUTES AND SECONDS)

▶ FOR EXAMPLE ON THIS REMOTE CONTROL THE KEYS TO CONTROL TV PROGRAMS AND VOLUME ARE ARRANGED TOGETHER, BUT THE UP CONTROLS OF THE VOLUME AND TV PROGRAM ARE CLOSER THAN THE CORRESPECTIVE DOWN KEY

▶ TO SWITCH OFF JUST PULL DOWN THE RIGHT BAR

Tabella che illustra e spiega esempi di affordance e mapping analizzando oggetti quotidiani.

11

Personas

Con il termine personas si intendono dei gruppi di possibili utenti che condividono tra loro caratteristiche comuni appartenenti a persone reali come ad esempio i comportamenti (cosa fanno le persone e come si comportano), gli obiettivi e le motivazioni (quali sono le ragioni che li spingono a fare un’azione) e le aspettative (quello che gli utenti si aspettano da un prodotto). Questi gruppi di persone tipo sono molto importanti perché individuando le principali caratteristiche dei possibili utenti si riescono a progettare in maniera efficace ed efficiente i prodotti o i servizi per cui sono stati pensati.

Queste diverse personas, ognuna con caratteristiche diverse vanno categorizzate e classificate dandogli un nome, un aspetto e una serie di altri dettagli come la nazionalità, gli hobby, gli interessi, cosa gli piace, cosa non gli piace etc. che le identifichino come fossero delle vere e proprie persone.

Progettare utilizzando le personas come possibili utenti è molto importante specialmente per progetti molto complessi ed articolati in quanto per i designers è importante progettare non per degli utenti generici che possono essere utilizzati per qualsiasi scopo, ma utilizzando dei modelli ben definiti di utenti in modo da svolgere un’accurata e mirata progettazione.

Il numero delle personas che devono essere considerate in un progetto, a meno che non si tratti di un servizio su scala globale, solitamente deve essere compreso tra uno e nove perché utilizzarne troppe comporterebbe solamente una grande confusione ai progettisti e non focalizzerebbe l’attenzione su nessun utente in particolare provocando un progetto non ben definito.

Le personas utilizzate da sole non sono molto utili perché queste vanno integrate ed inserite in scenari d’uso specifici in modo che possano esprimere al meglio le loro caratteristiche ed essere utilizzate dai designers per testarne le funzionalità o determinare l’utilità di un prodotto o servizio.

12

Tavola che identifica quali potrebbero essere le personas da utilizzare in un’applicazione per trovare ristoranti a Treviso.

13

Storyboards e flowcharts

I flowchart sono degli schemi detti diagrammi di flusso composti da un punto iniziale di un azione e un punto di arrivo finale, nel mezzo vengono elencati tutti i passaggi per arrivare dal punto iniziale a quello finale includendo le possibili scelte da fare durante il percorso. Vengono impiegati per organizzare le operazioni che devono essere fatte per compiere una determinata azione impiegando dei segni grafici semplici come ad esempio le frecce e alcune forme geometriche elementari come rettangoli (per descrivere le azioni) e rombi (per le scelte) per esprimere nel modo più chiaro possibile la corretta sequenza delle azioni da eseguire per portare a termine una determinata azione.

Vengono utilizzati nel campo dell’interaction design perché consentono di comprendere immediatamente la logica nello svolgimento di un’azione o gli errori presenti in queste, come ad esempio se è stato saltato qualche passaggio di un’azione.

Questo tipo di schemi consentono ai designers di progettare tenendo conto della sequenza di azioni che l’utente deve compiere per portare a termine un determinato compito e se il modello concettuale immaginato dal designer corrisponde con quello nella testa dell’utente che sta utilizzando il prodotto o servizio.

Durante le fasi iniziali della tracciatura del diagramma di flusso può inoltre essere utile utilizzare i post-it per assegnare l’ordine delle varie azioni in modo che se ne va cambiata qualcuna perché per esempio il gruppo di lavoro nota che quell’ordine o quella determinata azione non vanno bene è possibile farlo in modo rapido e semplice senza dover per forza rifare tutto il diagramma da capo.

I diagrammi di flusso rappresentano le informazioni in modo molto schematico e asettico e non rendono bene l’idea del modo in cui l’utente deve compiere determinate azioni; per questo i flowchart possono essere integrati dagli storyboards che non sono altro che delle vignette illustrate con eventuali testi di spiegazione che mostrano lo scenario d’uso in cui l’utente svolge le sue azioni.

14

Flowchart che illustra il procedimento per selezionare la bevanda desiderata ad un distributore automatico.

15

Metafore

Le metafore nell’interaction design vengono utilizzate per rappresentare una cosa che sembra sconosciuta e di difficile comprensione in qualcosa che ci è più familiare e che riusciamo a focalizzare meglio nella nostra mente.

Le persone quando si apprestano ad utilizzare un’oggetto o un servizio che non hanno mai provato prima provano a capire come funziona facendosi un modello mentale di come si potrebbe utilizzare tale prodotto basandosi su ciò che è loro familiare e che possono comprendere in base alla loro esperienza. Le metafore sono un tipo di modello mentale che mette in correlazione concetti conosciuti e assodati con concetti sconosciuti al fine di facilitare la comprensione di questi ultimi.

Possono essere utilizzate per rappresentare sistemi digitali che sono principalmente astratti come ad esempio le interfacce grafiche dei software; la più famosa è sicuramente la metafora del desktop, la scrivania nei computer, che riprende parte degli elementi di una scrivania reale come le cartelle, i fogli di lavoro, il calendario, la calcolatrice, il blocco note etc. e li trasporta virtualmente nell’interfaccia grafica del sistema operativo mantenendo parte delle caratteristiche reali degli oggetti per rendere più comprensibile il sistema all’utente.

Dato che l’interaction design è al servizio delle persone, la cosa migliore sarebbe far testare le metafore agli utenti in modo che possano esprimere la loro opinione e dare dei consigli su come migliorarle.

Le metafore tuttavia presentano dei punti deboli in quanto non consentono di essere modificate con il passare del tempo e quindi se estese in modo eccessivo a tutti gli elementi del sistema possono perdere la loro efficacia in quanto non c’è più una diretta correlazione fra il mondo reale e quello metaforico come ad esempio l’interfaccia per la lettura digitale dei libri che imita lo sfogliare delle pagine senza tenere conto che in quelle digitali le immagini si possono ingrandire e ci può essere la presenza di video che in un libro non potrebbero mai esistere.

16

Illustrazione che utilizza la metafora della gallina come paragone per spiegare le varie tipologie di entrate ed uscite in un bilancio familiare.

17

Informazioni dinamiche

Le informazioni statiche vengono utilizzate per rappresentare informazioni di vario tipo siano esse dati astratti e puramente numerici o una lista di azioni da eseguire per portare a termine un determinato compito. Questo tipo di visualizzazione delle informazioni si basa principalmente su elementi grafici come segni e testi disposti al fine di esplicare o di facilitare la comprensione di un determinato oggetto, come possono esserlo ad esempio i manuali d’uso. Data la loro caratteristica di essere fisse e non cambiare nel tempo o in seguito a sollecitazioni esterne, devono essere progettate con cura tenendo conto anche delle varie categorie di utenti che fruiscono delle informazioni. Ci possono essere utenti più o meno esperti in un determinato campo e quindi bisogna tenerne conto disponendo le informazioni in modo che risultino facilmente comprensibili per la prima volta agli utenti meno esperti e fare in modo che quelli con più pratica risalgano immediatamente all’informazione che stavano cercando. Questo tipo di concetto si può applicare ad esempio ad un software moderno dove alla prima apertura vengono fornite le istruzioni su come utilizzarlo al meglio in tutte le sue funzionalità con un mini tutorial, ma viene anche concessa la possibilità per gli utenti più esperti, che hanno una maggiore familiarità con il software, di scoprire soltanto le nuove funzioni gratificandoli con un minor spreco di tempo impiegato per trovarle.

Queste modificazioni sono rese possibili dall’impiego di informazioni dinamiche che quindi possono essere impiegate su schermi e diventare interattive; fornendo solamente le informazioni realmente necessarie in quel determinato istante queste possono essere nascoste o spostate a piacimento garantendo un maggior coinvolgimento dell’utente e una semplificazione d’uso dell’attività stessa. Se prima per controllare che strada percorrere in seguito ad una deviazione bisognava utilizzare la cartina, ora è possibile spostarsi attraverso la mappa virtuale del nostro telefono cellulare e selezionare il punto desiderato senza dover cercare o avere il dubbio di aver sbagliato strada.

18

In alto, mappa di come possono essere visualizzate le fermate e gli orari di una linea di vaporetto a Venezia; in basso, come le stesse informazioni possono essere visualizzate in modo dinamico in un’applicazione.

19

Conclusione

Al giorno d’oggi i designer dell’interazione stanno acquisendo sempre più importanza, visto il numero crescente di società di servizi che necessitano di progettare l’interazione fra gli utenti e il loro prodotto.

I designer quando progettano devono essere consapevoli della natura del proprio progetto e delle conseguenze che l’interazione con esso può comportare agli utenti.

Promuovendo dei bisogni il designer deve valutare attentamente mantenendo un profilo che non prevalga sull’etica e sulla dignità umana perché il mezzo principale di questo tipo di design sono le persone che vanno perciò salvaguardate.

21

Colophon

Scrittura testi, impaginazione, fotografie e progetto grafico a cura di Alessandro Mattiuzzo.

Titoli: Whitney Semibold, 16pt, color= 0, 0, 0, 100.

Testi: Chronicle Text G1, 12pt, color= 0, 0, 0, 100.

Didascalie: Whitney Semibold, 9pt, color= 0, 0, 0, 100.

Questo booklet è stato realizzato con adobe InDesign CS6.

Tutte le illustrazioni, i digrammi e i disegni sono state trattate con Adobe Photoshop CS6.

Stampato da Eliografia 4Esse, Viale Giuseppe Verdi, 9, Treviso.

Febbraio 2013.

23

Fonti

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

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

Saffer, Dan. Design dell’interazione. Creare applicazioni inteliigenti e dispositivi ingegnosi con l’interaction design. Milan: Pearson Education 2009 (Trans. of Designing for Interaction: Creating Smart Applications and Clever Devices).

Vignelli, Massimo. The Vignelli Canon. 2009.

25