Università degli Studi di Milano BicoccaCorso di laurea in Teoria e Tecnologia della

Comunicazionea/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

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

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ì.

3

● 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. ● 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:

4

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: 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 sitohttp :// 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.

5

Partendo dalla Home Page: 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.

6

● 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).

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 sceltaLa pagina di ogni sezione è composta da:

● A sinistra le categorie cliccabili che influenzano la mappa e la bacheca di tweet.

7

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.

● 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:#b_universita#b_trasporti#b_bar#b_nightlife#b_negozi#b_wellness#b_ristorazione

Lavoro:#b_ristorazione#b_bar#b_trasporti#b_parcheggi#b_negozi#b_wellnes#b_servizi

Svago:#b_ristorazione#b_trasporti#b_parcheggi#b_cultura#b_hotel#b_shopping#b_nightlife

Casa:#b_sociale#b_trasporti#b_negozi#b_servizi#b_wellness#b_istruzione#b_cultura

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.

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.

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 GoogleMapsIl 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.

13

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.

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 futuriAlcuni 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

14

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.

15