Relazione di presentazione del progetto svolto durante il corso di Comunicazione Visiva e Design delle Interfacce. InBicocca si propone come un aggregatore di informazioni (knowledge-based) sul quartiere Bicocca di Milano, che vuole rispondere alle esigenze eterogenee di tutti gli utenti che usufruiscono di questo spazio urbano. Due sono gli obiettivi principali: il primo è quello di favorire la conoscenza del quartiere in un'ottica geolocalizzata, il secondo è quello di fornire informazioni aggiornate su novità ed eventi, stimolando la partecipazione attiva dei cittadini anche attraverso l'utilizzo di piattaforme social. A questo scopo abbiamo realizzato un sistema informativo ibrido, ovvero accessibile anche in mobilità, attraverso tablet.

1. 1
GRUPPO 9
Chiara Frantini 720385
Design dell’interfaccia ed esperienza utente
Melania Mauri 758951
Implementazione e sviluppo tecnologico
Sara Minoli 757088
Architettura dell’informazione ed usabilità
Teoria e tecnologia della comunicazione
Corso “Comunicazione visiva e Design delle Interfacce“
AA 2011-2012

2. 2
INDICE
Introduzione....................................................................................................................................3
Indagine preliminare......................................................................................................................4
Siti d’ispirazione
Fase progettuale............................................................................................................................8
Sviluppo dell’idea
Soluzione concettuale...................................................................................................................8
Architettura dell’informazione ed usabilità
Sistemi di navigazione
Design dell’interfaccia ed esperienza utente ............................................................................13
Aspetti grafico comunicativi dell’interfaccia
Scelte tipografiche
Implementazione e sviluppo tecnologico..................................................................................14
Compatibilità cross-browser e cross-device
Funzionamento del prototipo......................................................................................................14
Conclusioni...................................................................................................................................15

3. 3
INTRODUZIONE
Il progetto di seguito presentato nasce dall’idea di creare un aggregatore d’informazioni
(knowledge-base) sul quartiere di Milano-Bicocca, che risponda alle esigenze eterogenee di tutti gli
utenti che ogni giorno usufruiscono di questo spazio urbano. Il proposito è quello di creare quattro
accessi diversificati alle informazioni in base alla tribù di appartenenza degli utenti: residenti, universi-
tari, lavoratori, e city-user (come da brief).
Due sono gli obiettivi principali, il primo è quello di favorire la conoscenza del quartiere fisico-
attraverso un suo corrispettivo virtuale in un’ottica geolocalizzata; il secondo è invece quello di fornire
informazioni aggiornate su novità ed eventi, stimolando la partecipazione attiva dei cittadini anche
attraverso l’utilizzo di piattaforme social. Per far questo abbiamo realizzato un sistema informativo
ibrido, ovvero accessibile anche in mobilità, attraverso tablet, e che nel suo essere “applicativo” sI
distingue dal concetto classico di sito.
Il progetto ha previsto una fase preliminare in cui sono state indagate le esperienze dirette
degli utenti attraverso la somministrazione di un’intervista e di un test rappresentativo. Dalle informa-
zioni raccolte abbiamo sviluppato un’idea fino a giungere alla soluzione concettuale realizzata, che di
seguito presentiamo, andando ad analizzare tre differenti aspetti:
- Architettura dell’informazione ed usabilità;
- Design dell’interfaccia ed esperienza utente;
- Implementazione e sviluppo tecnologico.

4. 4
INDAGINE PRELIMINARE
Al fine di raccogliere informazioni utili allo sviluppo di un’idea, abbiamo sottoposto un’intervi-
sta qualitativa e un test rappresentativo ad un campione di 36 soggetti, 6 per ogni tribù e sotto-tribù
elencate nel brief. L’intervista (28 domande) era volta a:
- raccogliere i dati anagrafici generali dei soggetti;
- sondare la loro conoscenza ed esperienza del territorio urbano;
- investigare il grado di socializzazione in esso;
- indagare la loro fruizione del web 2.0, ed in relazione al quartiere Bicocca.
Dalle interviste è emerso che la maggioranza dei soggetti avverte la mancanza di spazi verdi (es.
parchi), e di situazioni che favoriscano la socializzazione (es. centri sociali o culturali, eventi), tanto che
la maggior parte di essi ha dichiarato di non trascorrere il suo tempo libero nel quartiere, e di lasciarlo
non appena finito di svolgere la propria attività di studio o lavorativa.
Il test rappresentativo è consistito, invece, nel disegnare la mappa del quartiere Bicocca.
I disegni ottenuti hanno evidenziato la scarsa conoscenza del quartiere da parte della maggioranza
dei soggetti, i quali spesso dimostrano di conoscere solo gli spazi adiacenti al tragitto effettuato quoti-
dianamente, in relazione alla loro destinazione e tribù di appartenenza (come evidente nella mappa a
lato).
Da questa indagine preliminare è emerso che le quattro tribù difficilmente trovano occasioni di so-
cializzazione e di integrazione all’interno del quartiere; un motivo potrebbe essere la posizione dei
differenti edifici nello spazio urbano (universitari, lavorativi, residenziali), che occupando “blocchi” di
territorio separati, consentono agli utenti di raggiungere la meta desiderata senza dover attraversare
zone non di loro interesse.

5. 5
Ecco da dove nasce l’esigenza di creare un sistema informativo che faccia da ponte tra questi quat-
tro spazi, e che promuova la partecipazione agli eventi proposti dalle diverse tribù, favorendo la cono-
scenza dello spazio urbano attraverso una fedele riproduzione virtuale del quartiere reale.
Siti d’ispirazione
Di seguito riportiamo i siti web da cui abbiamo tratto ispirazione.
Abbiamo considerato TimeOut.com come
esempio dei servizi offerti da un aggrega-
tore di informazioni nel caso delle grandi
città; TimeOut infatti è un sito che offre
informazioni su tutte le più importanti
città del mondo, tra cui anche Milano. In
particolare questo sito ci ha fornito spunti
interessanti per quanto riguarda la suddi-
visione in categorie delle attività presenti
sul territorio urbano.

6. 6
Da instablog.org abbiamo preso spunto per
quanto riguarda la resa delle categorie attra
verso le icone, con la descrizione relativa che
appare al passare del mouse.
Il sito milano.tonight.eu ci ha permesso di comprendere il funzionamento della ricerca geolocalizzata dei luoghi.

7. 7
Dal seguente layout (Behance Network) abbiamo tratto ispirazione per quanto riguarda l’aspetto grafico (impostazione
delle news, del menù, e per l’uso del colore).

8. 8
FASE PROGETTUALE
La fase iniziale è stata caratterizzata da un costante emergere di idee, elaborate e vagliate fino
a confluire in un solo concept. Il nostro punto di partenza è stato cercare di sviluppare un’idea di sito/
applicazione che fosse il più possibile fedele alle indicazioni del brief. Allo stesso tempo, abbiamo cer-
cato di individuare un layout grafico che potesse esprimere al meglio la soluzione concettuale definiti-
va.
Sviluppo dell’idea
Originariamente, abbiamo voluto pensare al quartiere come ad un luogo dato dall’insieme di
più “spazi” (università, lavoro, tempo libero, abitazioni), in costante interazione tra di loro. Gli utenti,
oltre a usufruire delle informazioni relative al loro spazio di appartenenza, avrebbero potuto trovare
interesse anche negli spazi vicini (es. residente che consulta gli eventi promossi dall’università). Si era
pensato quindi di permettere agli utenti di registrarsi al sito, specificando oltre alla tribù di appartenen-
za anche gli interessi personali, in modo da poter beneficiare di una navigazione “filtrata” e preferen-
ziale, e per ricevere, inoltre, periodicamente una newsletter personalizzata.
Fondamentale sarebbe stata poi una pagina Mappa del quartiere Bicocca, volta a aiutare le
persone ad individuare luoghi ed attività d’interesse attraverso un sistema di ricerca semantico (tag,
categorie), per facilitare l’orientamento in esso. Il sito avrebbe, quindi, offerto un servizio di marketing
geolocalizzato alle attività, dando loro la possibilità di presentarsi e promuoversi attraverso una pagina
personale.
In un’ottica social, si era pensato anche di realizzare un sistema di votazione e di commento
delle attività e degli eventi (rating e ranking), e un Social Wall, ovvero uno spazio adibito al dibattito e
alla libera circolazione di informazioni, ovviamente con un controllo da parte di un moderatore.
Nell’intento di realizzare un sito-applicazione rivolto ad una comunità territoriale ridotta, non
ci è sembrato appropriato sviluppare tutte le sezioni ipotizzate inizialmente. Per funzionare, un social
network necessita della partecipazione attiva e costante di molto utenti, condizione non facilmente
realizzabile in una situazione così specifica. Abbiamo quindi abbandonato l’idea di un sito di questo
tipo, puntando su un’applicazione che sfruttasse le potenzialità di condivisione dei social-network già
esistenti e più utilizzati (facebook, twitter), al fine di diffondere e promuovere il nostro sito il più possi-
bile.
SOLUZIONE CONCETTUALE
Il progetto del sito “InBicocca” è ispirato a criteri di essenzialità ergonomica e di facilità d’utilizzo.
Lo scopo principale è quello di offrire agli utenti del quartiere Bicocca, una selezione di informazioni
relative alle quattro categorie predefinite di utenti. Queste informazioni sono consultabili all’interno di
un unico pannello polifunzionale, contenente le news o la mappa informativa in base all’azione che si
vuole compiere.
Per consentire una navigazione preferenziale, abbiamo optato per un sistema di selezione del

9. 9
profilo desiderato mediante un’operazione che avviene al primo accesso. L’utente appena entrato nel
sito sarà invitato a scegliere la tribù di appartenenza, e da quel momento in alto a destra, comparirà
un omino del colore corrispondente. La selezione del profilo tribù si rivela, inoltre, più coerente con
l’architettura delle informazioni da noi utilizzata. Dopo il primo accesso, l’utente verrà indirizzato alla
pagina news del profilo tribù precedentemente selezionato. Si potrà comunque accedere ai contenuti
degli altri profili tribù cliccando sui bottoni relativi nel pannello centrale della pagina, oppure cliccando
su <Cambia profilo tribù> nel menù principale.
Abbiamo scartato la possibilità di effettuare una vera e propria registrazione, poiché non ritenuta
essenziale ai fini dei servizi offerti, e in quanto la compilazione di un form avrebbe dissuaso alla naviga-
zione buona parte degli utenti. Per ricevere gli aggiornamenti del sito abbiamo, quindi, abbandonato
l’idea della newsletter, che sarebbe stata possibile attraverso la registrazione, puntando invece sulle
potenzialità di condivisione dei social network già esistenti.
Il Claim “Non cercare, trova!” è un evidente invito alla navigazione, che nel nostro sito si rivela
guidata, in quanto l’utente è facilitato dalla stessa architettura dell’informazione, che gli indica qual’è il
percorso da seguire per trovare ciò che cerca.
La ricerca di informazioni richiede un dispendio di energia notevole, in quanto prevede anche
di scartare i contenuti superflui. Nel caso del nostro sito, la ricerca viene saltata, e la navigazione gui-
data, attraverso categorie precedentemente da noi selezionate, indirizza l’utente sulla strada giusta.
Anche il logo, un quadrifoglio composto dai pin dei colori che rappresentano le tribù, evocan-
do la fortuna, vuole enfatizzare l’opportunità di “trovare”, senza tentativi inutili di ricerca.
Architettura dell’informazione ed usabilità
Le pagine che sono state portate a realizzazione sono tre: homepage, pagina news, pagina
mappe. Tutti i contenuti sono consultabili in via preferenziale dopo aver selezionato la tribù di apparte-
nenza nella pagina iniziale.
Home page (scelta profilo-tribù)
La home page è la pagina-vetrina del sito: la
funzione dei quattro box 4 colorati, è quella
di far cogliere intuitivamente all’utente quali
sono le tribù tra cui può scegliere per comin-
ciare a usufruire dei servizi che il sito offre.
Questa pagina è visibile solo al primo acces-
so, e attraverso la scelta di un particolare
profilo-tribù permetterà all’utente, negli ac-
cessi successivi, di visionare direttamente le
informazioni di suo interesse. Di conseguen-
za l’omino-utente in alto a destra assumerà il
colore della tribù selezionata.

10. 10
Pagina News
La pagina news presenta un elenco di eventi
consultabili attraverso una barra di scorrimen-
to laterale e suddivisi per data, e in base alla
tribù a cui sono rivolti. Ogni news presenta
delle informazioni essenziali sull’evento a cui si
riferisce (tipo luogo, ora, argomento), e pre-
senta due link: uno che conduce ad una pa-
gina esterna al sito con maggiori informazioni,
ed un altro che porta alla pagina mappa, dove
consente di geolocalizzare il luogo presso cui
si terrà l’evento.
Sulla destra del box c’è un’immagine riferita
ad un evento principale del mese.
Pagina Mappe

In questa pagina, Ia maggior parte del box
principale è occupata da una mappa stati-
ca del quartiere Bicocca. I luoghi e le attività
risultano rintracciabili attraverso le categorie
identificate da icone, nel menù verticale a si-
nistra. Per ciascuna tribù abbiamo individuato
quelle categorie ritenute di maggior utilità, e
selezionate grazie alle opinioni raccolte degli
utenti del quartiere (es. ristoranti, bar, centri
sportivi, bancomat, cinema, teatro, aree verdi,
trasporti, ecc. ). Subito dopo aver seleziona-
to una categoria, appariranno sulla mappa
dei pin in corrispondenza della posizione dei
luoghi richiesti. Cliccando su di un pin, si aprirà una finestrella contenente brevi informazioni relative al
luogo/attività desiderati (es. indirizzo, numero di telefono, orari di apertura, link sito web).

11. 11
Qui di seguito riportiamo la mappa del sito.

12. 12
Sistemi di navigazione
La navigazione all’interno del sito avviene principalmente grazie ad un menù principale situato
in tutte le pagine in alto a destra. Per navigare invece all’interno delle singole pagine, vi è un menù
verticale differenziato sulla sinistra del box rettangolare con quattro tasti colorati che servono a filtrare
le informazioni in base alla tribù desiderata, e una colonna di tasti più piccoli che nel caso della pagi-
na news, contengono i diversi giorni della settimana corrente, nel caso della pagina mappe invece le
varie categorie. In quest’ultima pagina al passare del mouse sulle icone delle categorie appare una
finestrella con una scritta esplicativa delle varie icone, in modo da facilitarne il riconoscimento e l’ap-
prendimento.
Usabilità in mobilità
Nell’ottica di rendere il nostro sito “ibrido” ovvero accessibile anche in mobilità, abbiamo scelto
di realizzare poche pagine, con solo contenuti chiave di maggior interesse. La scelta grafica è finaliz-
zata a rendere più usabile e intuitivo il sito anche in mobilità. Ad esempio la posizione dei vari menù
secondari verticali suggerisce il percorso da seguire per usufruire delle informazioni offerte.
Inoltre, la misura adottata per il layout del sito 1024x768px permette di visualizzare la maggior parte
delle informazioni su tutti gli schermi orizzontali (pc, e teblet). Nel caso della visualizzazione verticale
(caso tablet), è possibile navigare allo stesso modo poiché le informazioni più importanti sono comun-
que contenute in una larghezza pari a 768px. A questo scopo, si è scelto, infatti, di lasciare le infor-
mazioni meno importanti sul lato destro delle pagine (es. fotografie, parti di mappa non contenente
pin).

13. 13
DESIGN DELL’INTERFACCIA ED ESPERIENZA UTENTE
InBicocca, è un sito fullpage, in cui tutte le pagine presentano la stessa dimensione (all in win-
dow) di 1024x758px. Il box principale è un rettangolo di 996x480 px all’interno del quale avvengono
tutte le azioni possibili. Questa scelta riduce la dispersione delle informazioni focalizzando l’attenzione
dell’utente in un’area ristretta.
L’aspetto grafico è molto semplice e tende a mettere in risalto fin da subito i diversi menù, sia
quello principale sia quelli secondari, aiutando l’utente ad orientarsi facilmente all’interno del sito.
Sono inoltre presenti degli elementi visivi che tengono costantemente informato l’utente relativamente
alla pagina in cui si trova, ed altri elementi roll-over che evidenziano invece il passaggio del mouse su
un elemento cliccabile.
Scelte cromatiche
I colori scelti per rappresentare le diverse tribù sono i seguenti:
- Rosso: studenti universitari. Riprende il colore degli edifici dell’università di Milano Bicocca, e
anche associabile alla laurea (i confetti sono rossi);
- Blu: lavoratori. Associato all’ambito Istituzionale e lavorativo;
- Giallo: city user. Colore caldo, richiama la solarità del divertimento e dello svago;
- Verde: residenti. Evoca la stabilità e la tranquillità, condizione importante nel luogo in cui
si vive, e che richiama la vegetazione degli spazi verdi.
Abbiamo scelto colori leggermente desaturati, sostanzialmente diversi fra di loro secondo i canoni
dell’infografica, facilitando l’immediatezza e la riconoscibilità, piuttosto che l’armonia.
Abbiamo inoltre utilizzato:
- Bianco di sfondo, e per tutti i testi, e per i link che al passare del mouse diventano sottolineati;
- Grigio scuro per il logo, il testo del menù principale e per lo sfondo delle news.
Scelte tipografiche
Per tutto il testo abbiamo scelto il Font browser-safe, Verdana. La scelta di un font semplice
e molto usato è stata dettata dal fatto che si è voluto puntare ad un’interazione giocosa e immediata
per l’utente, la cui l’attenzione fosse diretta principalmente agli aspetti grafici quali bottoni, icone ed
immagini, piuttosto che al testo, la cui funzione è solo quella di fornire brevi informazioni, per lo più a
monitor a dimensioni ridotte.
Tipologia delle icone
Le icone utilizzate sono state in parte adattate da alcune già esistenti e altre create in illustrator
(70x60px), affinchè fossero omogenee tra di loro, ben visibili anche se molto piccole e riconoscibili
attraverso i loro tratti essenziali. Il colore scelto è il bianco, su sfondo diverso in base alla tribù; sono
stati previsti 3 stati: none, over e selected.

14. 14
Layout e colori dei pulsanti
I bottoni del menù principale sono costituiti dalle voci in grigio scuro su sfondo bianco allo
stato normale, al passare del mouse i colori si invertono in modo dinamico, scritte bianche su sfondo
grigio scuro, e quando si entra nella pagina questa combinazione di colori diventa statica. La scelta
di non differenziare ulteriormente lo stato over da quello selected è dovuta al fatto che avendo poche
voci del menù non ci è sembrato necessario inserire uno stato differenziato al passaggio del mouse.
Gestione delle immagini
Le immagini, qualora presenti nel sito sono ritagli di foto impaginate al vivo, verticalmente.
IMPLEMENTAZIONE E SVILUPPO TECNOLOGICO
Il sito è stato implementato con Dreamweaver (linguaggio html, css, javascript) e le misure
scelte per il layout sono di 1024x768px. L’utilizzo del css ci ha permesso di modificare lo stile delle
pagine senza appesantire il codice html, attraverso l’uso di Classi e Id.
Il box principale in cui sono racchiuse tutte le informazioni è stato realizzato attraverso l’uso
di un grande Div ID principale, al cui interno abbiamo nidificato ulteriori Div ID. L’uso dei Div è stato
preferito a quello delle tabelle secondo le indicazioni del W3C.
I bottoni, sia per il menù principale, sia per la barra delle categorie, sono stati creati prima in
Photoshop, e successivamente salvati per web e inseriti nel codice ( in versione normal e over) così
da creare un effetto rollover, e fornire un feedback all’utente.
L’impiego del linguaggio Javascript ha ulteriormente semplificato lo sviluppo del sito grazie ad
un comportamento chiamato “cambia-proprietà”, il quale consente di mostrare l’informazione diretta-
mente sulla pagina visualizzata, grazie all’apparizione di una piccola finestra con informazioni relative
alle attività sulla mappa con un click, richiudibile con un altro click. Abbiamo preferito questo metodo
all’utilizzo delle API di Google (situazione ideale) in quanto quest’ultimo procedimento avrebbe richie-
sto tempo e conoscenze informatiche ben più avanzate di quelle da noi possedute.
Compatibilità cross-browser e cross-device
Il sito è progettato per essere visualizzabile su tutti i browser: anche il font scelto è browsersa-
fe. Al fine di rendere navigabile il nostro sito anche su device quali tablet e iPad, lo abbiamo realizzato
utilizzando una misura standard (1024X768 px) che permettesse la sua visualizzazione su schermi di
diverse dimensioni. Abbiamo quindi lasciato le informazioni più importanti sulla sinistra dello schermo,
in modo che potessero essere visibili su ogni tipo di device (compreso quello del tablet in modalità
portrait), mentre abbiamo tenuto le info meno importanti nella parte destra (es: parti di mappa inutile
in cui non vi sono pin, immagini delle pagine news). Il sito InBicocca risulta quindi navigabile su tablet
sia in posizione orizzontale, sia in posizione verticale, dove però le informazioni laterali vengono na-
scoste.

15. 15
FUNZIONAMENTO DEL PROTOTIPO
Il prototipo è stato realizzato per offrire una demo esplicativa, per cui non tutti i percorsi pos-
sibili sono stati resi funzionanti. Quelli percorribili dall’inizio alla fine, sono all’interno della navigazione
riservata al profilo tribù degli universitari (omino rosso attivato) e non risulta possibile passare da una
navigazione preferenziale ad un’altra:
- primo percorso:
Home > News > Università > Prima news > link esterno al sito di origine + link interno alla mappa
- secondo percorso:
Home > Mappa > Università > Aree Verdi > baloon attivato con comportamento cambia-proprietà
Javascript.
- terzo percorso:
Home > Mappa > Università > Trasporti (con esempio di over per ogni pin).
Poiché il comportamento di Javascript da noi utilizzato è risultato lungo e macchinoso, abbia-
mo scelto di rendere effettivamente funzionante a fine esplicativo il baloon solo alla voce “aree verdi”,
nella pagina mappe rossa destinata agli universitari.
Nella pagina news, sempre a scopo esemplificativo, è visualizzabile per tutte le tribù solo la
pagina del giorno lunedì 9, contenente una sola news ripetuta. Per ogni evento, i link alla mappa nel
prototipo rimandano alla pagina mappe generica della tribù a cui è rivolta (es. pagina news city-user
> llink mappa > pagina mappa cityuser). Invece nel sito reale il link dovrebbe indirizzare alla pagina
specifica con le indicazioni sulla posizione reale del luogo dove si terrà l’evento (es. pin indicativo del
luogo sulla mappa, con baloon già aperto con indirizzo e informazioni utili.
Per il Footer, abbiamo utilizzato una png statica, i cui link a facebook e twitter non sono funzio-
nanti, dal momento che anche le nostre pagine social non sono realmente state create.
CONCLUSIONI
In un’ottica social, i servizi offerti potrebbero venire ampliati ulteriormente puntando ad una
maggior interazione, dando la possibilità per esempio agli utenti di commentare, votare e consigliare
le varie attività ed eventi. Affinché il sito sia funzionante è indispensabile però che diventi “popolare”,
e che riceva un gran numero di visite. Per fare ciò sarebbe utile avvalersi di una forte promozione
attraverso il potenziamento dei canali social, e di una campagna di comunicazione accompagnata da
marker fisici sul territorio.