Comunicazione visiva e design delle interfacce

Elena Arena matricola 732831

Andrea Bene matricola 731338

Michela Cairo matricola 733685

INDICE

1 INTRODUZIONE ..............................................................................1

2 BENCHMARK ...................................................................................2

3 STEREOTIPIZZAZIONE DEGLI UTENTI ................................................5

3.1 Studenti ..............................................................................6

3.2 Lavoratori ............................................................................6

3.3 Residenti..............................................................................6

3.4 Occasionali...........................................................................7

3.5 Moodboard...........................................................................7

4 WIREFRAME....................................................................................9

4.1 Primo prototipo.....................................................................10

4.2 Secondo prototipo ................................................................19

5 INTERFACCIA GRAFICA ....................................................................26

5.1 Colore e scelte comunicative...................................................32

5.2 Scelta dei caratteri.................................................................33

6 SCELTE E TECNOLOGIE DI IMPLEMENTAZIONE ....................................35

ALLEGATI .........................................................................................36

1.INTRODUZIONE

Il progetto PassengerBicocca.it nasce come un esperimento di interazione che prova a mettere vicini dei luoghi fisicamente anche molto distanti, preferendo ad una gerarchia di contenuti spaziale una puramente legata alle preferenze ed agli interessi del target. Ogni soggetto si identifica con una particolare categoria di utente ed in base a questa viene guidato e seguito nel soddisfacimento delle sue esigenze. L’interfaccia grafica suggerisce un’ambientazione sub-urbana, ed i menu di navigazione riprendono lo stile tipico delle mappe che si trovano nelle stazioni ferroviarie e metropolitane.

Il primo vantaggio di questa strategia è che i contenuti sono distribuiti lungo delle Linee che partono dall’utente, percorrono la mappa seguendo un percorso, non casuale, dove ogni fermata corrisponde ad una categoria di informazioni. La mappa rappresenta il cuore del sito, il punto di partenza per ogni ricerca. Abbiamo immaginato che ogni soggetto fosse accompagnato nella navigazione da colori e percorsi preferenziali che rendano l’interazione più comoda e coerente, diventando così un Passenger con il massimo dei comforts. Ogni percorso, ogni contenuto ed ogni consiglio sono pensati per quella particolare tribù in modo da creare il percorso più breve per raggiungere l’informazione desiderata.

Il secondo vantaggio, quello sul quale abbiamo concentrato tutta la nostra attenzione, è quello di semplificare la ricerca al’utente, sia in termini temporali che visivi, il quale non deve porsi il problema di “trovare” la categoria giusta; una volta scelta la tribù il percorso gli consiglierà da dove iniziare a cercare. La fermata più vicina sarà quella che ha più probabilità di soddisfare la sua richiesta, mentre le fermate in grigio sono state ritenute non pertinenti (non per l’utente, ma per la tribù!) e contengono informazioni sintetiche. Se l’utente vuole accedere ad informazioni più dettagliate su quell’argomento/categoria evidentemente dovrà cambiare tribù/linea della metro.

1

2.BENCHMARK

Il nostro primo approccio è consistito nell’elaborare una serie di interfacce onepage site (come richiesto dal brief) che potessero svolgere al meglio il compito di contenere informazioni strutturate per tribù. La prima proposta consisteva in un sito con una griglia grafica istituzionale e con un menu di navigazione organizzato per corsie, dove ogni corsia apparteneva ad una tribù. Abbiamo comunque subito abbandonato l’idea dello scrolling appena ci siamo confrontati con la mole di contenuti che il nostro sito avrebbe dovuto ospitare.

Riportiamo alcuni siti che ci hanno aiutato negli spunti grafici:

http://www.pikaboo.be/#overlay_news

http://www.metadesign.ch/html/de/index.html

http://www.nathan.com/thoughts/index.html

http://www.rocksteadyrootsofreggae.com/english/rocksteady.html

http://www.mediaflash.ca/portfolio/james_taylor.html

Nel frattempo però riflettevamo su come realizzare un’interfaccia che potesse essere allo stesso momento intuitiva, comunicativa e cool. La maggior parte dei siti che abbiamo trovato utilizzava un sistema di “scroll automatico” della pagina che abbiamo ritenuto molto accattivante in contesti con ridotta quantità di contenuti come siti personali o di presentazione professionale. Con una ricca quantità di contenuti, invece, risultava un effetto particolarmente fastidioso ai fini della navigazione. Abbiamo poi trovato questo sito: http://cpeople.ru/#portfolio-web. Molto accattivante, non eccessivamente scarno di contenuti e con una navigazione rapida e piacevole.

Da qui ci siamo mossi verso la prima proposta e stesura del primo prototipo (vedi §4.1).

Abbiamo iniziato a ragionare in funzione del menu di navigazione: doveva essere esteso, accessibile a tutti gli utenti a prescindere dalla loro tribù, ma doveva allo stesso tempo essere evidente ciò che era specifico per una tribù e cosa no.

2

Volevamo accompagnare l’utente alla scoperta del quartiere Bicocca, guidandolo verso un percorso consigliato, ma non per questo limitante e restrittivo. Volevamo insomma “consigliare” al nostro utente ciò che con maggior probabilità sarebbe stato nei suoi interessi, ma senza negargli l’opportunità di accedere agevolmente a qualsiasi categoria di informazioni del sito, senza per questo dover necessariamente identificarsi in un’altra tribù.

Così è venuta fuori l’idea di una mappa concettuale che assumesse forme e colori diversi, generando dei percorsi costruiti secondo le esigenze dei membri delle diverse tribù (vedi §4.2). L’idea grafica prende le sue prime mosse grazie ad un sito portfolio molto particolare che contiene le illustrazioni create da un artista che trova ispirazione nelle espressioni dei passeggeri delle diverse metropolitane del mondo:

http://www.subway-life.com/

In questo esempio gli incroci delle linee rappresentano le città visitate dall’artista, e cliccando su uno di questi nodi si attiva una navigazione basata su un effetto zoom sulla mappa. Le informazioni relative all’artista, ai supporters, così come la sezione contatti, sono posizionate nelle zone periferiche della mappa virtuale. E non è certo un caso se la città natale dell’artista, Lisbona, si trova invece al centro.

Il fascino della mappa, la grafica minimalista, l’efficacia comunicativa di percorsi colorati, il paradosso di una metro virtuale in sostituzione di una metro reale, inesistente, hanno fatto sì che questa divenisse l’Idea su cui lavorare.

Molti punti però rimanevano in sospeso:

Come organizzare le tribù?

Come gestire graficamente e concettualmente il menu di navigazione? Ed i contenuti?

Realizzare una mappa che riprendesse geograficamente i punti di interesse delle diverse tribù ci è subito sembrata un’idea troppo scontata ed inutile: se qualcuno vuole sapere dov’è un bar va sul sito del bar (o più semplicemente ricerca su Google “bar bicocca”) che magari sfrutta già un mashup con googleMaps. Sfruttare invece uno spazio totalmente virtuale, dove i punti di interesse sono disposti a seconda di un coefficiente di importanza assegnato dalle diverse tribù…è tutta un’altra cosa!

Tuttavia per la realizzazione della mappa avevamo bisogno di un numero sterminato di “mappe vere” dalle quali estrarre quante più informazioni grafiche possibili, ne riportiamo alcuni esempi:

http://www.visualcomplexity.com/vc/

http://informationarchitects.jp/ia-trendmap-2007v2/

Per quanto riguarda i contenuti abbiamo attinto a piene mani dal sito MyBicocca.It, che è stato molto utile per dimensionare la mole di dati che l’interfaccia avrebbe dovuto visualizzare.

3

Per completezza riportiamo anche una serie di strumenti che ci hanno aiutato nelle diverse fasi di realizzazione e ricerca:

Realizzazione di mockup veloci e portabili: http://www.balsamiq.com/;

Wireframes e flowchart: http://www.axure.com/, http://www.lovelycharts.com/

Ispirazioni e ricerche sui font: http://www.fridayfonts.com/, http://www.fonttester.com/, http://www.ms-studio.com/FontSales/mostra.html, http://www.alistapart.com/;

Ispirazioni per le tribù: http://designerscouch.org/show_news/873/the-elemental-self-portraits-of-levi-van-veluw.html;

Codifica dei colori: http://www.colourlovers.com/blog/2010/01/18/color-identifying-system-for-the-color-blind

Ispirazioni grafiche ad alto grado di interazione: http://www.datadreamer.com/2daudio/projecttwo.html, http://www.inudge.net/index.en.html, http://www.infinitewheel.com/infinite_wheel.html, http://www.victortaba.com/;

Cromoterapia e colorwheels: http://www.disinformazione.it/cromoterapia.htm, http://www.paper-leaf.com/blog/wp-content/uploads/2010/01/ColorTheory_Screen_White.jpg, http://www.colorjack.com/sphere/;

Contenuti: http://www.niguardaonline.com/, http://www.mybicocca.it/categorie.html;

4

3.STEREOTIPIZZAZIONE DEGLI UTENTI

Lo studio sull’interazione è partito da una considerazione iniziale che ha modellato l’intero progetto in ogni sua fase: il quartiere Bicocca ospita una popolazione molto eterogenea, composta da residenti e city users di diverso tipo; questi ultimi sono ulteriormente suddivisibili in occasionali, lavoratori e studenti. Ognuno di questi stereotipi “usa” e vive il quartiere in modi ed orari completamente diversi, tanto da suggerire l’idea di trovarsi di fronte a dei compartimenti stagni entro i quali i diversi soggetti si muovono; delle vere e proprie tribù autonome ed indipendenti l’una dall’altra.

Per le ricerche sociologiche si è proceduto all’elaborazione ed alla somministrazione di quattro questionari (vedi ALLEGATO A), uno per ogni stereotipo, attraverso i quali si è indagato su cinque linee guida principali:

• Anagrafica;

• Trasporti;

• Bar/Ristoranti;

• Servizi e tempo libero;

• Università e Aziende;

Inoltre si è proceduto a delle interviste di gruppo e a delle osservazioni ambientali, per permetterci di carpire al meglio gli elementi distintivi tra le singole tribù.

5

3.1.STUDENTI

La tribù studenti è stata la prima ad essere individuata, in quanto la più numerosa negli orari diurni. Si tratta per lo più di city users che vengono in Bicocca la mattina e ritornano a casa nel pomeriggio tardo. Frequentano soprattutto la zona del campus universitario e raramente superano i confini immaginari della stazione di Greco-Pirelli e di viale Sarca. Trovano tutto ciò di cui hanno bisogno per studiare e per pranzare e molti di essi passano anche un po’ del proprio tempo libero tra la palestra, il bicocca village con cinema annesso, i locali per gli aperitivi ed il teatro. Uno dei problemi principali sempre riscontrati è il trasporto pubblico carente.

3.2.LAVORATORI

I lavoratori sono una categoria molto simile a quella degli studenti, seppure più eterogenea. Si va infatti dall’operaio al dirigente, dall’addetto alle pulizie dell’università al ballerino che fa le prove nel Teatro degli Arcimboldi. Incarichi, orari e soprattutto budget molto differenti, determinano delle abitudini contrastanti che però si evidenziano soprattutto nelle fasce orarie in cui queste diversità entrano a più stretto contatto: la pausa pranzo.

3.3.RESIDENTI

I residenti rappresentano una categoria molto complessa da studiare e da raggruppare, infatti essi sono molto difficili da intercettare e osservare. La maggior parte di essi fa parte di un nucleo familiare ristretto dove i due membri coniugi percepiscono entrambi uno stipendio. Sono spesso famiglie giovani, con figli con età comprese tra i 0 e i 14 anni. Abbiamo inoltre notato che la maggior parte dei bambini trascorrono la giornata con le nonne, ed infatti si incontrano spesso delle signore anziane che passeggiano per il quartiere spingendo carrozzine e passeggini; ma ci è apparso anche evidente che sono in generale le donne a frequentare il quartiere e ad usufruire dei servizi. Gli uomini invece non si vedono quasi mai, se non nel tardo pomeriggio, impegnati a fare jogging per i viali. A questo proposito abbiamo concluso che per la tribù dei residenti “la Bicocca è Donna”.

6

3.4.OCCASIONALI

Gli occasionali, come già accennato, sono una categoria molto particolare, composta da tutti quei soggetti che si recano in Bicocca con un intento ben preciso per poi, una volta realizzato, ritornare a casa. I punti di interesse per questo tipo di city user sono molti, ma riguardano soprattutto attività dedicate al tempo libero come il cinema, il teatro, la palestra o il Bicocca Village. Sono per lo più giovani con età compresa tra i 18 ed i 35 anni, più una porzione piuttosto nutrita di adolescenti appassionati di skateboard e pattini in linea che sfruttano i viali sgombri della domenica pomeriggio. Molti frequentano la Bicocca anche di sera, vanno “forte” locali come il SIO Cafè ed il Maga Furla. Questa, che potrebbe sembrare una tribù di importanza marginale, invece riveste un fondamentale ruolo di complemento per le altre tribù, infatti, per esempio, il lavoratore che si ferma in Bicocca per andare in palestra non è più un lavoratore, ma diventa un occasionale. Allo stesso modo la studentessa che sceglie di fermarsi dopo le lezioni per andare dall’estetista in viale dell’Innovazione, non dovrà cercare le informazioni che le servono da studente, ma da occasionale.

3.5.MOODBOARD

La naturale conclusione del lavoro di ricerca sugli stereotipi è stata il montaggio di quattro moodboards per le quattro tribù. In questa fase abbiamo pensato al nostro target in maniera molto realistica, immaginando i nostri soggetti alle prese con la “vita vera” in Bicocca. Inoltre l’idea di un minimalismo grafico, tutto votato all’efficacia comunicativa diretta, ci ha permesso di andare oltre la ricerca semiotica di simboli più o meno rappresentativi (come le Converse AllStar per gli studenti, piuttosto che la borsa della spesa per il residente). Infine, associare degli oggetti grafici molto identificativi, rischiava di distogliere l’attenzione dell’utente dalle altre tribù, rendendo poco agevole il passaggio da una tribù all’altra. Il risultato è lo storyboard di un fumetto (vedi ALLEGATO B). Il nostro target dunque è fatto di persone vere, che parlano tra di loro e si scambiano informazioni, consigli e battute taglienti, il tutto negli spazi del quartiere più avveniristico di Milano. In questi dialoghi e riflessioni i soggetti si identificano velocemente, e questo ci ha permesso di progettare la navigazione ed i contenuti in maniera molto confidenziale, con un registro informale ed accattivante.

7

Montaggio di una scena per la tribù Occasionale.

8

4.WIREFRAME

Il primo wireframe che presentiamo corrisponde alla prima proposta di progetto, cioè quella di un one paige istituzionale che organizza i contenuti secondo una navigazione semplice, basata su una homepage dalla quale si seleziona la tribù di appartenenza e si termina nella finestra full-screen dedicata alla tribù, con un menu di navigazione interno per ogni categoria individuata. La pagina contiene un header dal quale è possibile cambiare tribù in ogni momento, mentre ai contenuti è riservata tutta la parte destra della griglia grafica.

Il secondo invece rappresenta la base di quello che sarà il prototipo finale e presenta una struttura di navigazione più complessa sulla quale è necessario soffermarsi. Il primo passo che compie l’utente consiste nella scelta del tipo di Passenger per poi ritrovarsi direttamente sulla mappa delle categorie. Il percorso è diverso per ogni tribù e questo comporta che una categoria può essere importante e prioritaria in un percorso, mentre sia marginale in un altro. Inoltre è previsto che alcune categorie in alcuni percorsi non siano incluse, proprio perché ritenute poco importanti dagli stereotipi studiati. Al soggetto però è permesso di vedere comunque le sottocategorie in “grigio” ma i contenuti di queste saranno neutri e sintetici. Se vuole avere informazioni più dettagliate dovrà cambiare tribù, diventando ad esempio un Passenger Occasionale (la tribù più generica).

9

4.1. PRIMO PROTOTIPO

La chiave di lettura che ha guidato la creazione di questo prototipo è stata quella di accontentare ogni tipologia di utente fornendo una navigazione semplice, lineare, con contenuti facilmente reperibili e possibilmente piacevoli.

Homepage

10

L’intenzione era quella di differenziare il percorso di navigazione di ogni utente oltre che per i contenuti testuali e di navigazione, anche con una grafica improntata su scelte fotografiche che facessero sentire a proprio agio ogni utente. L’intenzione era quella di trovare dei “dettagli” fotografici attinenti al contenuto di ogni sezione che fossero subito riconoscibili dai membri delle tribù. Volevamo le Icone perfette…semiosi alla massima potenza, ma senza trigger.

Contenuti

Abbiamo realizzato una bozza grezza di questa versione, per sperimentare l’impatto che avrebbe avuto sull’utente e avere un piccolo assaggino di interfaccia.

11

Home per la tribù Studente.

12

Finestra contenuti per la tribù Studente con menu di navigazione interno.

13

Home per Lavoratore.

14

Struttura dei contenuti per il Lavoratore.

15

Home per la tribù Residente.

16

Struttura della finestra contenuti per la tribù Residente.

17

Pagina home per la tribù Occasionale. In questa fase del progetto la tribù aveva ancora il nome provvisorio Passante.

18

Finestra contenuti per la tribù Occasionale.

A malincuore abbiamo abbandonato quest’idea che piaceva molto a tutti e tre soprattutto per la navigazione suggestiva data dalle fotografie. Purtroppo (e a questo punto, per fortuna!) abbiamo ritenuto banale e poco innovativa questa proposta, ma soprattutto non si prestava a una navigazione estesa e non gerarchica.

4.2.SECONDO PROTOTIPO

Abbiamo iniziato a ragionare in funzione del menu di navigazione: doveva essere esteso, accessibile a tutti gli utenti a prescindere dalla loro tribù, ma doveva allo stesso tempo essere evidente ciò che era specifico per una tribù e cosa no.

L’idea principale era la mappa, una mappa geografica o concettuale, con effetti 3D o piana. Dopo prove e tentativi innumerevoli che hanno coinvolto attivamente ogni componente del gruppo con le idee più disparate, abbiamo optato per una scelta minimalista, per ridurre al minimo la complessità di navigazione, per prediligere l’immediatezza e per rendere il più possibile esplicito il nostro “consiglio” di navigazione.

19

Il progetto che poi abbiamo realizzato si focalizza su 3 concetti principali che distinguono ogni tribù:

- Colore

- Percorso

- Silhouette

Ogni tribù è infatti identificata da un colore che segue l’utente nel corso della navigazione sin dal momento in cui sceglie la sua tribù. Per accentuare la percezione della tipologia di tribù abbiamo utilizzato un sistema iconografico dato dalle silhouette che ben si conciliano con le nostre intenzioni minimaliste e permettono all’utente di identificarsi senza troppi fronzoli.

La posizione delle tribù in homepage è definita in base alla quantità di attività nel quartiere svolte da ogni tribù. Dai questionari abbiamo dedotto la seguente sequenza:

- Residenti

- Lavoratori

- Studenti

- Occasionali

Homepage

20

Dopo la scelta della propria tribù l’utente si trova di fronte a una mappa in stile sub-urbano, con un percorso differente per ogni tribù. Il percorso è anch’esso identificato dal colore e collega ogni categoria di contenuto in funzione dell’importanza che riveste per ogni singola tribù.

Avremo quindi come prima tappa consigliata agli studenti la categoria “Istruzione”, per i lavoratori la categoria “Trasporti”, per gli occasionali il “tempo libero” e per i residenti i “servizi”, e così via a seguire tutte le altre categorie.

Sezione mappa

Le categorie hanno un a posizione fissa che non cambia al cambiare della tribù, ciò che cambia è il percorso che le collega.

La disposizione delle categorie nella pagina è stato determinato in base alla quantità di utenti interessati ad una particolare categoria. In base a questo criterio abbiamo posizionato nella parte centro/sinistra della pagina le categorie che saranno più visitate, quelle che a detta dei questionari, sono risultate le informazioni maggiormente ricercate da tutti gli utenti; abbiamo posizionato sul lato destro e verso la parte bassa della pagina quelle categorie che invece sono visitate da una stretta cerchia di utenti. Abbiamo tentato di mantenere questa classificazione il più possibile coerente, nonostante i compromessi che siamo stati constretti a trovare in fase di costruzione dei percorsi. Attività risultata particolarmente complessa.

21

Grafico delle priorità per le singole tribù, ottenuto dai risultati dei questionari e dalle osservazioni sul campo. Sull’asse delle y troviamo il livello di priorità, valore compreso tra 1 e 8, con 1 priorità massima e 8 priorità minima; sull’asse delle x le categorie scelte.

22

Questa disposizione è particolarmente visibile dalla mappa completa, mai visibile durante la navigazione, in questa versione con tutti i percorsi evidenziati.

Mappa del BicoccaPassenger.

Come si nota chiaramente la concentrazione dei percorsi è molto più intensa nella zona sinistra della pagina, nelle categorie “Trasporti”, “Servizi” e “Ristoro” meno intensa nelle restanti.

Ogni utente visualizza il suo specifico percorso, con le categorie di suo interesse evidenziate e quelle che non sono di suo interesse “spente” e non toccate dal percorso. L’utente senza dover necessariamente cambiare categoria, cosa possibile sia dalla homepage sia dalla mappa di navigazione, può accedere anche ai contenuti non prettamente di suo interesse.

23

Contenuti

24

Diagramma di flusso della mappa Categorie.

25

5.INTERFACCIA GRAFICA

La realizzazione dell’interfaccia grafica ha comportato un livello di difficoltà molto alto, perché requisiti di leggibilità e di percezione dovevano essere associati alla creazione di una mappa. Il PassengerBicocca non ha una griglia grafica canonica, ma nonostante questo doveva rispettare i requisiti fondamentali di:

• Coerenza/Consistenza;

• Modularità;

• Flessibilità;

• Facile memorizzazione.

Per fare questo abbiamo sperimentato numerose tecniche di costruzione di una mappa, tentando anche di creare degli effetti 3d che potessero rendere la navigazione meno “piatta”. Tuttavia questa strada è stata abbandonata innanzitutto perché si correva il rischio di complicare ulteriormente la navigazione e la comprensione delle categorie. Inoltre simulare degli effetti 3d rischiava di distogliere troppo l’attenzione dell’utente da quello che era lo scopo fondamentale della mappa: “Individuare velocemente il punto d’interesse”.

Presentiamo ora alcune prove riguardanti la Home Page:

Primo prototipo. La Home e la mappa sono integrate in un'unica interfaccia.

26

Seconda versione della Home Page con scelta della tribù.

Home Page finale, con sfondo tematico.

Come si può notare la prima idea di unificare mappa e scelta della tribù è stata subito abbandonata per un problema di sovrapposizione dei contenuti, preferendo invece una home più semplice come interazione, ma più espressiva del mood di tutto il sito. Il Logo è passato da una emulazione del logo della metro di Londra a qualcosa di più particolare, ma sempre in stile street.

27

Passiamo ora ad illustrare alcuni dei tentativi che si sono avvicendati nella scelta dell’interfaccia di navigazione. Iniziamo con tre schizzi realizzati su cartaceo che rappresentano tre varianti di mappa per poi passare alla presentazione delle diverse sperimentazioni digitali:

Primo schizzo di interfaccia a mappa con tribù posizionate al centro.

Seconda variante di mappa con percorsi paralleli e tribù invisibili.

Come si può osservare tra le due mappe esiste una differenza fondamentale che è risultata determinante per tutte le scelte future. La posizione delle tribù e la disposizione delle categorie non potevano essere assegnate a caso, né tantomeno essere disposte secondo un mero criterio estetico. Inoltre nella prima interfaccia avevamo integrato al centro della mappa una “manopola” di selezione tribù con la quale era possibile scegliere la tribù di appartenenza attraverso la rotazione di questa

28

ruota dentata. Questa idea è stata però abbandonata per l’estrema difficoltà di gestione degli incastri simultanei, che combinavano tribù diverse con categorie diverse, creando delle difficoltà interpretative critiche.

Prima versione di mappa con sfondo nero con posizionamento delle tribù agli angoli estremi dell'immagine ed una prima priva di finestra trasparente per i contenuti.

Seconda versione di mappa sempre su sfondo nero, con un header che riprende il mood ed il logo. Le Tribù ora sono passate al centro dell'immagine.

29

Terza versione simile alla precedente ma con l'idea di visualizzare le sottocategorie al click.

Primo prototipo di interfaccia definitiva della mappa nella versione Passenger Occasionale.

Come si può osservare anche la mappa è cambiata molto, sia per delle varianti grafiche rilevanti, ma anche per il numero di nodi/categorie che lentamente sono aumentate, ed è aumentata con loro la complessità dei percorsi. Infatti le sfere che rappresentano le fermate accessibili al Passenger in questione sono disposte sulla mappa secondo un ordine di importanza complessivo per tutte e quattro le tribù, ottenuto attraverso l’analisi accurata dei dati raccolti con i questionari e le interviste. In base a questa “somma di preferenze” incrociate per tribù abbiamo disposto le categorie più importanti più vicine al centro e quelle meno in periferia. Questa scelta crea dei percorsi graficamente meno intuitivi e più intrecciati, ma permette di mantenere viva la distinzione tra i percorsi delle diverse tribù. L’iconografia delle tribù

30

al centro riprende il tema della home page, a rafforzare l’idea del punto di partenza costituito dalla fermata posta su una banchina di una stazione ferroviaria.

A questo punto la mappa era completa. Rispettava tutte le caratteristiche e le specifiche. Ma c’era qualcosa che ancora confondeva la navigazione e la visibilità generale dei percorsi. Se gli intrecci sui nodi erano indicativi dell’importanza della categoria, indipendentemente dalle tribù, quel groviglio di percorsi grigi lasciava una sensazione di posticcio, di disordinato. Le nostre intuizioni sulle priorità e sui percorsi preferenziali andavano così troppo a scapito della chiarezza. Anche la scelta del background si è subito rivelato un annoso problema di sovrapposizione di colori e sfumature. Serviva qualcosa di ancora più comunicativo, ma allo stesso momento semplice e sobrio; qualcosa che riprendesse lo stile street urbano, ma che avesse una coerenza grafica propria delle mappe metropolitane. Sfere e percorsi luccicanti dovevano essere sostituiti da qualcosa più “percorribile”, almeno con gli occhi, di più ergonomico insomma. Le sottocategorie erano carine, ma occupavano troppo spazio, ed anche i percorsi dovevano essere accorciati.

Il secondo prototipo ora aveva tutte le premesse necessarie per poter essere perfetto:

Versione finale della GUI del BicoccaPassenger con categoria Ristoro aperta.

Voilà.

31

5.1. COLORE E SCELTE COMUNICATIVE

La scelta dei colori è stata sicuramente fondamentale per lo sviluppo di tutta la grafica, difatti i nostri stereotipi sono identificabili nella mappa proprio grazie al colore di appartenenza della tribù scelta. Dato l’uso che ne avremmo dovuto fare, i colori delle tribù sono stati scelti tra i colori primari, per permettere un contrasto deciso, aiutato da una forte saturazione. Sfondo Nero! D'altronde un tema ispirato ad una stazione sub-urbana condiziona (positivamente!) una scelta cromatica altamente ergonomica, soprattutto in un ambiente virtuale dove i riferimenti visivi sono totalmente sconosciuti all’utente. Entriamo allora nel dettaglio dei colori delle tribù per poi soffermarci sulle scelte di sfondo e di contenuto.

Per il Passenger Occasionale, quello con un accesso più ampio, abbiamo scelto il colore Giallo (ffb616). Questo colore esprime sicurezza e fiducia, è il colore che più ricorda il Sole, esprime quindi un movimento di espansione. La scelta del giallo quindi è ricerca del nuovo, del cambiamento, della liberazione dagli schemi. Sinonimo di vivacità, estroversione, leggerezza, crescita e cambiamento. Stimola l'attenzione e l'apprendimento, acuisce la mente e la concentrazione.

Al Passenger Residente, che come abbiamo già detto è per la maggior parte donna, è stato assegnato il colore Rosso (e6474c). Appariscente, intenso, stimolante è il simbolo dell'amore e della passione. La scelta del rosso corrisponde ad uno stato d'attivazione, ad uno slancio diretto verso la conquista, ad un desiderio ardente ed in espansione. Il rosso rappresenta, infatti, la mobilitazione di tutte le energie, cui corrisponde la sicurezza di sè, la fiducia nelle proprie forze e capacità.

Per il Passenger Studente invece è stato scelto il colore Verde (00cc33) che è il colore della Natura, del mondo vegetale. Indica immaturità. Per i buddisti rappresenta la vita. E' un colore neutro, rilassante, favorisce la riflessione e la calma… indispensabili nei periodi d’esame.

Infine il Passenger Lavoratore è contrassegnato con il classico colore Blu (3e7cc9). Blu è anche adatto ad insegnanti, venditori, agli artisti o a chi svolge un lavoro di gruppo. Simboleggia fiducia, saggezza, intelligenza, fedeltà e costanza. Uno studio eseguito da ricercatori canadesi dell’University of British Columbia (Canada) e pubblicato su “Science” rileva che se le pareti dell’ufficio sono dipinte di blu si è più creativi e sono perfette per designer creativi, pubblicitari ed inventori!

32

Tabella colori.

5.2.SCELTA DEI CARATTERI

Il primo problema affrontato nella scelta dei font è stato quello della compatibilità tra una piattaforma e l’altra, infatti al cambiare dei sistemi operativi cambiano i font installati e questo fa si che il lettering debba essere scelto sia per il giusto valore espressivo, di leggibilità, di gradevolezza e di identità rispetto alla comunicazione ma anche e soprattutto alla compatibilità tecnologia/software scelta (Bollini, Greco, 2008).

Al fine di rispettare queste specifiche abbiamo scelto di integrare i testi relativi alle etichette della mappa nell’immagine di sfondo, in modo da poter avere ampia scelta sul font senza condizionare la visibilità. Per i contenuti invece abbiamo optato per dei font universalmente riconosciuti e creati espressamente per la massima leggibilità. L’altra ipotesi preliminare era che la coerenza del mood ci imponeva la scelta di caratteri adatti ad un ambiente urbano e metropolitano e che si sposassero l’idea di stazione ferroviaria. Sicuramente la scelta sarebbe ricaduta su una carattere bastoni, di facile lettura, che magari fosse già stato usato da segnaletiche ferroviarie famose.

33

Inizialmente avevamo pensato di usare un font storico come l’Helvetica, già usato per il wayfinding della New York CitySubway, ed in una versione revisionata da Bob Noorda, anche per la Metro di Milano. Dati i problemi di reperibilità e portabilità abbiamo scelto di usare un Verdana, in stampatello per i nomi delle tribù ed in stampatello minuscolo per tutti gli altri testi. Ora però avevamo una mappa che “funzionava” per leggibilità e per chiarezza; avevamo dei contenuti ben titolati e dei sottotitoli con il giusto rilievo, ma la finestra contenuti rimaneva piatta. Ci voleva qualcosa per spezzare la monotonia quasi matematica del carattere bastoni, così abbiamo scelto per i testi una famiglia di graziati “super browsersafe” e ottimizzata per l’uso digitale.

In conclusione abbiamo:

• [Georgia, “Times New Roman”, Times, serif] per i testi e link dei contenuti;

• [Verdana, Geneva, sans-serif] per titoli ed etichette della mappa.

Contenuti

34

6.SCELTE TECNOLOGICHE E DI IMPLEMENTAZIONE

Abbiamo scelto di implementare il sito utilizzando, come complemento all’html e ai css, il framework JQuery. JQuery nasce nel 2006, ad opera di John Resig, con il principale intento di produrre un framework che consentisse di scrivere codice molto sintetico e ottenere funzionalità, manipolazione di CSS, ed effetti grafici con poche righe di codice, come recita il claim:”write less, do more”.

Altra caratteristica importante che ci ha fatti propendere per questa scelta riguarda la compatibilità cross-browsing. L’uso di javascript spesso pone gli sviluppatori in condizioni di difficoltà per quanto riguarda la compatibilità con i vari browser, i quali possiedono un proprio motore javascript atto a interpretare il codice. Il risultato è spesso quello di avere tra le mani degli script fuori dal proprio controllo. Tramite framework si supera questa barriera, come già ha insegnato il noto Prototype. JQuery inoltre offre una serie di plug-in con i quali può essere esteso, permettendo di aggiungere numerose funzionalità oltre a quelle predefinite.

La navigazione del nostro sito prevedeva una struttura a pannelli e una necessità abbastanza imponente di manipolare agevolmente i CSS e gestire transizione tra un pannello e l’altro. Nessuno di noi conosceva precedentemente JQuery, questa scelta è nata quindi da informazioni reperite in rete. Con il senno di poi possiamo dire di aver fatto una scelta azzeccata. L’utilizzo che ne abbiamo fatto è comunque abbastanza basilare; non ci siamo spinti verso funzionalità più avanzate, che abbiamo sperimentato ma che non si prestavano particolarmente bene all’approccio minimalista che abbiamo adottato.

Per la creazione delle mappe abbiamo invece utilizzato Adobe Illustrator, che si prestava particolarmente alla generazione di percorsi graficamente ordinati e lineari, consentendo una gestione completa ed esaustiva delle linee. Inoltre ci risultavano agevoli tutte le modifiche che abbiamo dovuto apportare in corso d’opera, rispettando sempre i requisiti primari di chiarezza e leggibilità.

35

ALLEGATO A

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

ALLEGATO B

COPIONE OCCASIONALI

SCENARIO TRASPORTI: I city users raggiungo il quartiere Bicocca in automobile. Solo alcuni prendono i mezzi soprattutto perché non è collegato bene con la metro e questo disincentiva molto:

Scena 1: E’ sera ed un gruppo di ragazzi si trova davanti al Bicocca Village per vedere un film al cinema.

A. Ho dovuto prendere tre mezzi diversi per arrivare qui…Voi invece, comodi comodi in macchina!

B. Non ti lamentare sempre, qui almeno c’è tutto! A proposito

Scena 2:E’ una bella giornata e Giovanna ha deciso di fare una passeggiata in bicicletta spostandosi da Sesto Marelli, dove vive.

A. Ho fatto bene a venire da queste parti, di giorno è pieno di gente. Ma non c’è tanto traffico…

A. …e già che ci sono faccio anche la spesa.

SCENARIO TEMPO LIBERO: In Bicocca il cinema ed il centro commerciale rappresentano i punti di maggiore interesse, ma anche i diversi bar e ristoranti sparsi per il quartiere attirano molte persone. E’ pur vero però che è opinione comune che il quartiere di sera è quasi deserto.

Scena 3: E’ sera e al teatro degli Arcimboldi va in scena un musical molto blasonato. Una coppia di fidanzati si appresta ad entrare in teatro.

A. (Lei) Che bello amore, non vedevo l’ora di vedere questo spettacolo, le mie amiche mi hanno detto che è bellissimo.

B. (Lui) Anch’io, amore. {Quand’è che mi deciderò a dirle che ODIO I MUSICAL!!!!! Fosse per me, me ne starei al Maga Furla qui vicino a sbevazzare un po’ di birra in tutta tranquillità}

Scena 4: Un gruppo di studenti della statale si trova in Bicocca per seguire una Lectio Magistralis di un rinomato professore d’ informatica.

A. Sono impaziente di ascoltare l’intervento di Tizio.

B. Io…ho fame.

54

A. Pensi sempre al cibo tu? Qui hai solo l’imbarazzo della scelta, ma prima ci sentiamo la lezione.

B. {Kebab o trancio di pizza?}

Scena 6: E’ sabato sera ed un gruppo di amici sta per entrare al Sio Cafè.

A. …è la prima volta che vego a ballare qui. La gente mi sembra apposto, tranne qualche truzzo ogni tanto, ma la musica com’è?

B. Guarda, l’ultima volta che ci sono venuto c’era una pista di commerciale e una hip hop.

SCENARIO IMMAGINE DEL QUARTIERE: I city users hanno un’immagine complessivamente positiva del quartiere, sarebbero pronti a lavorare in una delle tante aziende presenti e lo riconoscono come zona in forte espansione. Nonostante questo però molti di loro non verrebbero a viverci.

COPIONE LAVORATORI

SCENARIO PAUSA PRANZO: La maggior parte dei lavoratori pranza in una delle tavole calde o ristoranti che si trovano nel Bicocca Village, ma molti altri preferiscono portarsi un pranzo al sacco e consumarlo al’aperto. Molto dipende dalla stagione, ma molto dipende anche dallo stipendio percepito.

Abbiamo inoltre notato che nelle ore di pausa pranzo il Bicocca Village si riempie di lavoratori molto eterogenei, così come eterogenei sono i tipi di locali dove è possibile pranzare. Lavoratori di rango medio/basso consumano piadine e pizze al taglio, mentre dai quadri in su consumano veri e propri pranzi al ristorante. Da questo si capisce che le abitudini sono molto diverse e che il Bicocca Village in quelle ore diventa un centro di aggregazione molto interessante.

Scena 1: Si avvicina la pausa pranzo e un capo ufficio chiede alla sua segretaria di prenotare un tavolo per un pranzo di lavoro.

A. Luciana mi prenoti cinque posti nel mio ristorante preferito, viene a trovarmi mia moglie con i miei bambini e non voglio rischiare di non trovare posto.

B. Subito Dott. G. {Ma quale sarà il suo ristorante preferito?} {Vada per il più caro!}

55

SCENARIO TEMPO LIBERO: Molti lavoratori sfruttano le attrezzature e i servizi presenti in Bicocca, come i campi sportivi del Pro Patria, la palestra Virgin Active, ma anche ovviamente il teatro ed il cinema.

Scena 1: Colleghi di lavoro organizzano la partita a calcetto del venerdì sera.

A. Pronti per il partitone di domani? Dobbiamo schiacciare quei presuntuosi del commerciale.

B. Non vedo l’ora! Ma giochiamo al Pro Patria?

A. Certo! Domani portati il borsone e quando usciamo andiamo direttamente ai campi…e se vinciamo offro da bere a tutta la squadra.

B. …e se perdiamo????

Scena 2:Colleghe di lavoro si trovano nella pausa pranzo a parlare delle serate infrasettimanali.

A. Ragazze potremmo trovarci una sera di queste. Magari ci fermiamo per un aperitivo e poi andiamo al cinema! Ma senza fare tardi….

B. Buona idea. Io domani mi fermo qui per che vado in palestra alla Virgin, ma dopodomani si può fare.

56

COPIONE RESIDENTI

I residenti del quartiere Bicocca sono per la maggior parte delle coppie giovani con figli, quindi si potrebbe pensare che l’intero quartiere debba essere in grado di offrire servizi e infrastrutture orientati ai bisogni della classe d’età adulta compresa tra i 30 ai 45/50 anni, oltre che per la classe infantile e quella dell’obbligo scolastico. Inoltre è risultato dalle nostre analisi che le donne sono quelle che “vivono” molto di più il quartiere, infatti sono loro che lo popolano sia la mattina che nel primo pomeriggio. A questo proposito si potrebbe dire che “la Bicocca è Donna”.

SCENARIO SPOSTAMENTI: I residenti sono tutti motorizzati e molto spesso utilizzano la macchina o il motorino per spostarsi sia all’interno del quartiere, sia per spostarsi fuori. Per quanto riguarda i parcheggi ogni casa ha almeno un box auto a disposizione e soprattutto di sera i posti lungo le strade sono più che sufficienti. Dei mezzi pubblici, i più usati sono sicuramente la linea 7 del tram e le linee ferroviarie della stazione di Greco-Pirelli, ma si tratta soprattutto di casalinghe e teenager.

Nel quartiere ci si sposta molto anche a piedi, difatti spesso si vedono mamme o nonne, con e senza bambini piccoli passeggiare lungo i viali.

SCENARIO SERVIZI: Il residente si sente soddisfatto della capillarità dei servizi nel quartiere e risente positivamente della presenza di un grosso centro commerciale (il BicoccaVillage) situato nelle immediate vicinanze dei centri residenziali. L’unica nota di demerito avanzata da tutti i residenti è sulla mancanza di ampi spazi verdi alberati. Un altro disagio è rappresentato dai cantieri della metro e dai vari palazzi in costruzione.

SCENARIO TEMPO LIBERO: I residenti passano il loro tempo libero a fare sport e jogging. Raramente fanno shopping nel quartiere, mentre sembrano molto accreditati il teatro ed il cinema. Inoltre i membri di questa tribù passano molto tempo negli spazi pubblici come La Collina dei Ciliegi o le isole pedonali del centro del quartiere. Molti fanno jogging ed attività fisica di vario genere, soprattutto nel tardo pomeriggio.

SCENARIO RISTORO E CATERING: Il residente non va a mangiare al ristorante sotto casa, ma sicuramente si srevirà di Take Away e servizi di Catering. Al contrario invece Bar e Caffè saranno molto frequentati da questa tribù.

57

COPIONE STUDENTI

SCENARIO SPOSTAMENTI: Per spostarsi all’interno del campus gli studenti preferiscono camminare a piedi perché i mezzi fanno perdere troppo tempo. Chi ha la macchina la usa perché è molto comodo parcheggiare e il traffico è sempre scorrevole.

Scena1: Alla fermata di Precotto due studenti discutono mentre attendono il tram n°7 per arrivare al campus. Piove ed il tram tarda ad arrivare.

A. Tutte le volte che non ho la macchina prendo il 7 e tutte le volte arrivo in ritardo!

B. Guarda, sta arrivando l’86…non ti porta dentro il campus, ma almeno non rimani qui ad aspettare sotto la pioggia!

Scena2: Due studenti nei pressi dell’U6 discutono su come in segreteria studenti in via Temolo, dall’altra parte del campus.

A. Vado in segreteria a ritirare i nuovi badge.

B. Prendi l’Ecobus?

A. Ma va’…preferisco a piedi, faccio prima!!!

Scena3: Si è appena conclusa la lezione in U9, sono le 12:30 e un gruppetto di studenti discute su dove passare la pausa pranzo.

A. Beh…dove si mangia oggi, in mensa?

B. Noooo…di nuovo!!! Andiamo al Bicocca Village, in macchina sono due minuti!

A. Ah beh…se hai la macchina…

SCENARIO PAUSA IN BICOCCA: Gli studenti circolano all’interno del campus e sfruttano tutti gli spazi vivibili. Questo però mette in evidenza delle mancanze. Molti chiedono un parco dove poter pranzare e rilassarsi tra una lezione e l’altra.

Scena4: E’ una giornata di sole e gli studenti vorrebbero passare la pausa pranzo all’aperto, ma dove?

A. Usciamo a mangiare all’aria aperta!!??

B. Dove? Tra i palazzi o tra i cantieri?

Scena5: Come di consueto gli studenti pranzano in mensa ma hanno la possibilità di scegliere a quale mensa andare. Ogni edificio ha caratteristiche diverse!

58

A. Mensa dell’U6?

B. A quest’ora è un casino. Meglio in U12…facciamo prima.

SCENARIO APERITIVO SERALE: In Bicocca ci sono diversi locali che propongono aperitivi serali e moti studenti scelgono di rimanere dopo le lezioni. Anche il cinema rappresenta una grossa attrattiva così come il teatro degli Arcimboldi.

Scena6: In Bicocca ci sono molti locali ed è facile che gli studenti rimangano per un aperitivo o per andare al cinema.

A. Ragazzi domani non abbiamo lezione…ci fermiamo per un aperitivo?

B. Sì…e magari dopo possiamo andare al cinema, danno il nuovo film in 3D!

SCENARIO SERVIZI: Nel quartiere c’è tutto l’indispensabile in termini di servizi, basta solo saperlo! Copisterie e librerie, sportelli bancari e postali, farmacie e supermarket.

Scena7: Gli studenti fanno spesso acquisti su internet e per farlo hanno bisogno di avere delle carte prepagate. Lo studente A ha appena acquistato una carta PostePay per fare i suoi acquisti sull’iTunes in piena tranquillità.

A. Scusate per il ritardo ma in Posta c’era una coda infinita, ma almeno ora posso gestire l’account del mio nuovo iPhone!

B. Perché non sei andato in banca? Avresti sicuramente risparmiato tempo!

Scena8: Tra le diverse copisterie gli studenti scelgono quelle che offrono servizi particolari come la vendita di appunti o speciali offerte sulle fotocopie. I nostri hanno bisogno degli appunti delle lezioni del prof. X.

A. Hai visto gli appunti che mi ha passato Giulio?

B. Sì…sono gli stessi che ho stampato dalla copisteria!

59