antonio altomare's thesis report by antonio altomare

Interactive history of graphic design Un sistema di data visualisation sulla storia della grafica.

Antonio Altomare

Interactive history of graphic design Un sistema di data visualisation sulla storia della grafica.

Antonio Altomare matricola 269563 AA 2010-2011

UniversitĂ Iuav di Venezia FacoltĂ di Design e Arti Corso di Laurea Magistrale in Design Comunicazioni Visive e Multimediali

Sessione di laurea Aprile 2012 Relatori: Gillian Crampton Smith, Philip Tabor

Indice

Abstract

Introduzione

Ricerca

1.1 1.2 1.3 1.4 1.5 1.6 1.7 1.8 2

Iter progettuale 2.1 2.2 2.3 2.4

Data visualisation Zipcode Timeline Dati numerici Cinemetrics Elementi interattivi: timeline e mappe Network di dati Cluster analysis

Primi approcci di data visualisation Una storia interattiva del graphic design Tipi di visualizzazione Personas

Progetto finale 3.1 3.2 3.3 3.4 3.5 3.6 3.7

Interfaccia: List Interfaccia: Map Interfaccia: Net Interfaccia: Timeline Aspetti generali Elemento base Text analysis

17 21 23 26 29 31 33 38 41 43 47 51 56 59 61 63 66 68 73 75 77

Conclusione

Ringraziamenti

Indice delle immagini

Bibliografia

Sitografia

Colophon

Abstract

Interactive History of Graphic Design consiste in un progetto di un’interfaccia volta alla rappresentazione, attraverso modalità di data visualization, della storia del graphic design compresa tra gli anni 1860 e 1990 attraverso i suoi protagonisti principali. Il testo di riferimento per questo progetto è A Century of Graphic Design. Graphic Design Pioneers of the 20th Century di Jeremy Aynsley che mi ha permesso di ricavare tutti i testi utili al mio scopo e mi ha suggerito attraverso la sua struttura come organizzare i dati. L’interfaccia permette la navigazione attraverso quattro visualizzazioni differenti dei dati inseriti nel database. Il progetto si caratterizza anche per la tecnica del text analysis che comporta un’analisi dei testi in maniera automatica da parte del computer, tali dati una volta elaborati diventano il contenuto di un database che viene reso usufruibile all’utente finale attraverso l’interfaccia utilizzabile all’interno di un browser. Il progetto è frutto di un’analisi a vari progetti già esistenti analizzati per lo sviluppo di questo che non guidano l’utente nel suo percorso di apprendimento, riempiendolo di informazioni prive di connessioni, non concedendo così la possibilità di suscitare riflessioni per una maggiore consapevolezza, con l’aggravante di un design molto spesso poco familiare, distraendo l’utente che si perde tra i contenuti sparsi. Scaturisce così l’idea di un’interfaccia sulla storia del design grafico con un layout molto chiaro, privo di decorazioni, la cui semplicità nei colori e nelle forme guida l’utente nella scelta dei contenuti.

Interactive History of Graphic Design is a data visualisation project on graphic design history and its main protagonists between 1860 and 1990. The reference material for this project is the book A Century of Graphic Design. Graphic Design Pioneers of the 20th Century by Jeremy Aynsley from which I extracted all the text needed to structure and organize the data. The visualisation includes a user interface that allows navigation through four different data sets. The project is also characterized by an automated computer-based text analysis that turns the raw contents into a database useful for the user to explore through the interface running on the browser. The project is the result of the analysis of the problems of various existing projects that do not guide the users in their learning or promote critical thinking, that fail to show the connections between different elements, with the aggravating circumstance of an often unfamiliar design approach that distracts the users from the content. For these reasons the interface of the Interactive History of Graphic Design has a very clear layout: simplicity in color and form guides the user in selecting the content.

Introduzione

Interactive history of graphic design è un progetto che nasce come conseguenza diretta ed inevitabile di una personale ricerca che affronto quotidianamente, per il mio desiderio di soddisfare quanto più possibile le mie curiosità. La meta finale è infatti il bisogno di connettere insieme tutte le informazioni che scovo e che metto da parte, alle quali ho solo potuto accedere nuovamente in modo esclusivamente enciclopedico. Da qui, la mia idea di sfruttare le mie competenze per quel che riguarda l’interaction design e metterle a disposizione per creare un’interfaccia adatta a soddisfare il mio bisogno di poter consultare immediatamente tutti i contenuti riferiti alla mia grande passione, ovvero la storia del graphic design. Non mi è mai balenata in mente l’idea di creare un’interfaccia più accattivante dal punto di vista grafico, con decorazioni, molti colori, con pochi contenuti sviluppati, a cui poi accedervi con difficoltà per la moltitudine di pulsanti. Per evitare di commettere errori di alcun genere, tentando di rispettare quanto più possibile i goal prefissati, ho innanzitutto analizzato i progetti che hanno in comune la volontà di educare al graphic design. Passo dopo passo, ho realizzato che la maggior parte delle applicazioni e delle interfacce sono state realizzate dando molto peso al visual design, talune volte modaiolo, riferito alle tendenze del momento, che distrae l’utente: questo infatti, se ha scelto quella determinata interfaccia per una ragione precisa, si trova di fronte ad un layout seducente, e seppur non ha trovato le risposte alle proprie curiosità, tende a sentirsi comunque soddisfatto per aver scovato un supporto dal design gradevole. Altre interfacce, in senso opposto, hanno contenuti che spaziano da un argomento all’altro, permettono di conoscere anche piccoli dettagli della storia della grafica, ma sono presentati in modo del tutto nozionistico, privo di collegamenti, per cui l’utente si ritrova con una miriade di informazioni ingestibili, molto spesso già dimenticate perché si è passati già nel successivo menu a tendina. Infine, un ulteriore problema riscontrato tra i progetti precedenti è il problema del target: ogni interfaccia, difatti, che si riferisca ad uno studente, o ad un bambino, presenta una linea grafica distinta, ben conforme al target di richiamo. Nessun progetto che ho analizzato, avrebbe “consegnato” l’esperienza corretta all’utente, se questo non fosse rientrato nel target prestabilito.

Quest’analisi mi ha condotto a definire tutte le tesi necessarie per costruire questo progetto. Si sviluppa così un network di dati relativi ai maggiori esponenti del design grafico, in un lasso di tempo che va dal 1860 al 1990, scoprendo quelli che sono gli eventi che ne hanno determinato i percorsi artistici. I dati non sono messi lì a caso, ma sono stati organizzati per date, eventi storici e personaggi che sono stati protagonisti di questi: ciò mi ha permesso di creare una struttura semplice, per cui un sistema composto da molti elementi appare costituito da pochi. È come se concedessi all’utente la possibilità di scegliere il suo percorso di conoscenza, ma di fatto è una scelta guidata, perché prima di lui, io “ho riorganizzato le sue scelte”, suddividendo tutto per tematiche, stabilendo quasi delle priorità. Si tratta di scelte dovute, cercando di trovare dei punti comuni tra tutti i dati che avevo a disposizione. Ho creato così dei modelli virtuali, ai quali anche l’utente può farvi riferimento nel momento in cui volesse richiamare alla mente un’informazione ricevuta dall’interfaccia, in un secondo momento quando ormai non la sta più utilizzando. L’organizzazione aiuta anche la memorizzazione dei dati, agendo per associazioni è infatti più semplice. La chiarezza grafica, dai colori (ho scelto di utilizzarne solo 3, oltre al bianco e al nero) al layout bidimensionale, agevola ancor di più la lettura e dunque la memorizzazione delle informazioni; e allo stesso tempo, ciò mi ha permesso di adempiere alla volontà di realizzare un’interfaccia adatta ad ogni tipo di target, poiché lo stile poco caratteristico, ma riconoscibile, è molto gradevole e decisamente indicativo per chiunque. La sfida più difficile che ho dovuto affrontare è stata quella di risolvere il problema tecnico della gestione della miriade di dati. Ho provato, dapprima ad inserire manualmente i contenuti, ma rischiavo di creare confusione, o semplicemente di non trascriverli correttamente; più tardi ho scoperto la tecnica del text analysis, che permette un’analisi rapida dei testi, perché è del tutto automatizzata. Questi testi vengono trasformati in dati, riorganizzati in un database accessibile all’utente proprio agendo con l’interfaccia e navigando tra le categorie prestabilite. L’utente, cercando un argomento o un evento, tramite il codice dell’interfaccia, non fa altro che “rovistare” tra i dati per trovare ciò che serve. I dati dell’interfaccia sono esplorabili attraverso la modalità del network, ovvero una rappresentazione interattiva che permette di “saltare” da un contenuto all’altro, soddisfacendo così l’utente nella sua volontà di avere tutte le informazioni a completa disposizione: in qualsiasi momento egli può decidere di studiare la vita di un autore o di leggere i contenuti di un contemporaneo di questo, per poi tornare nuovamente indietro.

Questo permette non solo l’assimilazione dei contenuti, ma genera riflessioni, per una maggiore padronanza e conoscenza. La tesi che stringete tra le mani presenta così il mio progetto Interactive history of graphic design, che è il risultato di una lunga ricerca, esplicitata passo dopo passo nel primo capitolo, partendo dall’analisi del data visualization, come argomento-fondamenta del progetto, prendendo in esame alcuni casi studio, fornendo i primi accenni delle modalità, metodologie e iter progettuali per mettere insieme tutti i ragionamenti del progetto. Con il secondo capitolo ci si addentra già nel progetto vero e proprio, mostrando i miei primi passi nell’area del data visualization, ponendo i punti cardine della timeline presa in considerazione in relazione con le categorie scelte e infine descrivendo le user experience degli utenti probabili. Infine il terzo e ultimo capitolo conclude questo progetto, descrivendo in modo specifico e approfondito le differenze che ci sono tra le quattro modalità di ricerca nell’interfaccia, giustificando concretamente così le suddivisioni, motivando le scelte grafiche e introducendo l’argomento del design processing e di come è stato tecnicamente realizzato tutto il prototipo finale. Infine, sono presenti le mie conclusioni rispetto al progetto e rispetto al modus operandi, concentrandomi sulle fasi di realizzazione, tentando di comprendere cosa è stato fatto e cosa no, confrontandomi con gli obiettivi prefissati in origine. Alcune riflessioni, in particolar modo, sono dedicate agli aspetti trascurati e migliorabili del progetto, che saranno sicuramente il punto di partenza per un progetto successivo, che possa garantire un esito efficace per l’utente.

1 Ricerca

1.1 Data visualisation

Data visualisation è una disciplina alquanto recente, che si occupa della rappresentazione di dati. Trae le sue radici dall’infografica, dal design dell’informazione e dalla rappresentazione di dati. La visualizzazione come sotto-campo della scienza, della statistica e della grafica, è riconosciuta ormai come una indentità a se stante dalla metà degli anni 80. Pur essendo un’area di studio recente, affonda le sue radici nelle esperienze di decadi di statistica e graphic design. Stuart Card, ricercatore nell’ambito della user interface, definisce il concetto di visualizzazione come l’uso di rappresentazioni di dati computerizzate, interattive e visuali che servono ad aumentarne la comprensione. Tale visualizzazione tiene in considerazione categorie di dati/elementi non astratti, come ad esempio immagini di dati che riguardano condizioni climatiche o animazioni che descrivono il movimento di un fluido. In contrapposizione, lo stesso Card definisce inoltre l’Information visualization, come l’uso di rappresentazione computerizzate, interattive e visive, ma questa volta di dati astratti, anche se pur sempre per amplificarne la comprensione1. L’information visualization, più precisamente, si occupa di creare una serie astratta di informazioni visibili, spesso in circostanze dove non esistono metafore nel mondo fisico, e questo tipo di espressione è chiamato data visualization, che si riferisce agli elementi iniziali utilizzati per creare l’immagine visualizzata. Ciò dimostra che l’information visualization differisce dal concetto di visualizzazione proposto prima, per il quale rappresentazioni o analogie fisiche esistono già, tanto che quando si studiano fenomeni scientifici, si parla appunto di visualizzazione scientifica. Ad ogni modo, in entrambi i casi la visualizzazione delle informazione acquisisce importanza e interesse, perché permette all’utente di “leggere” le cose che non riesce a percepire in modo autonomo, poiché espresso in modo indefinito e spesso irreale: diventa così una questione percettiva, poiché la comprensione dei concetti non avviene più solo nella propria mente, ma viene “esternalizzata” con l’ausilio di una rappresentazione delle idee stesse.

Card, Stuart, Mackinlay, Jock e Shneiderman, Ben, Readings in Information Visualization: Using Vision to Think.

Academic Press, San Diego CA, 1999. 17

Tuttavia, con l’avvento della tecnologia le informazioni hanno cambiato aspetto, poiché non sono più semplici grafici portatori di significato e di contenuti estetici, ma trattengono con loro istruzioni, che ne permettono l’esecuzione. A questo proposito, è importante far notare che Massimo Botta2, architetto e designer italiano che si occupa di teorie, ricerca e design nei campi del design dell’interazione, dell’industrial design e della comunicazione visiva ha coniato e introdotto il termine più specifico “auto-nomatico” per definire questo nuovo tipo di informazione. Questo termine ibrido contiene sia il termine automatico, che però ha il limite di appartenere a comportamenti meccanici, sia il termine autonomo, che porta con sé il concetto di indipendenza. Il termine introdotto da Botta, invece conserva sia l’accezione di autonomia sia l’accezione di automaticità, ovvero una serie di norme che sono stabilite dal designer in fase di progettazione. La tecnologia che ha permesso che le informazioni diventassero autonomatiche è stata la programmazione ad oggetti, per la quale ogni oggetto è autonomo e si trova all’interno di una comunità di oggetti altrettanto autonomi ma allo stesso tempo cooperanti. Il progetto dell’informazione, inoltre, ha cambiato forma: non più immagini statiche, ma utensili grafici, in grado di agire e eseguire autonomamente le proprie operazioni; questi utensili si presentano all’utente sotto forma di interfaccia, quella che viene definita secondo l’acronimo GUI, graphic user interface. Ciò che caratterizza data visualization è la possibilità di poter navigare ed esplorare i dati in modalità interattiva, difatti l’informazione non è più staticamente a disposizione dell’utente a scopo di sola lettura, ma interagisce secondo strutture e comportamenti definiti dal designer che l’ha individuata. Inoltre, un ulteriore aspetto interessante del data visualization è che il progettista designer è posto nelle condizioni di poter lavorare con delle quantità di dati piuttosto enormi, che altrimenti sarebbero difficilmente gestibili e visualizzabili. A tal proposito, è necessario tirare in causa Benjamin Fry, programmatore e designer americano, secondo cui la visualizzazione di molteplici dati complessi richiede tre discipline diverse, ovvero l’information visualization,

Botta, Massimo, Design dell’informazione. Tassonomie per la progettazione di sistemi grafici auto-nomatici.

Artimedia-Valentina Trentini, Trento 2006. 18

il data mining e il graphic design; tutte insieme si occupano di risolvere problemi specifici ma molto spesso falliscono lo scopo comune: ciò avviene poiché ognuna di esse segue un procedimento proprio, con criteri definiti, ma incomparabili tra loro e che quindi inevitabilmente “vanno in conflitto”, a discapito dell’unità finale. Egli, inoltre, introduce un processo chiamato Computational Information Design, per l’appunto combinato per l’esplorazione, contemporanea all’analisi e successivamente alla rappresentazione di dati complessi. Fry divide questo processo in sette fasi, che sono: 1. acquisire: ovvero le modalità con cui ottenere di dati, da un solo file o da una rete di contatti; 2. analizzare: fornire ai dati delle strutture secondo i loro contenuti, ordinandoli in categorie; 3. filtrare: eliminare tutto ciò che non sono i dati che ci interessano; 4. estrarre: applicare metodi propri della statistica o del data mining, come metodo per delineare strutture e inserire i dati in un constesto matematico; 5. rappresentare: stabilire un rappresentazione semplice, dove i dati prendono una delle forme tra grafico a barre, lista o diagramma ad albero; 6. perfezionare: applicare miglioramenti alla rappresentazione di base per renderla più chiara e più coinvolgente visivamente; 7. interagire: l’apporto di metodi per manipolare i dati o controllare quali caratteristiche sono visibili3.

Fig. 1.1 Computational information design Il diagramma di Fry che illustra le sette fasi.

Computational Information Design, Fry, Ben, relatori Cooper Chair Muriel, Maeda John, tesi di laurea,

Massachusetts Institute of Technology, facoltà Media Arts and Sciences, a.a. 2003/2004. 19

1.2 Zipcode

Fig. 1.2 , 1.3 e 1.4 Zipcode: tre fasi La pagina a fianco mostra dall’alto: i dati grezzi da dove Fry è partito(fase 1); una rappresentazione grafica inziale e il passaggio successivo dove sono stati modificati elementi grafici come ad esempio il colore. Fig. 1.5 Zipcode: zooming Le quattro fasi di zooming mostrano l’interazione ad interfaccia ultimata.

Fry ha proposto un esperimento per mostrare queste sette fasi: ha preso in esame il sistema ZIP, Zoning Imporvement Plan, ovvero un’iniziativa per semplificare lo smistamento della posta negli Stati Uniti negli anni ‘60 attraverso un sistema di suddivisione delle aree geografiche. L’insieme dei dati si compone di circa 45.000 righe di dati che, una volta acquisiti, sono stati separati e disposti in modo tale che ad ogni componente sia assegnata una variabile di tipo diverso così da ottenere un database accessibile da un programma computerizzato. In seguito sono state eliminati tutti gli elementi non utili al processo, ad esempio i dati degli stati non contigui tra loro, e sono stabiliti i valori massimi e minimi di longitudine e latitudine. Dopo è stato rappresentato tutto utilizzando un diagramma a due dimensioni in maniera provvisoria, poi perfezionato nella fase successiva di perfezionamento. Come ultima fase sono state stabilite le interazioni che consentono all’utente di esplorare i dati, controllare i filtri e cambiare punto di vista. Qui l’interazione è molto semplice: quando vengono digitati dei numeri da tastiera, sulla mappa si attivano le zone con lo zipcode corrispondente, quindi, man mano che le cifre del numero aumentano le zone di selezione diventano via via più specifiche.

1.3 Timeline

Fig. 1.6 Graphic design history La schermata ricostruisce la pagina intera non visualizzabile da browser. Fig. 1.7 Particolare della descrizione.

Durante la mia ricerca preliminare mi sono imbattuto in progetti che affrontano la tematica della rappresentazione di dati relativa alla storia del graphic design. Il primo, Graphic design history, è un progetto universitario che sintetizza i momenti salienti della storia della grafica dal 1850 al 2010. Il progetto consiste in una pagina web divisa in quattro livelli: il primo raccoglie tutti i protagonisti interessati, raggruppati in base a movimenti storici o altre caratteristiche comuni a cui viene assegnato un colore; il secondo livello racchiude i movimenti artistici che mantengono i colori usati in precedenza; nel terzo livello si trova la timeline con eventi esterni, che hanno influenzato la storia della grafica; infine nel quarto si trova la timeline vera e propria che suddivide tutto il periodo preso in considerazione, dividendolo in tre frazioni minori. Seppur interessante negli intenti e nell’aspetto, il progetto presenta parecchi punti deboli: primo fra tutti, il fatto che gli elementi interattivi sono pochi e non si distinguono bene dagli elementi statici. Infatti, gli unici elementi con cui l’utente può interagire sono i movimenti storici e gli eventi che, se selezionati, fanno scorrere la pagina fino in alto in modo tale da far comparire la breve descrizione. A questo non corrisponde la scomparsa degli elementi (ad esempio i designer) non interessati. L’ultimo elemento interattivo è la timeline che fa scorrere gli eventi, i movimenti e i designer in base al cinquantennio selezionato. I punti deboli del progetto sono la scarsa quantità di informazioni presenti e un’interfaccia poco intuitiva che non valorizza gli elementi interattivi. Inoltre il fatto di avere sviluppato la pagina nella dimensione verticale fa in modo che l’utente non può visualizzare i quattro livelli contemporaneamente e questo fa in modo che non si ha una chiara visione globale. Il secondo progetto ha un nome simile al precedente: Graphic Design History: Interactive Timeline, ed è anch’esso un progetto universitario. Questo progetto sfrutta i wizard* che suggeriscono all’utente come muovere i primi passi all’interno del sito. L’interfaccia si presenta come un sito a tre colonne, dove a sinistra c’è la colonna con le categorie, che riguardano eventi, movimenti, istituzioni e organizzazioni, persone e tecnologie. Ogni elemento presente in queste categorie, può essere selezionato e e in questo modo si richiama un contenuto, che si apre nella colonna centrale, la più grande.

* I wizard sono finestre che compaiono sovrapponendosi alla principale con lo scopo di auitare l’utente step-by-step a navigare un sito o un’applicazione. Generalmente si attivano da sole quando si accede per la prima volta ad un sito. 23

Fig. 1.8, 1.9 e 1.10 Graphic Design History Interactive Timeline Alcune schermate dell’interfaccia, quella iniziale presenta un wizard con i suggerimenti.

In alto ci sono le dieci thumbnails delle decadi. Nella colonna di sinistra sono presenti le tags, che non sono sempre le stesse, ma riguardano il contenuto centrale. Questo progetto ha il merito di organizzare bene i contenuti a disposizione, ma ha un’interfaccia che non dà abbastanzza spazio agli elementi dinamici e somiglia ad una pagina web statica.Inoltre il fatto di suddividere la pagina in maniera così rigida fa sembrare gli elementi separati anche se in realtà sono connessi tra loro. Il terzo progetto è Design History: An Interactive Timeline che analizza i sessant’anni dal 1900 al 1959. Si tratta di un’interfaccia molto semplice suddivisa in tre ventenni. Sono segnalati eventi artistici o riguardanti il design tramite delle forme geometriche che non danno alcun riferimento all’utente. Questi deve ricorrere spesso alla legenda che si apre sottoforma di tendina. 24

Fig. 1.11 Design History. An Interactive Timeline La legenda delle icone compare da un men첫 a tendina posto in basso. Fig. 1.12 La pagina principale mostra le icone che seguono la timeline, ad ogni icona corrisponde una pagina descrittiva.

1.4 Dati numerici

Fig. 1.13 Sexperience Una schermata dell’interfaccia che mostra una panoramica a proposito di un utente.

Un altro progetto che, seppur tratta un argomento differente, è molto interessante per come interpreta i dati e come rende ironicamente le animazioni dell’interfaccia, è Sexperience 1000. Sexperience 1000 è un progetto che parte da un’indagine fatta in Gran Bretagna su circa 1000 individui a proposito delle loro preferenze in materia sessuale. L’interfaccia finale rappresenta le statistiche risultante l’indagine in maniera dinamica e animata. É interessante la modalità con cui le informazioni sono trattate: ad ogni intervistato corrisponde un omino che ne conserva tutte le caratteristiche dell’individuo stesso, e dunque età, genere, provenienza geografica, stato civile, orientamento sessuale, grado di istruzione, professione, automobile in possesso, genere musicale preferito, tipo di cellulare in possesso, mantenendone comunque l’anonimato e, durante la navigazione, si comporta come avrebbe fatto la persona reale, secondo le sue risposte. Scorrendo le domande proposte nel questionario, la folla degli intervistati si scompone per riorganizzarsi in gruppi più piccoli in accordo con i numeri ottenuti con le statistiche. L’utente che viene in contatto con l’interfaccia, può così di primo acchito, decifrare i dati da un punto di vista puramente quantitativo, confrontando la grandezza dei nuovi gruppi che si sono venuti a costituire, come anche mediante il punto di vista qualitativo distinguendo il colore della maglietta indossata dall’omino rappresentato, che può essere blu per gli uomini e rosa per le donne, individuandone immediatamente le proporzioni. Eventualmente l’utente ha la possibilità in un secondo momento, di conoscere le informazioni specifiche di ogni singolo individuo che ha risposto all’intervista, per una comprensione più approfondita, spostandosi semplicemente con l’indicatore sui gruppi.

Fig. 1.14 e 1.15 Sexperience Due schermate mostrano due delle possibili visualizzazioni riguradanti tutti gli intervistati.

Fig. 1.16 Sedici film a confronto Qui sono messe a confronto le visualizzazioni finali delle analisi dei video di sedici film. Le numerose variabili allâ&#x20AC;&#x2122;interno di una pellicola rendono il grafico unico, a cui lâ&#x20AC;&#x2122;autore associa il termine fingerprint. In questi diagrammi sono stati scomposti i colori di ogni fotogramma che compongono il settore dellâ&#x20AC;&#x2122;anello; la forma completa mostra quale siano i colori utilizzati maggiormente nella pellicola. 28

1.5 Cinemetrics

Fig. 1.17 Il diagramma “coxcomb”

Cinemetrics è un progetto realizzato da Friederic Brodbeck che analizza i film prodotti da vari punti di vista e ne da una rappresentazione grafica mostrando aspetti fino a quel momento sconosciuti. Tutto il processo si basa sull’idea che lo scorrere dei fotogrammi non dura abbastanza per riuscire ad analizzare a fondo la complessità dell’intero film. Per la realizzazione del progetto sono serviti più software utilizzati per scomporre il film e per mostrarne strutture nascoste, mettendo in relazione, ad esempio, film originali con i remake, con film dello stesso genere o serie, con film appartenenti a movimenti diversi o con film dello stesso autore. Di questo progetto apprezzo il fatto che l’autore non si sia basato su una serie di dati numerici organizzati in tabelle come avviene per la maggior parte di progetti di data visualization, ma ha trasformato dei dati ‘nascosti’ insiti nei film (degli artefatti) per trarne gli aspetti formali, ovvero i dati. L’intero film viene prima scomposto nelle singole parti di video, audio e sottotitoli e di seguito analizzati secondo la lunghezza degli stacchi, delle inquadrature, della lunghezza dei movimenti e delle palette di colori; tutti questi elementi vengono poi confrontati tra loro. Il risultato finale è una serie di diagrammi circolari simili al diagramma di coxcomb* disegnato da Florence Nightingale per spiegare le morti dei soldati durante la Guerra di Crimea (fig. 1.17).

Fig. 1.18 Quantum of solace

*Florence Nightingale dopo aver raccolto una serie di dati nelle zone interessate dalla Guerra di Crimea (1853-1856), tornata in Gran Bretagna, decide di organizzare l’analisi in un diagramma, che lei stessa introduce e che oggi è conosciuto come coxcomb. Il diagramma divide in settori uguali i mesi durante i quali si è sviluppato il conflitto, ma varia la lunghezza dei raggi in modo tale da avere settori differenti. Ad ogni mese corrispondono quindi tre tipologie di dati: le morti causate dalle malattie (in celeste), quelle causate dalle ferite (in rosso) e quelle causate da altri fattori (in nero). In questo modo ha potuto confrontare i dati sia dal punto di vista temporale che in relazione alla tipologia. 29

1.6 Elementi interattivi: timeline e mappe

Fig. 1.19 Historypin

Fig. 1.20 Travel Time Tube Map

Durante le mie ricerche ho individuato due modalità per visualizzare i dati quantitativi e qualitativi relativi al tempo e allo spazio, ovvero il metodo della timeline e quello delle mappe interattive, che molto spesso si possono ritrovare insieme anche in uno stesso progetto. La diffusione delle mappe è dovuta alle nuove tecnologie che mettono a disposizione degli utenti meno esperti mappe interattive, poiché offrono la possibilità di essere personalizzate, modificate e di visualizzare questi dati aggiunti sia in momenti differenti che contemporaneamente, perché lavorano su più livelli. Due esempi molto diffusi sono le mappe messe a disposizione da GoogleMaps e da OpenStreetMap: questi nuovi mezzi vengono definiti col nome di neogeography. Un esempio di piattaforma in cui vengono utlizzati questi sistemi è Historypin, (fig. 1.19) che sfrutta le tecnologie fornite da Google per creare una sorta di storia dell’umanità attraverso le foto degli utenti. Il progetto è molto seguito e offre parecchie possibilità di navigare tra i dati; ad esempio oltre alla possibilità di contestualizzare le foto all’interno della mappa, che è l’elemento principale, si possono anche creare delle connessioni tematiche delle fotografie o filtrarle attraverso la timeline che l’utente visualizza. Un altro progetto interessante che si basa su dati che riguardano sia lo spazio che il tempo è Travel Time Tube Map. Questo progetto si comporta in maniera molto più dinamica rispetto al primo: in modo specifico, si modifica la celebre mappa della rete metropolitana di Londra in base al tempo di percorrenza partendo da una stazione scelta a tutte le altre, e la stazione iniziale è direttamente selezionata da una lista a tendina ben visibile all’utente. Dato che la distanza reale dei luoghi non corrisponde a quella rappresentata dello schema convenzionale, questa mappa dinamica si deforma in modo tale da far combaciare la distanza reale con appunto la distanza rappresentata dalla mappa.

Fig. 1.21 Writing Without Words 32

1.7 Network di dati

arc diagram

Una miriade di punti nodali in relazione tra di loro mediante delle connessioni genera quello che viene chiamato network di dati. Rappresenta un’entità unica, nonostante sia una struttura composta da più elementi, il cui significato sussiste solo perché essi sono connessi tra loro. Queste congiunzioni rappresentano però molto di più di semplici linee, poiché riferiscono anche delle caratteristiche qualitative, mediante la grafica dei tracciati stessi, che ne determina una gerarchia. Il network dunque, con le sue relazioni, impone anche la forma della struttura, che rappresenta anche il prodotto finito artistico-grafico; paradossalmente non è l’aspetto grafico che determina l’estetica dell’artefatto, ma è la funzione esplicitata dalle connessioni che individua naturalmente la forma finale (non a caso utilizzo il termine “naturalmente” perché le forme generate sono stabilite da strutture base, quasi organiche): si può così parlare di visual experience, dove il design guida l’utente nella lettura e nella comprensione dei dati.

centralized burst

Fig. 1.22 Oil money 33

Fig 1.23 The Evolution of Origin of Species

Fig 1.24 Similar diversity

Due esempi di network di dati che ho analizzato sono denominati arc diagram e centralized burst. La prima modalità rappresenta un diagramma ad arco, che si basa su una disposizione monodimensionale dei nodi, con archi di cerchi per creare delle connessioni. Nonostante un diagramma ad arco non può rendere la struttura complessiva di un grafico come potrebbe invece fare un grafico bidimensionale, l’ordine e la gerarchia permettono di individuare molto facilmente le connessioni. La seconda modalità rappresenta un diagramma bidimensionale dove i punti nodali sono interrelati tra loro, ma in questa modalità rispetto alla precedente, il fattore spazio ha una propria rilevanza; ciò vuol dire che si tratta di un network dove gli elementi centrali hanno relazioni più forti delle relazioni tra gli elementi periferici. In questa modalità la posizione di ogni singolo nodo è assolutamente importante. Il primo analizzato è il Writing Without Words (fig. 1.21). Si tratta della prima parte di On the Road, il romanzo di Jack Kerouac. Ogni suddivisione in un ramo più piccolo rappresenta progressivamente la suddivisione del contenuto per capitoli, paragrafi, frasi fino ad arrivare alle singole parole. Ogni colore è posto poi in relazione con undici categorie create dall’autore stesso del diagramma, per creare delle connessioni. The Evolution of Origin of Species (fig. 1.23) è un diagramma costituito da molteplici diagrammi, e ognuno di essi rappresenta un’edizione di The Origin of Species di Charles Darwin (ne sono state realizzate sei). È costruito sulla stessa struttura del diagramma realizzato per il romanzo di Kerouac. È stata realizzata una suddivisione per capitoli e sottocapitoli e questi poi in ventagli che rappresentano i paragrafi; infine questi poi sono divisi per frasi. Ognuna di queste è poi colorata in base alla sua presenza anche nell’edizione successiva: blu se sopravviverà, arancione se sarà cancellata. Similar Diversity (fig. 1.24), costruito con Processing, è un progetto che si riferisce alla prima modalità, quella dell’arc diagram. Realizzato sotto la direzione di Stefan Sagmeister, mette in relazione le diverse religioni, i significati e i dogmi, come mostrano gli archi colorati, prendendo come base le letture delle cinque religioni più diffuse. Nonostante mostri elementi del tutto obiettivi, quali verbi e sostantivi tratti direttamente dalle sacre scritture, ha come scopo quello di far riflettere sui pregiudizi e sui conflitti religiosi. Riferiti alla seconda modalità dei centralized burst diagram sono tutti gli altri esempi mostrati dalle immagini. Presidential Candidate Donations: Job Titles of Donors è un progetto del 2008. Si tratta di un diagramma ad arco realizzato durante la campagne elettorale degli Stati Uniti. In particolare, ne sono stati realizzati due, uno dedicato al candidato McCain e un altro invece al suo avversario Obama. Le due mappe (qui mostro quella per McCain) visualizzano i dati delle donazioni fatte tra gennaio 2007 e luglio 2008, per l’uno e per l’altro candidato. Le donazioni sono state ordinate partendo da quelle fatte dai pensionati per giungere a quelle fatte dai lavoratori meno comuni, in base inoltre all’importo che hanno donato, suddivisi per colori. Il risultato evidente è che i pensionati 35

Fig 1.25 Presidential Candidate Donations: Job Titles of Donors

hanno donato una maggiore somma di denaro. (fig. 1.25) Oil Money (fig. 1.22) mostra una suggestiva rappresentazione grafica delle connessioni tra le industrie petrolifere e i politici che le sostengono economicamente. In questo grafico, la rilevanza delle persone e delle industrie (dati) è manifestata dalla loro posizione, ma anche la loro grandezza rispetto all’intera struttura facilita maggiormente la lettura, per una comprensione sicuramente più immediata. ToneGlue (fig. 1.26) è un’interfaccia online che offre un servizio per mappare la musica preferita dell’utente. Questo non deve fare altro che digitare il nome di un’artista, e da qui, una volta che l’utente clicca sul risultato, si aprirà un ventaglio con molteplici opzioni simili all’artista scelto, presenti nel database. Se l’artista è inoltre contrassegnato da un pallino colorato, sarà possibile anche leggere le ultime news relative al cantante in questione. Si verrà così a creare un grafico interattivo che l’utente può implementare all’infinito, giocando con le relazioni che ci sono tra gli artisti, i quali tanto più saranno vicini, tante più affinità avranno. Infine MentionMap (fig. 1.27) è un diagramma che rappresenta una rete di visualizzazione sulla base della rete Twitter. In modo specifico, gli utenti che leggono la mappa possono scoprire quali sono le persone che interagiscono di più, di cosa stanno parlando, per individuare quali sono le persone più rilevanti nel social network. MentionMap raccoglie gli aggiornamenti di stato degli utenti e analizza i dati di chi ha “parlato” di più; queste persone vengono poi messe in relazione tramite dei collegamenti lineari e raggruppati secondo cluster, per caratteristiche comuni e secondo quanto questi hanno interagito tra loro. Sono inoltre inserite delle parole chiave per consentire meglio di rintracciare le interazioni tra gli utenti. Ho presentato così molteplici esempi, per cui colori, simboli e grafici, rendono interattiva la lettura dei dati, per un’analisi più approfondita e per una visione da differenti punto di vista.

Fig 1.26 TuneGlue

Fig 1.27 MentionMap 37

contenuto dinamico

sexperience

il mio progetto

travel time tube map

gdh timeline design history

visualizzazioni multiple

visualizzazione unica

cinemetrics

writing without words

progetti relativi al design progetti non relativi al design

gdhit

contenuti statici

1.6 Cluster analysis

Fig 1.28 Cluster analysis I progetti analizzati in precedenza messi in relazione al mio progetto.

Questo schema mette in relazione alcuni dei progetti analizzati in precendeza, al fine di focalizzare meglio in quale ambito dovrà posizionarsi il mio progetto e quali dovranno essere le sue caratteristiche principali. Si nota come non sono stati presi in considerazione progetti statici, sia come contenuti, sia progetti che permettono una visualizzazione unica. I progetti che hanno gli aspetti più interessanti sono quelli che si trovano nel quadrante in alto a sinistra, che hanno la possibilità di scegliere quali visualizzazioni usare e hanno dei contenuti dinamici. Il mio progetto dovrà quandi cercare di avere entrambe queste caratteristiche. Sexperience è un progetto molto complesso, poiché, mentre dà la possibilità di visualizzare i dati con diverse modalità, allo stesso tempo i contenuti sono resi più accattivanti attraverso animazioni e una grafica ironica. Travel Time Tube Map invece è un progetto organizzato sempre sulla stessa visualizzazione, che varia leggermente il proprio aspetto in funzione delle variabili inserite dall’utente. I progetti analizzati che trattano come argomento principale il design (Graphic Design History, Design History e Graphic Design History Interactive Database) hanno sia il limite di avere una sola visualizzazione, sia quello di non assegnare ai contenuti delle azioni molto diverse e innovative rispetto a quelle concesse dei siti classici. Cinemetrics e Writing Without Words, sebbene siano molto complessi su come analizzano dati non numerici e analizzano argomenti poco trattati in questo genere di materia, danno delle visualizzazioni statiche più vicine all’information design, rilevando comunque dei risultati eccezionali dal punto di vista visivo.

2 Iter progettuale

2.1 Primi approcci di data visualisation

Interactive history of graphic design è un’interfaccia interattiva che permette la navigazione tra gli eventi e i personaggi, che hanno caratterizzato la storia del graphic design del ventesimo secolo; questi, intesi come dati, hanno la possibilità di interagire tra loro, organizzando così differenti livelli di lettura, secondo gli interessi e le esigenze dell’utente. Gli intenti di questo progetto sono abbastanza insoliti ed è insolito come questi siano cambiati durante il periodo di progettazione, per via dell’evoluzione della ricerca e del riscontro con le potenzialità del progetto stesso. Inizialmente, infatti, mi sono proposto di avvicinarmi a quella disciplina comunemente conosciuta come data visualization. Mi era chiaro l’ampio campo in cui muovermi ma mi erano oscuri gli argomenti, poiché ho constatato difficoltà nel reperire le fonti e i dati, e ciò dunque modificava via via le finalità della mia ricerca. La prima idea alla quale mi sono dedicato, sviluppava la possibilità di una guida non convenzionale dell’Italia, a cui avevo dato il nome di Visualizing Italy. Ho definito questa guida come non convenzionale, poiché pur essendo una guida legata ad un territorio, di fatto avrebbe fatto riferimento a nuovi punti di vista, dettati da obiettivi differenti.

Questa mia prima idea era motivata dalla possibilità di raccontare contemporaneamente più storie dell’Italia in base ai dati presi in esame, come ad esempio flussi migratori, o trasporti, che poi avrebbero dovuto dialogare con ulteriori dati che si riferivano ad esempio all’istruzione, alle malattie o ad altre aree: da questi dialoghi e dalla loro analisi, l’utente avrebbe potuto avere differenti suggestioni, con le relative critiche. Si sarebbe trattato di creare un’interfaccia che si basava sulla mappa dell’Italia dunque, dove oltre ai dati geografici oggettivi, venivano inserite rappresentazioni delle statistiche contestualizzate nelle varie regioni, province e città. Il territorio sarebbe diventato semplicemente un catalizzatore di trasformazioni e mutazioni visibili e invisibili; il mio progetto avrebbe portato alla luce tutte queste realtà in modo simultaneo e l’accesso per l’utente sarebbe stato immediato. Mi piaceva l’idea di uno strumento, più precisamente un’interfaccia interattiva da utilizzare sui browser, da accostare ad articoli giornalistici e che fornisse un ulteriore approfondimento e punto di vista degli argomenti trattati. Si trattava di una strada già intrapresa da molti canali di informazione stranieri, ma nella mio progetto si sarebbe rivolto all’Italia, cercando di illustrare al meglio, aspetti molto spesso ignorati o che frequentemente restano in modo listato e nozionistico sotto forma di tabelle di dati, difficilmente reperibili e noiosi da leggere, con la conseguente difficoltà di una lettura simultaneamente a più livelli. Nei miei tentativi iniziali di trovare materia prima da cui trarre per il mio progetto mi sono imbattuto in banche dati dai temi più disparati. Dato che gli argomenti da trattare erano pressoché infiniti, avrei voluto, almeno per questo progetto, lavorare con informazioni che, per mie conoscenze pregresse, erano connesse fra loro. Ma più proseguivo con la mia ricerca e più non ne venivo a capo, poiché non esistono per tutte le aree di studio fonti certe, né queste fonti sono reperibili per tutte le regioni, e ciò dunque complicava la volontà di sovrapporre più dati. Restringendo così l’area di lavoro, ho scelto come mio unico tema per affrontare la ricerca quello della medicina e in particolare ho deciso di analizzare i dati relativi alle cause di morte, alle tipologie di cancro esistenti e in che percentuale sono diagnosticate, al numero di persone affette da cancro divise per le varie regioni e strutture ospedaliere e contemporaneamente cercare di trovare delle connessioni con le sostanze nocive emesse nell’atmosfera, analizzate per zone geografiche e per aree di produzione. La ricerca avrebbe sicuramente ottenuto dei risultati notevoli. Questa mia idea è scaturita da un precedente esito storico-scientifico risalente al 1854, quando un medico britannico, John Snow, durante un’epidemia di colera a Londra, riuscì a capire le reali cause del contagio della malattia. Snow si era avvalso della mappa della città,

dove, tra le altre cose, erano segnate anche le pompe dell’acqua. Egli divise la mappa per zone di contagio e indicò le zone con le più alte percentuali di diffusione della malattia; mise insieme questi dati, e ne dedusse che il colera non era trasmesso per via aerea, come i suoi contemporanei pensavano, bensì si diffondeva a causa dell’acqua infetta. Avendo questi due elementi, la posizione delle pompe e la presenza di persone contagiate riuscì ad avere un quadro della situazione che tutti gli altri ignoravano, dimostrando la sua tesi. Si decide pertanto, di chiudere tutte le pompe da cui si riempivano i secchi per dissetarsi e per coltivare i campi, limitando così le conseguenze dell’epidemia. È importante dire che la tesi di Snow era avvalorata anche dalle sue conoscenze, egli era infatti un medico; non valeva lo stesso per me e sebbene fossi cosciente del fatto che questo tipo di lavoro sarebbe stato sicuramente interessante da svolgere, man mano che cercavo le fonti da cui estrapolare i dati mi rendevo conto del forte rischio di poter fornire dei risultati che potessero essere interpretati in maniera imprecisa o addirittura errata. Inoltre il tipo di argomento trattato, appunto quello del cancro, avrebbe generato ulteriori problemi da un punto di vista comunicativo. Questo tipo di progetto, per il messaggio e per le finalità che pretendeva di esprimere, richiedeva sicuramente un registro piuttosto serioso, ma allo stesso tempo senza scendere nel macabro, per evitare il rischio di terrorizzare gli utenti, perdendo così ogni tipo di scopo divulgativo e informativo. Il linguaggio si sarebbe poi dovuto diversificare, se questo era riferito ad anziani o bambini, a donne o uomini, perché la percezione di dati come questi del cancro avrebbe avuto probabilmente molteplici interpretazioni. Questo mi avrebbe distratto dal principale scopo del progetto, perché sì, la comunicazione è importantissima, soprattutto se è tramite la visualizzazione che si cerca di insegnare qualcosa, ma la diversificazione grafica e comunicativa mirata ai differenti target di utenti avrebbe avvilito un progetto dedicato a tutti, ricco di contenuti fruibili dal maggior numero di users possibili.

2.2 Una storia interattiva del graphic design

Fig. 2.2, 2.3, 2.4 e 2.5 Le copertine dei libri Graphic Design: A Concise History di R. Hollis; Pioneers of Modern Typography di H. Spencer; Abecedario. La grafica del novecento di S.Polano e P. Vetta; A Century of Graphic Design: Graphic Design Pioneers of the 20th Century di J. Aynsley.

Ho abbandonato così l’idea iniziale, dirigendomi verso delle tematiche più attinenti al mio percorso di studi e al mio background, in modo tale da riuscire a districarmi meglio con gli argomenti che mi accingevo a considerare e sviluppare. Ho quindi pensato di rappresentare la storia del graphic design, e specificando, di rappresentare una lunga timeline, che possa coprire un lasso di tempo lungo un secolo, a cavallo tra il 1800 e il 1900, per narrare degli eventi storici che hanno fatto da scenario alle milestones della storia del design grafico, con tutti i relativi protagonisti. L’idea di base mi è piaciuta sin da subito ma c’erano alcuni aspetti da non sottovalutare. Uno dei primi fattori che avevano bisogno di chiarezza era che un progetto del genere avrebbe previsto alle sue spalle aspetti storici e critici. Questo avrebbe di sicuro richiesto molto lavoro di ricerca e avrebbe comportato una presa di posizione da parte mia e una scelta rispetto agli argomenti, come ad esempio la selezione dei protagonisti e l’individuazione di relazioni tra i vari movimenti e i vari designer. Questo avrebbe necessitato la definizione di criteri e di requisiti per poter fare una cernita, a svantaggio di alcuni protagonisti della grafica, esclusi perché mancanti di determinate specifiche. Si sarebbe trattato di un lavoro curatoriale. La mia idea era quella di selezionare gli autori, e per ciascuno di essi creare e compilare una scheda biografica, che avrebbe contenuto le informazioni quali il nome, il luogo di nascita, la data di nascita e di morte, la descrizione relativa al percorso grafico e artistico e quindi la galleria dei lavori. Tutte queste schede, catalogate, sarebbero poi state inserite all’interno dell’interfaccia, per capire come questi dati potessero essere esplorati tramite navigazione e messi in relazione fra loro. In questa fase avevo individuato alcuni testi da cui trarre le informazioni di cui avevo bisogno: Graphic Design: A Concise History di Richard Hollis, un testo molto importante anche se tratta gli argomenti in maniera piuttosto generale e superficiale e catalogando il tutto in base alle tecniche di riproduzione degli artefatti grafici; Abecedario. La grafica del Novecento, di Sergio Polano e Pierpaolo Vetta che, come una sorta di enciclopedia, secondo un ordine alfabetico, dedica una scheda per protagonista del graphic design del ventesimo secolo, con tanto di biografia e alcuni saggi che analizzano i designer in maniera piuttosto disomogenea, privi di criteri apparentemente uguali; infine Pioneers

Fig. 2. 2

Fig. 2. 3

Fig. 2. 5

Fig. 2. 4

of Modern Typography di Herbert Spencer che analizza i maggiori designer del secolo scorso in maniera approfondita, ma limitandosi esclusivamente a quelli dei primi decenni. Sebbene questi testi siano molto autorevoli, non sono riuscito a trovare quello che mi serviva per creare i contenuti della mia interfaccia, ovvero non sono riuscito a reperire molti contributi approfonditi sui singoli designer e per di più non sarebbe stato possibile coprire l’arco di tutto il secolo da me preso in considerazione. Per un attimo ho dunque fermato il mio percorso progettuale, per dedicarmi alla ricerca di un manuale che potesse essere il principale punto di partenza e di riferimento. Ho scoperto così il libro A Century of Graphic Design: Graphic Design Pioneers of the 20th Century di Jeremy Aynsley. Questo testo analizza in maniera approfondita circa una settantina di designer dedicandoli un intero sottocapitolo. L’autore stila una guida con i temi più significativi del graphic design durante il 20° secolo, dal manifesti innovativo di Will Bradley e Henry van deVelde alla grafica digitale di Neville Brody e Sheila Levrant de Bretteville. Organizzato in maniera cronologica, l’autore fa una sorta di panoramica unica, esaminando il lavoro dei designer e dei movimenti artistici, e spiega come, durante tutto il secolo, la tecnologia e i suoi progressi hanno promosso trasformazioni ed evoluzioni. Il mio progetto, Interactive history of graphic design, prende avvio proprio da questo libro, esaminando e catalogando i designer esattamente come fa l’autore Aynsley. Tutta la storia, che inizia con i primi designer a cavallo tra 1800 e 1900 e finisce con le più moderne realtà nate negli anni ‘90, è suddivisa in sei aree che corrispondono ai capitoli; ovvero il primo capitolo dedicato a tutti i progettisti che hanno portato un’innovazione nel sistema del design grafico; il secondo dedicato a tutti i designer e ai movimenti che hanno determinato dei giri di boa in ambito grafico; il terzo capitolo consacra i designer della metà del ventesimo secolo; il quarto è rivolto a tutti quei designer definiti alternativi per il loro modus operandi; il quinto capitolo è riservato a quei graphic designer definiti modernisti e infine l’ultimo che è dedicato ai designer dell’era digitale. Questi sei capitoli saranno dunque le aree di interesse per lo sviluppo del mio progetto.

Fig 2.1 Primi sketches Le prime bozze fatte a mano.

2.3 Tipi di visualizzazione

Fig. 2.6, 2.7 e 2.8 Primi wireframe I primi wireframe* che mostrano il comportamento della timeline.

Leggendo il libro e traendo le informazioni necessarie, ho avuto modo di creare le schede suddette riguardanti i designer, ovvero la base per poter far partire il mio progetto. Definito questo punto mi sono preoccupato di individuare il modo migliore per rappresentare i dati che avevo ottenuto, ma soprattutto ho tentato di capire in che modo questi dati interagissero con l’utente, studiandone comportamenti e movimenti. In questa fase di sviluppo mi sono stati di aiuto tutti gli esempi che avevo precedentemente analizzato nella fase di ricerca, imbattendomi in un gran numero di progetti simili realizzati per gli scopi più disparati. Sin da subito ho previsto la possibilità che l’interfaccia potesse contenere al suo interno diversi tipi di visualizzazione da poter utilizzare in base alle proprie esigenze. Ho valutato alcuni elementi che sono presenti all’interno delle informazioni a mia disposizione, ma che generalmente non sono in primo piano in un testo corrente e spesso perdono importanza. Ho individuato così quattro modi diversi di rappresentazione e visualizzazione, in modo tale che l’utente possa scegliere da quale punto di vista cominciare la propria ricerca in questa enciclopedia interattiva: come prima modalità, ho introdotto la presenza di una timeline, elemento che si addice bene se si vuol descrivere una storia. Si tratta di uno schema monodimensionale che scandisce gli anni presi in considerazione, dove i designer, attraverso la loro immagine, sono posizionati in corrispondenza della loro data di nascita. È uno schema abbastanza semplice che si limita a mostrare corrispondenze temporali. La timeline è suddivisa cinque parti secondo i ventenni; ogni sezione, se selezionata, comporta uno zoom che permette di distinguere meglio nomi e immagini dei designer. All’interno della timeline sono presenti anche marker che indicano eventi storici o accadimenti influenti nel mondo del design, nelle immagini della pagina a fianco ci sono, ad esempio, lo scoppio della seconda guerra mondiale e la chiusura del Bauhaus nelle sedi tedesche.

* I wireframe sono documenti prodotti dagli interaction designer che mostrano la struttura, i contenuti e le informazioni di un progetto. Si tratta di schermate semplici a cui non è stata ancora adattata la fase di visual design. 51

Fig. 2.9 Mappa I wireframe mostrano due livelli diversi di zoom della mappa.

La seconda modalità di visualizzazione è quella della mappa, dove i designer sono inseriti in relazione con la loro nazione di appartenenza e con la nazione dove hanno svolto la loro attività. La mappa conserva tutte le caratteristiche presenti nelle mappe digitali: possibilità di zoom, possibilità di trascinare la mappa. All’interno della mappa i ritratti dei designer rimangono l’elemento interattivo principale che riporta automaticamente alla scheda dell’autore.

Fig. 2.10 net Due immagini che mostrano la modalità net in fase di stand-by e, nel caso in cui il cursore si posizioni sopra l’immagine di un designer,il comportamento dell’icona e la comparsa dei dettagli.

Un’ulteriore modalità è quella che ho definito net, che riprende visualizzazioni abbastanza diffuse nel web, chiamate network o datanet. Si tratta di una rappresentazione a rete che mostra le connessione tra i nodi, che in questo caso sono i designer. Questa modalità mostra i legami presenti tra i designer e gli avvenimenti storici e in base al tipo di connessione disegna un segmento di spessore e caratteristiche diverse.

A questo punto tuttavia è sorto un nodo cruciale su come individuare le relazioni tra i dati divisi secondo le tre modalità e come farli dialogare per generare delle riflessioni: creare manualmente queste interconnessioni avrebbe significato trovarle nel testo ed inserirle una ad una all’interno del codice che è alla base dell’applicazione. Ho deciso di utilizzare la tecnica di text analysis per estrarre dal testo del libro le connessioni fra i designer (questa soluzione sarà spiegata più nel dettaglio nel prossimo capitolo). Infine, come ultima modalità, ho inserito quella del list, un metodo classico che permette la ricerca dei dati in base all’ordine alfabetico, in modalità simile a quelle del libro stampato, proprio come se l’utente stesse sfogliando un’enciclopedia. Fig. 2.11 Le interazioni del mouse Appunti sulle interazioni del mouse.

Una volta definiti questi aspetti sotto forma di wireframe ho iniziato concepire i movimenti e le interazioni del mouse. In un primo esperimento ho iniziato a lavorare sull’elemento net e su come potessero apparire i portrait dei designer. Una considerazione iniziale era il fatto che il ritratto di un designer dice poco o nulla di lui. Bisognava trovare qualche elemento che richiamasse le conoscenze dell’utente e mostrasse le immagini dei lavori. Ho pensato quindi che sarebbe stato meglio utilizzare più immagini sovrapposte che scorressero e si alternassero in loop da utilizzare come miniatura piuttosto che una fotografia statica.

Fig. 2.12 Le interazioni del mouse Alcuni screenshot di alcune prove del layout. Le thumbnail non sono composte da una solo immagine ma da pi첫 immagini che scorrono come se sovrapposte.

2.4 Personas

I designers per poter comprendere meglio gli obiettivi e i comportamenti degli utenti, con lo scopo di definire meglio le funzionalità di un servizio o di un prodotto utilizzano il metodo delle personas. Queste non sono altro che personaggi fittizi, costruiti per rappresentare i bisogni di una vasta gamma di utenti reali. Si tratta di utenti archetipi che vanno oltre il concetto di utente generico perché le personas sono molto più simili a un individuo specifico, in quanto, oltre ad aspetti demografici, inglobano comportamenti reali, aiutando e guidando così il designer durante la progettazione. Incarnando i bisogni, le volontà, le passioni e le avversioni di persone reali, ci rendono più chiari gli aspetti che vanno presi in considerazione, cosa va migliorato, cosa va tralasciato o modificato, rappresentando così un modo efficace per rimanere focalizzati sui bisogni degli utenti, tanto da essere definito some uno strumento potente di progettazione user centred.

Federico, il distratto Ha 19 anni e vive a Napoli, studia arte presso l’Istituto d’Arte della sua città.

Vorrebbe iscriversi ad una facoltà di design dopo la scuola e per il suo esame di maturità sta effettuando una ricerca sui designer da poter discutere con la commissione.

Martha, l’entusiasta Ha 36 anni e vive a Milano, lavora come curatrice presso la Triennale di Milano, alle spalle ha un Master sulla gestione degli eventi legati al design.

Si è avvicinata a questo tipo di interfaccia perché vorrebbe proporre qualcosa di simile per una mostra che sta organizzando. Raccoglie progetti simili perchè vuole proporrre un’interfaccia interattiva tuochscreen presso il museo dove lavora.

Carlo, lo scettico Ha 43 anni. Vive e lavora a Roma, dove insegna storia del design presso l’università.

È scettico su questo tipo di approccio tecnologico per l’insegnamento. Vuole capire se un’analisi computerizzata è una fonte attendibile. Vorrebbe usare strumenti di questo tipo nei suoi corsi. Daniele, l’appassionato Ha 25 anni e vive a Venezia, dove studia design all’università.

È sempre alla ricerca di progetti che riguardano data visualization perchè vorrebbe lavorare ad un progetto simile per la tesi. Il suo interesse principale è capire come fare interagire gli elementi di un’interfaccia e studiarne i comportamenti. Disegnando alcuni di essi si cercano profili a cui si può assegnare una caratteristica principale della personalità che guida tutto il comportamento. Le personas devono essere sintetiche, poiché devono raggruppare le caratteristiche di un numero elevato di individui, e inoltre devono essere definite dai loro obiettivi: questo significa che ad ogni persona possono essere associati più obiettivi, ed è assolutamente necessario che le combinazioni di questi siano uniche, in modo tale da coprire tutti gli aspetti da tenere in considerazione. Inoltre per aiutare ancor di più nell’individuazione delle migliori caratteristiche di un servizio o di un prodotto, è necessario che queste personas siano percepite come persone reali, per cui devono avere un nome, dettagli personali, una fotografia appropriata: devono dunque avere un’identità. Una volta che il designer ha “creato” queste personas, deve anche fare in modo che queste interagiscano con il servizio, in modo tale da comprenderne le reazioni.

3 Progetto finale

3.1 Interfaccia: List

Quando accedo all’applicazione per la prima volta mi ritrovo in modalià list, la prima del menù. Questa modalità offre i portrait dei designer ordinati alfabeticamente (fig. 3.1), non ci sono informazioni ulteriori. Una volta che il mouse si sovrappone ad un portrait questo aumenta di dimensioni (fig.3.3). Se seleziono un designer attraverso il doppio click compare la finestra popup* relativa al designer (fig. 3.4).

Fig. 3.1 e 3.2 Modalità list

*I pop-up sono finestre che compaiono sovrapponendosi alla principale. Possono essere all’interno della stessa finestra o presentarsi in una finestra autonoma, possono essere selezionabili, alcune hanno una breve durata e si tratta soprattutto di notifiche o suggerimenti. 61

Fig. 3.3 e 3.4 ModalitĂ list

3.2 Interfaccia: Map

Passando alla modalità map (Fig. 3.5) mi ritrovo la mappa dove i designer sono già disposti secondo il loro paese. In basso c’è timeline che utilizza un doppia maniglia, iche mi permette di selezionare l’intervallo di tempo; in questo modo i designer che hanno vissuto nel lasso di tempo selezionato rimarranno visibili sullo schermo, mentre gli altri scompariranno. Inizialmente nessuna area delle timeline è stata escusa e questo mi permette di vedere tutti i designer.

Fig. 3.5 Modalità map

Fig. 3.6 Modalità map

Adesso che voglio selezionare un particolare periodo di tempo (fig. 3.6), selezono la freccetta a destra nella timeline e la trascino fino al 1970. La maniglia rappresenatata dalla freccia si ancora al bordo della casella. In questo modo ho escluso i designer che non erano presenti nel 1970 e quindi i loro portrait scompariranno dalla mappa. Se volessi eliminare questa selezione (fig. 3.5) mi basta effettuare un click sull’icona ‘x’ che è comparsa al limite sinistro della timeline, in questo caso tornerei alla situazione iniziale.

Fig. 3.7 Modalità map

La vista della mappa mi da una visione generale ma questa è altrettanto confusonaria in quanto i portrait dei designer sono di dimensioni ridotte ed è difficile distinguerne i volti. Posso effettuare uno zoom sulla zona centrale della mappa (fig. 3.7) tramite i pulsante ‘+’ che trovo in alto a sinistra. In questo modo aumenta sia la dimensione della mappa che la dimensione dei portrait.

* Si parla di dragging quando si seleziona un elemento e lo si trascina all’interno della pagina. Un esempio sono le mappe interattive. Generalmete a questo tipo di azione corrisponde anche un cambiamento del cursore del mouse. 65

Fig. 3.8 Stati dei portrait Una volta visitato il profilo di un designer, il suo portrait sarà coperto da uno livello semitrasparente che ne rivela comunque l’identità, seppur distinguendolo da quelli non ancora selezionati. Questo fa sì che l’utente non visualizzi erroneamente percorsi già visitati. Viene lasciata in ogni caso la possibilità di riselezionare i designer già visti, e questo si intuisce dal comportamento dell’icona in caso di mouseover.

3.3 Interfaccia: Net

Se passo alla modalitĂ net (fig. 3.8) trovo i portrait dei designer che sono disposti nella pagina in modalitĂ randomica e subiscono dei piccoli movimenti che ne sottolineano lâ&#x20AC;&#x2122;elemento interattivo. I portrait anche in questo caso mantengono la caratteristica che, in caso di mouseover (fig. 3.9), aumentano di dimensioni e mostrano il nome.

Fig. 3.9 ModalitĂ net

Fig. 3.11 ModalitĂ net

Se seleziono un designer (fig. 3.11) lâ&#x20AC;&#x2122;icona si attiva e da qui partono i collegamenti con i designer che hanno relazioni con quello selezionato. I collegamenti sono visibili in quanto dal portrait selezionato partono dei segmenti che si congiungono con i portrait dei designer dove il programma riconosce un collegamento. In questa fase si attivano anche le parole chiave (fig. 3.10) che mantengono un colore diverso anche nei collegamenti rispetto a quello dei portrait e sono anchâ&#x20AC;&#x2122;esse elementi interattivi, selezionabili che se cliccate mostrano altri collegamenti. In questo modo posso scorgere in maniera veloce le relazioni tra designer, movimenti scuole, eventi storici per avere una visione generale. Una volta selezionato un elemento questo rimane attivo cosĂŹ come i suoi collegamenti fino a quando non lo si disattiva attraverso un altro click. Per deselezionare basta effettuare un click sullo sfondo e ritorno alla situazione iniziale.

Fig. 3.10 Modalità net

La visualizzazione net torna utile a Federico, il distratto, persona analizzata nel capitolo precendente. Lo studente liceale si trova a dover scrivere una ricerca sulla storia del graphic design per l’esame finale. Data la sua poca attitudine allo studio effettua la sua ricerca partendo da History of Graphic Design. Attraverso la modalità net, egli può infatti organizzare la sua ricerca partendo da un designer, da un movimento artistico o da un contesto geografico. Selezionando il primo argomento, l’interfaccia traccia quelli che sono i collegamenti in base talle relazioni presenti sul libro; in questo modo suggerisce un percorso, mettendo in evidenza gli argomenti connessi tra loro e mettendo invece da parte quelli ‘estranei’, ponendo in risalto uno dei possibili racconti. Ogni nodo della rete può essere analizzato singolarmente e approfondito dai testi e dalle gallerie multimediali.

3.4 Interfaccia: Timeline

Nella visualizzazione attraverso la timeline, a differenza delle precedenti versioni, le date sono state inserite nella posizione verticale e i paesi di appartenenza dividono orizzontalmente la pagina. Questo modifica Ă¨ dovuta al fatto che in una situazione di non-interazione, allâ&#x20AC;&#x2122;interno della pagina sono presenti tutti i 64 designer, e questo causa inevitabilmente una forte affollamento della pagina che di fatto non permette allâ&#x20AC;&#x2122;utente una lettura agevole.

Fig. 3.12 ModalitĂ timeline

Fig. 3.13 Modalità timeline

In una situazione del genere non è possibile distinguere più designer che si trovano nelle stesse coordinate perché lo spazio non lo permette. Come elemento per segnalare la presenza di più designer nelle stesse coordinate spazio-temporali il box del portait si divide in modo tale da mostrare il ritratto di tutti i designer presenti.

Fig. 3.14 e 3.15 ModalitĂ timeline

Quando seleziono un designer (fig. 3.14 e 3.15) mi compare una finestra pop-up che si rifersice al designer che contiene il testo di riferimento preso dal libro, le parole chiave riportate nelle didascalie del libro e la possibilitĂ di accedere alla galleria dei lavori del designer. Le parole chiave presenti nel pop-up del dettaglio sono elementi anchâ&#x20AC;&#x2122;essi selezionabili che, in caso riguardassero piĂš designer, se cliccati portano in primo piano i portrait che contengono quella tag. La galleria funziona come ulteriore finestra pop-up (fig. 3.16) che si sovrappone alla schermata generale con un livello semi-trasparente che ne evidenza la posizione in primo piano. Fig. 3.16 ModalitĂ timeline

Fig. 3.17 Modalità timeline

Nella timeline ritrovo i classici pulsanti, ormai famigliari, “+” e “–” che controllano il livello di zoom della pagina. Utilizzando questo pulsante posso modificare la lunghezza della pagina in modo tale da aumentare la dimensione verticale dei contenitori ed evitare che più designer si sovrappongano. Una volta che viene modificata la lunghezza della pagina, sul margine destro apparirà lo slider che mi permette di scorrere in altezza, in modo da poter visualizzare tutti i designer. Quando lo slider fa scorrere la pagina, i nomi delle nazioni in alto rimangono nella loro posizione iniziale in modo tale da rimanere a mia disposizione. Se infatti la posizione della barra dei paesi scorresse assieme al resto dei contenuti ad un certo punto scomparirebbe dallo schermo, rendendo difficile all’utente la relazione designer-nazione.

3.5 Aspetti generali

Per quanto riguarda la struttura generale dell’interfaccia, ho scelto di mantenere una barra laterale a sinistra che rende la struttura di un sito web classico. All’interno di questa barra ci sono la header e il menù, con il quale l’utente può passare da una visualizzazione all’altra. I designer sono presenti all’interno dell’interfaccia in forma di portrait (ritratto), composto dalla foto del designer e dal suo nome. In fase di non interazione i portrait hanno tutte la stessa dimensione. Quando il puntatore del mouse si posiziona sopra un designer, situazione di mouseover, la dimensione del portrait aumenta leggermente indicando così all’utente che questo è un elemento interattivo e che quindi porta con sé altre funzioni. Infatti il portrait si comporta proprio come un pulsante, interagisce quando sopra di esso ci passa il mouse e, se azionato con un click, si attiva e ciò comporta due conseguenze: permette di accedere ai dati diretti del designer, ovvero il testo e la galleria delle immagini, e soprattutto permette di visualizzare le relazioni che ci sono tra i vari designer. Infatti quando viene selezionato un designer che ha dei collegamenti con altri, il portrait degli altri aumenta di dimensione in base al rapporto che c’è tra i due, proporzionalmente alle volte il cui il nome del primo è presente nel testo del secondo. Se uno dei designer fosse coperto da un altro designer andrebbe direttamente in primo piano per essere riconosciuto dall’utente.

list map net timeline 75

Fig. 3.18 Una pagina del libro In basso a sinistra c’è la didascalia da dove ho tratto le tag, a destra le due colonne del testo principale. Un particolare del ritratto del designer è stato utilizzato come elemento all’interno dell’interfaccia.

3.6 Elemento base

In un momento successivo, dopo aver definito questi aspetti tecnici ho iniziato a studiare il modo per poter utilizzare i dati a mia disposizione. La struttura del libro mi ha suggerito cosa e come suddividere i dati: la suddivisione che Aynsley opera nel suo libro permette di avere un testo in cui si può leggere la descrizione della vita e un’intera panoramica del lavoro del singolo designer con infine una piccola didascalia dove si può leggere un piccolo riassunto degli elementi principali e delle poetiche dei designer, oltre alla nazionalità e alle date riguardanti la vita e la morte. Il testo principale mi è servito perché è stato inserito nel programma realizzato in Processing e tramite questo ho cercato di rendere visibile le relazioni che ci sono tra i designer: il programma legge nel testo del designer 1 che è presente il designer 2 e se questo si verifica allora il programma crea le relazioni che l’utente può vedere. Le didascalie a bordo pagina invece mi sono state utili perché le ho utilizzate come se fossero delle tag di un blog. Tali tag non sono altro che parole chiave, ovvero delle informazioni che vengono attribuite ai designer e permettono quindi la creazione di un network di informazioni. In questo modo i designer sono stati classificati. Dato che molte volte le note utilizzavano parole simili per esprimere concetti simili mi sono permesso di uniformare alcune tag che pensavo potessero essere accorpate sotto una unica voce in modo tale da ottenere più relazioni possibili.

Fig. 3.19 Moholy-Nagy.txt Per eseguire l’analisi dei testi mi è risultato più comodo utilizzare più file di formato .txt per rendere l’applicazione più veloce.

Fig. 3.20 Screen del text analysis La schermata mostra le connessioni relative a un designer analizzato (Moholy-Nagy) mostrandole nello sketch di Processing.

3.7 Text analysis

La tecnica utilizzata per individuare i collegamenti tra i vari designer è generalmente chiamata text analysis. In pratica i testi presenti nel libro Pioneers of Modern Graphic Design che ho utilizzato come base per il mio progetto, i dati a mia disposizione, non sono stati analizzati da me o da un’altra persona, ma sono stati inseriti all’interno di un programma che ha ‘letto’ i testi e ha cercato parole in comune all’interno dei testi. Il programma, in gergo chiamato sketch, è stato realizzato tramite Processing. Processing è un linguaggio di programmazione basato sul linguaggio Java semplificato e per questo è utilizzato da molti designer per produrre dei prototipi. Unico accorgimento prima di utilizzare i testi è quello di trasformare il libro originale, un file .pdf, in un file .txt che è un formato supportato da Processing. L’elemento utilizzato all’interno del programma si chiama string (stringa), ed è in pratica una serie di caratteri. Questo elemento ci permette di analizzare e manipolare i testi servendocene per qualsiasi scopo. Inizialmente ho preso in considerazione soltanto i primi dodici designer seguendo l’ordine del libro. In questo modo ho potuto effettuare i primi test per provare come l’elemento string si comportasse. Per rendere leggero e più comodo ho suddiviso il testo generale in più file in modo tale da avere per ogni designer un file di testo e analizzando un testo alla volta. Come ultima fase il programma dovrebbe produrre un file .xml, che è un tipo di file molto diffuso nei progetti di data visualization in quanto è un file che permette di mantenere una struttura dei dati che può essere letta anche da altre applicazioni in modo tale da mantenere le categorie. Questo tipo di file ha inoltre la caratteristica di essere letto da molti linguaggi, tra cui anche quello ActionScript che è il linguaggio utilizzato da Adobe Flash. Anche su questo motivo si è basata la scelta di utilizzare Flash per il prototipo finale. Gli altri motivi sono sicuramente il fatto che lavorare con animazioni e con elementi grafici con Flash è estremamente più semplice rispetto a linguaggi come Processing che hanno bisogno di conoscenze più approfondite.

flash pdf

txt

xml

processing

Nel prototipo finale non mi è stato possibile, a causa delle difficoltà riscontrate, programmare un’applicazione che funzionasse come avevo previsto in precedenza. Ho quindi realizzato il prototipo in Flash CS4 utilizzando soprattutto la timeline e il codice ActionScript per ottenere le animazioni, limitando l’uso delle librerie in modo tale da avere un prototipo che fosse abbastanza fluido e allo stesso tempo fedele al mio progetto.

Conclusione

Interactive history of graphic design è un progetto che nasce a scopo educativo, per approfondire le conoscenze in materia di graphic design, sia per coloro i quali l’argomento risulta famigliare e sia per coloro che si scontrano per la prima volta con tale materia di studio. La realizzazione di questo progetto mi ha permesso di lavorare in maniera decisamente motivata, perché ho avuto occasione di far congiungere i miei più profondi interessi: la grafica e l’interaction design. Inizialmente la prima difficoltà che ho riscontrato è stata quella della ricerca del materiale da utilizzare come fonte: ho letto e analizzato diversi libri, ma alcuni trattavano l’argomento del graphic design in modo del tutto superficiale, altri invece si basano sulle delle catalogazioni, se posso permettermi, poco ragionate. Il problema era dunque trovare una fonte che potesse essere dettagliata e che allo stesso tempo fosse organizzata secondo una logica più o meno adatta per la più facile assimilazione delle informazioni. Il testo di Herbert Spencer che ha avutola meglio su tutti, è il punto di coincidenza che ha risolto le mie necessità e che è stato il mio unico punto di riferimento per la realizzazione del progetto. Rispetto a quanto appena descritto, posso sicuramente dire che questo potrebbe essere il punto di partenza per un successivo sviluppo del progetto: è possibile aumentare il livello di complessità dell’informazione se si inserisce una nuova catalogazione intesa come quinto metodo di lettura, ovvero se si decidesse di utilizzare, come fonte, molteplici libri. Questo vuol dire che l’utente potrà scegliere la propria fonte e poi mettere a confronto le informazioni apprese da questa con la stessa nozione ma affrontata da un’altra fonte. Questo migliorerebbe sicuramente il risultato della conoscenza e dell’apprendimento legato ad un evento storico o ad un protagonista della storia del design grafico. La seconda difficoltà che mi ha ostacolato è stata sicuramente quella della programmazione. Non è stato facile risolvere il problema di scrivere il codice ActionScript del prototipo finale; spiegandomi meglio, il problema fondamentale è stato quello di far comunicare tra loro diversi tipi di linguaggi per la costruzione dell’intera struttura, essendo questa creata in parte in Processing e costituita da file .xml. Integrare un formato con un altro non è sempre così semplice, poiché implica la conoscenza di molteplici linguaggi con tutte le loro complessità.

Con un background maggiore di conoscenze informatiche, probabilmente tutto si sarebbe dimostrato più semplice. Io stesso sono stato molto entusiasta nel realizzare questo progetto, poiché mi sono reso conto di quanto l’interfaccia sviluppata rappresenti un efficace aiuto e guida per il mio lavoro, per via della fruibilità e di tutte quelle caratteristiche che la rendono indispensabile per la conoscenza. Ciò è stato possibile grazie al mio costante impegno nel realizzare qualcosa di utile per agevolare il mio stesso lavoro, messo dunque poi a disposizione per tutti quegli utenti caratterizzati dalle identità più disparate, interessati alle mie stesse passioni. Questo determina chiaramente la necessità anche di essere continuamente aggiornato, per far fronte ai molteplici bisogni che si presentano. Credo inoltre che questa stessa struttura possa essere utilizzata per sviluppare ulteriori interfacce, con differenti argomenti, quasi come se “l’impalcatura di base” fosse uno scheletro intorno al quale è possbile ricreare differenti progetti. Penso che possano essere innumerevoli gli sviluppi di questo mio progetto, orientati verso molte direzioni. Ad esempio, sarebbe interessante inserire all’interno del progetto, il confronto tra più libri, in modo tale da delineare una mappa che mostri le connessioni stabilite da più autori simultaneamente, che metta in evidenza quali sono i designer presi in considerazione, a quali paesi essi appartengono e così via. Un’altra possibile direzione di sviluppo è quella di progettare l’interfaccia per supporti mobili. Questo richiederebbe però di rivedere gli elementi dell’interfaccia, ridisegnarli per i piccoli schermi e definirne il comportamento in relazione a quella che viene chiamata NUI (Natural user interface). Lavorare con tecnologie multi-touch deve prevedere la presenza delle dita che muovono gli elementi e l’assenza di mouse e tastiera, il che vuol dire riprogettare tutta l’esperienza utente in funzione di comandi più gestuali e naturali. Un altro contesto in cui si potrebbe utilizzare è quello di inserire il progetto all’interno di un museo dedicato al design, ad esempio la Triennale di Milano, facendo in modo che questo sia Incorporato in un grande touchscreen così da dare la possibilità ai visitatori di godere di elementi multimediali navigabili attraverso un tavolo interattivo. In questa direzione sono molti i musei che utilizzano la tecnologia per parlare ad un pubblico soprattutto giovane e non esperto. Concludo questa mia tesi, forte della convinzione che il mio progetto possa dare un grande contributo nel campo dell’interaction design, ma anche nell’ambto del graphic design e della ricerca in generale, per un futuro ricco di sviluppi legati al’educazione e alla cultura della conoscenza.

Ringraziamenti

Alla fine di questo percorso vorrei ringraziare la mia famiglia per il costante supporto durante questi due anni, il loro aiuto Ă¨ stato fondamentale per portare a termine gli studi e realizzare quello che volevo. Giorgia Nardulli per il costante aiuto, le revisioni dei testi, i mille spunti e la fiducia, senza di lei a questo progetto mancherebbe molto. Ringrazio i miei coinquilini Alberto, Federico, Matteo, Nic, Roberto per la condivisione di idee, di spunti e per aver allietato i momenti di tensione. A Daniele Muscella che nonostante la distanza mi Ă¨ stato di grande aiuto per la parte tecnica e per il continuo incitamento. Ringrazio David Boardman di FrogDesign per la fase iniziale di ricerca, mi ha illuminato su molti aspetti che non conoscevo. Un ringraziamento sentito va a i miei relatori Gillian Crampton Smith e Philip Tabor, per il loro aiuto, per la cura di ogni dettaglio, per i loro insegnamenti e per avermi introdotto al mondo dellâ&#x20AC;&#x2122;interaction design.

Indice delle immagini

1 Ricerca 1.1, 1.2, 1.3 ,1.4, 1.5 1.6 1.7 1.8, 1.9, 1.10 1.11, 1.12 1.13, 1.14, 1.15 1.16, 1.17, 1.18 1.19 1.20 1.21 1.22 1.23 1.24 1.25 1.26 1.27

http://benfry.com/phd/dissertation-110323c.pdf http://gdh.2rsolutions.cz/ http://gdhit.org/ http://designhistorytimeline.com/ http://sexperienceuk.channel4.com/the-sexperience-1000 http://cinemetrics.fredericbrodbeck.de/ http://www.historypin.com/map/ http://www.tom-carden.co.uk/p5/tube_map_travel_times/applet/ http://www.itsbeenreal.co.uk/index.php?/wwwords/about-this-project/ http://priceofoil.org/ http://blogs.sciencemag.org/origins/WindowsLiveWriter/9b696ca36087_ C70F/m_ed_5_web.jpg http://similardiversity.net/about/ http://www.pitchinteractive.com/election2008/jobarcs.html http://audiomap.tuneglue.net/ http://mentionmapp.com/

2 Iter progettuale 2.2 2.3 2.4 2.5

http://ecx.images-amazon.com/images/I/410PJ0T7NZL._SL500_AA300_.jpg http://ecx.images-amazon.com/images/I/41A2T6V6JCL._SL500_AA240_.jpg http://img4.libreriauniversitaria.it/BIT/258/9788843582587g.jpg http://lh5.ggpht.com/_zM3Krd0LC04/SZHoI7R8RrI/AAAAAAAAAyM/ sz5gMKlMIEA/2lxtawz.jpg

3 Progetto finale 3.18

Aynsley, Jeremy, A Century of Graphic Design: Graphic Design Pioneers of the 20th Century, p. 18.

Tutte le altre immagini presenti sono a cura dellâ&#x20AC;&#x2122;autore.

Bibliografia

Aynsley, Jeremy, A Century of Graphic Design: Graphic design pioneers of the 20th century. Mitchell Beazley, Londra 2001 Botta, Massimo, Design dell’informazione. Tassonomie per la progettazione di sistemi grafici auto-nomatici. Artimedia-Valentina Trentini, Trento 2006. Burquin, Nicolas, Ehmann, Sven, Klanten, Robert, Tissot, Thibaud e van Heerden, Ferdi, Data Flow: Visualizing Information in Graphic Design. Gestalten, Berlino 2008 Card, Stuart, Mackinlay, Jock e Shneiderman, Ben, Readings in Information Visualization: Using Vision to Think. Academic Press, San Diego CA, 1999 Ehmann, Sven, Klanten, Robert e Shulze, Floyd, Visual Storytelling: Inspiring a New Visual Language. Gestalten, Berlino 2011 Fry, Ben, Visualizing Data: Exploring and Explaining Data with the Processing Environment. O’Reilly, Sebastopol CA 2008 Hollis, Richard, Graphic Design: A Concise History. Thames & Hudson, Londra 1994 Lima, Manuel, Visual Complexity: Mapping Patterns of Information. Princeton Architectural Press, New York 2011 Maeda, John, Le leggi della semplicità. Mondadori, Milano 2006 Polano, Sergio e Pierpaolo Vetta, Abecedario. La grafica del novecento. Electa, Milano 2002 Reas, Casey e Ben Fry, Processing: A Programming Handbook for Visual Designers and Artists. MIT Press, Cambridge MA 2007 Saffer, Dan, Design dell’interazione. Creare applicazioni intelligenti e dispositivi ingegnosi con l’interaction design. Mondadori, Milano 2007 Segaran,Toby e Jeff Hammerbacher, Beautiful Data: The Stories Behind Elegant Data Solutions. O’Reilly, Sebastopol CA 2009 Shiffman, Daniel, Learning Processing: A Beginner’s Guide to Programming Images, Animation and Interaction. Morgan Kaufmann, Burlington MA 2008 Spencer, Herbert, Pioneers of Modern Typography. MIT Press, Cambridge MA 2004

Sitografia

benfry.com cinemetrics.fredericbrodbeck.de/ gdhit.org gdh.2rsolutions.cz/ datajournalism.stanford.edu/ designhistory.org/ fathom.info/ indiemaps.github.com/hexbin-js/tests/walmart.html instantanes.visitprovence.com www.knowledgecartography.org max-planck-research-networks.net/ mentionmapp.com/ mbostock.github.com/protovis/ nytlabs.com/ pmcruz.com/work radar.oreilly.com/2011/10/animated-geo-data.html sexperienceuk.channel4.com/the-sexperience-1000#/ stamen.com ten.propaganda3.com/ www.adobe.com/aboutadobe/history/timeline/ www.datavis.ca/ www.digitalhistory.uh.edu/timeline/timelineO.cfm www.google.com/corporate/timeline/#2005.11 www.interaction-venice.com/ www.itsbeenreal.co.uk www2.cec.org/nampan/page/interactive-map#bathymetry

Colophon

Font titolo copertina History 01 45 pt Font testo Swift Light 10 pt Font titoli Whitney Regular 12 pt Font didascalie Whitney Bold e Medium 9 pt Software Adobe InDesign CS4