1. Università degli Studi di Milano Bicocca
Corso di laurea in Teoria e Tecnologia della Comunicazione
a/a 2010/2011
“Documentazione progetto d’esame http://btweet.it”
Esame di Comunicazione Visiva e Design delle Interfacce.
Realizzato da:
Fulvia A. Favore 742633 fulvia1987@hotmail.com
Michele Pierangeli 703989 info@michelepierangeli.com
Francesco Panaro 702248 laconi4@gmail.com
1

2. Indice
1. Presentazione Caso di Studio pag. 3
2. Ricerche iniziali pag. 3
3. Esplorazione del Concept pag. 4
4. Il sito pag. 5
5. Considerazioni e problemi pag. 12
2

3. 1. Presentazione Caso di Studio
Per questo caso di studio è stato chiesto di progettare e implementare un prototipo di
sito web.
Il tema del progetto è l’ideazione di un aggregatore di informazioni sul quartiere di
Milano- Bicocca che risponda alle esigenze degli utenti, suddivisi in quattro tribù:
1. Studenti;
2. Lavoratori;
3. City-user;
4. Residenti.
L’obiettivo finale è soddisfare le esigenze informative di ogni tribù, valorizzando il
legame tra territorio fisico e territorio digitale attraverso la geolocalizzazione e fornendo
agli utenti la possibilità di esprimersi grazie ad alcune dinamiche social.
2. Ricerche iniziali
Prima di arrivare alla fase di concept del sito web, abbiamo sottoposto ad un numero
rappresentativo di utenti, suddivisi per tribù, i questionari forniti durante le lezioni.
Dall’analisi dei dati così ottenuti siamo riusciti ad avere un’idea più precisa di come
viene vissuto il quartiere dalle differenti tribù, sia nello spazio fisico che on-line.
Questo ci ha aiutato nella ideazione di un sito che vada a soddisfare i bisogni e le
esigenze di tutte le categorie.
I dati ottenuti posso essere così sintetizzati:
Studenti:
● Sono giovani sotto i 25 anni, la maggior parte domiciliati in Lombardia, che
vengono in Bicocca dalle 9 alle 18, dal lunedì al venerdì.
● Per arrivare al quartiere utilizzano principalmente treno e mezzi pubblici.
● Frequentano l’università, ristoranti veloci ed economici, copisterie e
(occasionalmente) si fermano per il cinema o l’aperitivo serale.
City User:
● Utenti di tutte le età, residenti a Milano, vengono in Bicocca principalmente dalle
18 alle 24, in particolare nei week-end.
3

4. ● Per arrivare al quartiere utilizzano l’automobile.
● Frequentano i luoghi di cultura e shopping e vita notturna.
Lavoratori:
● Principalmente hanno un’età compresa dai 26 ai 55 anni, residenti a Milano o in
Lombardia, vengono in Bicocca dalle 9 alle 18, nei giorni lavorativi.
● Per arrivare al quartiere utilizzano soprattutto l’automobile o il treno.
● Frequentano ristoranti di fascia media con menu a prezzo fisso e convenzionati
con le aziende, inoltre usufruiscono di palestre, servizi bancari e a volte di
supermercati.
Residenti:
● I Residenti, che comprendono tutte le fascie d’età, sono nel quartiere durante
tutta la giornata e la settimana.
● Frequentano i negozi e i luoghi di aggregazione sociale o culturale.
3. Esplorazione del Concept
Il passo successivo è stato quello di andare ad analizzare i siti web, riguardanti la realtà
della Bicocca, già esistenti.
Abbiamo notato che oltre ad i siti web istituzionali, Università, Bicocca Village,
Immobiliari Centro Sarca, Arcimboldi e pochi altri non vi sono, punti di riferimento per
il quartiere Bicocca e quelli esistenti sono poco aggiornati e senza nessuna funzione di
geolocalizzazione o social.
Abbiamo quindi esplorato vari concept: (allegati concept 1, 2, 3, 4)
● Concept 1 Gira la ruota:
Una sorta di gioco pensato principalmente per mobile o tablet in cui dopo aver scelto la
tribù e la categoria (esempio: ristoranti), si gira la ruota e a random viene visualizzato
un luogo (esempio: kebabbaro) mostrando la posizione sulla mappa e la descrizione
permettendo di raggiungerlo tramite geo- localizzazione e dando la possibilità di fare il
check-in su Forsquare.
● Concept 2 MoodBoard:
Ad ogni categoria di utenti sono associate delle foto che vanno a formare una mood-
board, suddivise per fasce orarie.
Cliccando sulle foto viene mostrata la descrizione del location.
● Concept 3 MappaFaccette:
4

5. Una mappa pensata per mobile, suddivisa per tribù, in cui tramite delle faccette
vengono messi in risalto i posti consigliati per quella tribù.
● Concept 4 TweetB:
Un sito aggregatore di tutti i tweet su vari argomenti e tematiche sulla bicocca suddiviso
per tribù.
Valutando le esigenze degli utenti e le competenze interne al gruppo, abbiamo escluso la
possibilità di realizzare il Concept 1.
Il Concept 2, pur essendo molto evocativo, mostrava delle carenze dal punto di vista
dell’interazione social.
Abbiamo quindi deciso di integrare l’idea del Concept 3 con il Concept 4 creando
BTweet.
In allegato si possono trovare le varie proposte grafiche che sono state fatte per definire
il progetto.
4. Il sito
http://btweet.it nasce dall’idea di riuscire a soddisfare le esigenze di esplorazione e
familiarizzazione con il quartiere, integrando alcune dinamiche social e partecipative.
Il sito riprende l’architettura ordinata e squadrata della Bioccca.
Partendo dalla Home Page:
5

6. E’ possibile notare la rappresentazione di una parete color mattone che riprende gli
edifici dell’università.
In alto la frase “Dove c’è Bicocca c’è...” suggerisce di fare una scelta tra le silhouette
rappresentate all’interno di una finestra, che contraddistinguono le tribù.
Sulla destra sotto il logo si può notare la scritta: Cosa si dice di: Bicocca, #b_tweet.
Al di sotto si trova una bacheca che racchiude tutti i tweet comprendenti gli argomenti
riportati nelle parole chiave suggerite dal testo sopra.
Ogni tribù è stata caratterizzata da una silhouette cercando di sceglierle più
rappresentative possibile per il target di utenza.
I colori di ogni silouette sono stati scelti seguendo l’infografica “The Psycology of Color”
http://derrenster.posterous.com/the-psychology-of-color-must-see-for-web-desi
pensando al mood e alle sensazioni che ogni tribù ricerca svolgendo le proprie attività.
● Verde per studio perchè è un colore giovane e di crescita, come gli alberi.
● Blu per lavoro, perchè è usato molto per il business corporate design.
● Viola per svago perchè rappresenta ricchezza, nobiltà, creatività e romanticismo.
● Giallo per casa perchè è un colore caldo che da sensazione di felicità (e perchè è
usato per i prodotti dei bambini).
6

7. Dopo aver scelto la tribù di appartenenza, si arriva nella pagina in cui in alto è
posizionato il menu con le silhouette..
Il pulsante del menu della tribù rimane acceso per far capire in che sezione del sito ci si
trova e ogni sezione si colora del colore della tribù che è stata scelta
La pagina di ogni sezione è composta da:
● A sinistra le categorie cliccabili che influenzano la mappa e la bacheca di tweet.
In ogni categoria sarà presente una mappa con delle immagini o pin
rappresentanti la location. Cliccando sulla location di interesse apparirà un
baloon con il nome, info, descrizione e immagine.
● L’aspetto social: è possibile scrivere la propria opinione sulla bacheca di Bicocca
Tweet per ogni categoria utilizzando il proprio account twitter. Come nella Home,
i topic che vengono indicizzati all’interno dell’area sono destritti sotto il logo, in
alto a destra.
7

8. ● In Alto a Destra: è presente in tasto Help (?) in cui sono presenti tutte le
informazioni utili per capire come funziona il sito e come poter interagire con
esso. Vengono inoltre forniti i recapiti per poter suggerire nuove location.
8

9. L'elenco completo di tag suddivisi per sezione sono:
Bicocca, #b_tweet, #bicocca
Usando questi tag il proprio messaggio appare in tutte le sezioni di quella tribù.
#b_studio, #b_casa, #b_lavoro, #b_divertimento
Usando questi tag il proprio messaggio appare solo nelle categorie dove è presente il tag.
Studenti:
Studenti: Lavoro:
#b_universita #b_ristorazione
#b_trasporti #b_bar
#b_bar #b_trasporti
#b_nightlife #b_parcheggi
#b_negozi #b_negozi
#b_wellness #b_wellnes
#b_ristorazione #b_servizi
Svago: Casa:
#b_ristorazione #b_sociale
#b_trasporti #b_trasporti
#b_parcheggi #b_negozi
#b_cultura #b_servizi
#b_hotel #b_wellness
#b_shopping #b_istruzione
#b_nightlife #b_cultura
9

10. Inoltre se sul proprio Browser è installato il plug-in di Google Earth
( http://www.google.com/earth/explore/products/plugin.html ) è possibile visualizzare
e navigare le mappe in 3D.
10

11. Il sito risulta lineare e semplice da usare, il layout rimane costante tra le pagine tranne
per la pagina dei credits.
Struttarato a tre colonne, sotto ogni immagine sono presenti le informazioni dei creatori
e la bacheca dei tweet personali che scorrono in maniera dinamica. In questa sezione è
stato modificato il contenuto del pulsante Help, inserendo le informazioni relative al
progetto.
11

12. Il sito consente di consultare agevolmente le informazioni, in base all’area di interesse,
sulla zona di Milano- Bicocca.
Considerata la vastità dell’area, gli innumerevoli locali, i punti di interesse e la
disponibilità di una valida tecnologia, si è pensato ad un sito che rende semplice la
ricerca di questi luoghi grazie alla geo-localizzazione con l’aggiunta di dinamica social
data dal portale di Twitter.
5. Considerazioni e problemi
Durante la creazione del sito ci siamo imbattuti in alcuni problemi di realizzazione.
Abbiamo usato il sistema MyMaps di Google per creare le mappe, si è rivelato poco
personalizzabile e molto lento nel caricamento, soprattutto quando non si utilizzano pin
standard. Un aspetto positivo è che se si ha istallato il plug-in di Google- Earth si può
visualizzare la mappa in 3D.
L’idea da cui siamo partiti per la realizzazione della mappa, era quella di far visualizzare
ogni pin sulla mappa, tramite il logo, la foto che contraddistingue quella location in
modo da facilitare l’utente nel riconoscimento della tipologia del luogo (esempio: al
posto di mettere un’anonima tazzina, avremmo messo il logo del caffè500), ma visti i
problemi di caricamento citati sopra si è deciso di optare questa scelta solo in alcune
mappe per non appesantire troppo la navigazione. Per le mappe restanti abbiamo
utilizzato alcuni pin standard di GoogleMaps
Il font da noi utilizzato (Orbitron) appartiene alla libreria on-line presente su google-
webfonts, questo carattere viene interpretato in maniera differente in base alla famiglia
del broswer.
Il sito è stato ottimizzato per funzionare su Broswer Safari, Google Chrome, Mozilla
FireFox ed IExplorer.
Per quanto riguarda la risoluzione non è stato possibile utilizzare le percentuali per
rendere il sito completamente accessibile da diverse piattaforme in quanto l’utilizzo di
Widget (Tweet-Search e My-Maps) non permette di inserire valori percentuali.
Abbiamo quindi deciso di usare una risoluzione 1024 x 768 in modo da essere
compatibile con Ipad senza andare troppo a penalizzare gli utenti “non-mobile”, come
sarebbe successo scegliendo una risoluzione più bassa.
Un altro problema riscontrato è stato che l’account Twitter creato ad hoc per le
comunicazioni “Ufficiali” all’interno del sito, ( http://twitter.com/#!/Bicoccatweet ) non
veniva indicizzato nelle ricerche. Questo problema si è risolto solo dopo innumerovoli
comunicazioni con il supporto di Twitter.
Abbiamo inoltre messo il sito on-line, acquistato il dominio btweet.it su Aruba, per
permettere agli utenti di partecipare alla versione Beta.
Attraverso il servizio di Google-Analitics abbiamo potuto monitorare le visite sul sito.
12

13. Come ultima cosa per pubblicizzare il sito abbiamo deciso di creare una pagina
Facebook https://www.facebook.com/BicoccaTweet in modo da cercare di diffondere
Bicocca Tweet tramite questo canale dato il numero di utenti registrati a Facebook è
molto ampio, inoltre abbiamo collegato la pagina Facebook all’account di Twitter in
modo che ogni aggiornamento di stato si propaghi ad entrambe gli account.
Abbiamo quindi deciso di inserire nella home page del sito dei pulsanti social che
permenttono agli utenti di condividere il sito tramite Twitter e Facebook.
1.6 Sviluppi futuri
Alcuni sviluppi futuri possono consistere nel utilizzare le API di Google e Twitter per
migliorare il caricamento e la personalizzazione degli Widget.
Attraverso le API di Google Maps è possibile attivare la funzione di geo-localizzazione
tramite mobile, che permetterebbe all’utente che visita in mobilità btweet di mostrargli
anche il punto in cui si trova e raggiungere più velocemente la posizione dei pin
utilizzando GPS e bussola integrati nel telefono.
Un’altro sviluppo futuro potrebbe essere quello di dare la possibilità di scrivere i tweet ai
visitatori direttamente dal sito senza doversi interfacciare per forza con Twitter
lasciando il sito; questo permetterebbe di visualizzare le parole chiave/tag utilizzate in
ogni sezione e modificare dinamicamente la frase presente nel “Cosa si dice di:”.
Inoltre sempre tramite il proprio account Twitter, tramite log-in su btweet gli utenti
avrebbero la possibilità di aggiungere nuove location.
Un’altra funzione molto utile che si potrebbe introdurre è una campo di ricerca che
permetta di cercare sia nelle location sia nei tweet tramite tag o parola chiave.
Infine si potrebbe permettere agli utenti di geolocalizzare i propri tweet associandoli
delle location in modo da far apparire direttamente sul baloon i commenti su quel
luogo.
13