Progetto di comunicazione visiva e design delle interfacce. Esame del corso di Teoria e Tecnologia della Comunicazione. Creazione di un aggregatore d’informazioni (one page site) sul quartiere di Milano-Bicocca che risponda alle design esigenze di target eterogenei di tribù che nei diversi spazi e ore del giorno usano/vivono/frequentano questo spazio urbano.

1. Laboratorio
di Comunicazione Visiva
Giulia Belloni 770689
Dario Contini 705212
Alessandro Croce 771762

2. Obiettivo
Il nostro obiettivo è di creare un sito sulla realtà del quartiere Bicocca che
si adatti alle esigenze dei diversi target-utenti, presentando loro contenuti
differenti in base alle loro necessità.
Il sito è stato realizzato in ottica social e geolocalizzata, con un approccio
user-centered che ci ha permesso di curare i contenuti di ciascuna
sezione in modo tale che fossero familiari per l’utente, e che ha giustificato
le nostre scelte dal punto di vista dell’architettura dell’informazione affinchè
l’utilizzo della piattaforma si rivelasse intuitiva ed immediata.

3. A) Analisi e Benchmark
Inizialmente abbiamo analizzato i siti già presenti sul web relativi al
quartiere, e ci siamo resi conto della mancanza di una prospettiva
incentrata sui bisogni dell’utente, fruitore di tali siti.
Nella maggior parte dei casi era presente un elenco delle strutture
presenti sul territorio, con una breve descrizione.
Erano assenti: una suddivisione delle categorie in base ai target
(estremamente eterogenei nel caso del quartiere preso in esame); la
geolocalizzazione; un’ottica cross-devices, nella maggior parte dei casi i
siti sono pensati per una consultazione unicamente da computer, senza
tener conto del considerevole aumento di utilizzo di tablet e cellulari per il
reperimento di tali informazioni; un’ottica social.

4. B) Ricerca sulle Utenze
Per suddividere gli utenti abbiamo sottoposto dei questionari ai fruitori del
quartiere.
Abbiamo quindi individuato quattro diverse categorie di utenti, due delle
quali presentano due ulteriori sottocategorie:
1) Residenti
2) City User
3) Universitari
3.1) Studenti
3.2) Professori
4) Lavoratori
4.1) in Azienda
4.2) in Negozio
È emerso dai questionari sottoposti che le necessità del personale
universitario si avvicinavano più a quelle dei lavoratori in negozio che ai
professori universitari, e che la distinzione rilevante sui lavoratori fosse tra
coloro che lavorano in un negozio e coloro che lavorano in azienda (i quali
ad esempio beneficiano spesso delle mense aziendali); tale convinzione è
stata supportata dalla dichiarazione degli utenti sui luoghi maggiormente
frequentati nel quartiere, che appunto nei casi sopracitati combaciavano.
Altri spunti interessanti emersi dalle interviste effettuate riguardano:
- la necessità di un sito in inglese, per permettere agli studenti stranieri
di poter usufruire di tale servizio e conoscere più facilmente il
quartiere Bicocca;
- la volontà da parte dei residenti di essere maggiormente coinvolti
nelle iniziative promosse dall’Università, quali ad esempio conferenze
o corsi aperti ai non studenti;
- il desiderio di essere informati sulle offerte dei ristoranti o locali della
zona, o degli eventi in programma.

5. C) Architettura dell’Informazione
La Home Page presenta il logo IloveBicocca in alto a sinistra, e quattro
pulsanti relativi alle “macrocategorie”, ognuna delle quali è contrassegnata
dal nome, l’icona corrispondente, e una breve frase.
Al clic di “Universitari” e di “Lavoratori”, appaiono le sottocategorie
“Professori”, “Studenti”, “Lavoro in Negozio” e “Lavoro in Azienda”, anche
in questo caso contrassegnati dall’icona corrispondente e dal nome in
modo da rendere il più possibile immediato e intuitivo il riconoscimento per
l’utente della propria categoria di appartenenza.
I colori sono stati scelti in modo da risultare coerenti con il target utente:
- Residente: verde. Evoca stabilità, equilibrio, natura e di
conseguenza territorialità degli abitanti del quartiere;
- City User: rosa. Evoca divertimento, leggerezza, e dunque si adatta
alla sezione riguardante il target interessato al tempo libero e
all’intrattenimento;
- Universitario: arancione. Evoca creatività, saggezza, e rappresenta
inoltre il colore degli edifici universitari, declinato in due sfumature
differenti per gli Studenti e i Professori;
- Lavoratore: blu. Evoca professionalità, serietà. È considerato il colore
del “business” per eccellenza, e anche in questo caso è stato
declinato in due sfumature differenti per coloro che lavorano in
Negozio e coloro che lavorano in Azienda.
Per la scelta ottimale dei colori è stato utilizzato il sito
http://colorschemedesigner.com/, che ci ha permesso di individuare le
tonalità che si armonizzassero al meglio tra loro.
Al clic di una delle categorie presenti sulla Home Page, appare la
schermata relativa alla mappa del quartiere Bicocca con i pin dei luoghi di
interesse per la tribù selezionata.
Ogni schermata è graficamente declinata in base al colore della tribù a cui
si riferisce.

6. Il nome della tribù è presente in alto accanto al logo; sulla destra l’icona
della casa permette di tornare alla Home (il collegamento è anche previsto
per il clic sul logo).
La riga sottostante dell’header permette la fruizione del sito tramite
l’accesso a Facebook; l’accesso permette l’associazione da parte del sito
del profilo con la tribù nel quale si trova l’utente. In tal modo, quando
l’utente utilizzerà Fourquare per commentare luoghi relativi al quartiere, i
commenti saranno inseriti nella sezione social e visibili agli altri appartenti
alla sua tribù.
Alla destra dell’icona Facebook sono presenti i due tasti relativi alla mappa:
il primo, “Qui vicino”, accompagnato dall’icona relativa, permette la
geolocalizzazione; il secondo, “Cerca un indirizzo”, accompagnato
anch’esso dalla relativa icona, permette la ricerca dei punti di interesse
all’inserimento dell’indirizzo.
Sulla destra è presente il menù, con un elenco delle categorie
personalizzato e una checkbox che permette di nascondere o mostrare i
diversi punti di interesse.
La personalizzazione dei punti di interesse consiste nella differenziazione
del contenuto di ogni sezione (ad es. la sezione “Ristorazione”, presente
sia in Studenti che in Professori, mostra luoghi differenti in base alla tribù
selezionata per l’accesso).
La versione attuale del sito presenta le categorie differenziate in base alla
tribù, ma per errore vengono visualizzati tutti i pin di tutte le categorie; è
comunque possibile deselezionare i pin relativi alle sezioni della tribù con
cui si è effettuato l’accesso.
Al clic sul pin, si visualizza il nome del luogo cliccato, una breve
descrizione e, nella maggior parte dei casi, la foto relativa.
Nello spazio sottostante al menù è stata inserita la componente social: in
base al clic, compaiono i luoghi suggeriti dagli appartenenti alla stessa
tribù su Foursquare, con un commento.

7. Al clic della sezione “Ristorazione” nella tribù Studenti, ad esempio,
compare il locale suggerito dagli altri studenti su TripAdvisor; al clic della
sezione “Mense Universitarie” compare la mensa suggerita, seguita dalla
miniatura delle foto degli altri studenti che ci sono stati e che hanno
lasciato un commento su Foursquare.
(Attualmente è stato inserito un testo demo, relativo alla ristorazione per gli
Studenti, ma il menù è predisposto per reagire interattivamente al clic).
Sulla mappa inoltre è presente un box giallo con contenuto personalizzato
in base alla tribù; il box è zoomabile e presenta i seguenti contenuti:
- Residenti: conferenze in programma in Università;
- City User: programmazione del Teatro Arcimboldi;
- Studenti: aggiornamento giornaliero del menù delle mense
universitarie;
- Professori: iniziative dei bar-ristoranti per la pausa pranzo;
- Lavoratori in Negozio: offerte di supermercati, farmacie e bar;
- Lavoratori in Azienda: ristoranti consigliati per le cene aziendali.
Dalla Home Page è presente un collegamento alla sezione “About Us”, in
cui è presente una nostra piccola descrizione.

8. D) Interfaccia grafica
Abbiamo realizzato due differenti proposte grafiche utilizzando il software
Photoshop.
Soluzione 1
Home Page

9. Pagina Interna

10. Soluzione 2
Home Page

11. Pagina Interna
Tra le due soluzioni grafiche abbiamo optato per la seconda per diversi
motivi:
1) La Home Page risulta più chiara, semplice e graficamente piacevole;
2) I contenuti della pagina interna sono organizzati in modo
maggiormente coerente, e risulta più facile la selezione/deselezione
dei punti di interesse.

12. E) Sviluppi futuri
Abbiamo individuato tre ambiti di sviluppo futuro per la nostra
piattaforma:
- interfaccia in lingua inglese,
- personalizzazione grafica della checkbox, che attualmente è stata
realizzata utilizzando l’icona tradizionale, intuitiva ma non graficamente
piacevole;
- inserimento di una sezione trasporti, mediante l’utilizzo del
programma MapBox (utilizzato per la creazione della mappa
utilizzata), comprendente mezzi pubblici, fermate dei taxi, percorsi
ciclabili e parcheggi.