Documentazione www.btweet.it

441 views

Published on

Published in: Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
441
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Documentazione www.btweet.it

  1. 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.comMichele Pierangeli 703989 info@michelepierangeli.comFrancesco Panaro 702248 laconi4@gmail.com 1
  2. 2. Indice1. Presentazione Caso di Studio pag. 32. Ricerche iniziali pag. 33. Esplorazione del Concept pag. 44. Il sito pag. 55. Considerazioni e problemi pag. 12 2
  3. 3. 1. Presentazione Caso di StudioPer questo caso di studio è stato chiesto di progettare e implementare un prototipo disito web.Il tema del progetto è l’ideazione di un aggregatore di informazioni sul quartiere diMilano- 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 illegame tra territorio fisico e territorio digitale attraverso la geolocalizzazione e fornendoagli utenti la possibilità di esprimersi grazie ad alcune dinamiche social.2. Ricerche inizialiPrima di arrivare alla fase di concept del sito web, abbiamo sottoposto ad un numerorappresentativo 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 comeviene 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 leesigenze 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. 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 ConceptIl 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 peril quartiere Bicocca e quelli esistenti sono poco aggiornati e senza nessuna funzione digeolocalizzazione 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 latribù e la categoria (esempio: ristoranti), si gira la ruota e a random viene visualizzatoun luogo (esempio: kebabbaro) mostrando la posizione sulla mappa e la descrizionepermettendo di raggiungerlo tramite geo- localizzazione e dando la possibilità di fare ilcheck-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. 5. Una mappa pensata per mobile, suddivisa per tribù, in cui tramite delle faccettevengono 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 suddivisoper tribù.Valutando le esigenze degli utenti e le competenze interne al gruppo, abbiamo escluso lapossibilità di realizzare il Concept 1.Il Concept 2, pur essendo molto evocativo, mostrava delle carenze dal punto di vistadell’interazione social.Abbiamo quindi deciso di integrare l’idea del Concept 3 con il Concept 4 creandoBTweet.In allegato si possono trovare le varie proposte grafiche che sono state fatte per definireil progetto.4. Il sitohttp://btweet.it nasce dall’idea di riuscire a soddisfare le esigenze di esplorazione efamiliarizzazione 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. 6. E’ possibile notare la rappresentazione di una parete color mattone che riprende gliedifici dell’università.In alto la frase “Dove c’è Bicocca c’è...” suggerisce di fare una scelta tra le silhouetterappresentate 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 argomentiriportati 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-desipensando 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. 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 sitrova 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. 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. 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. 9. Lelenco completo di tag suddivisi per sezione sono:Bicocca, #b_tweet, #bicoccaUsando questi tag il proprio messaggio appare in tutte le sezioni di quella tribù.#b_studio, #b_casa, #b_lavoro, #b_divertimentoUsando 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_serviziSvago: 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. 10. Inoltre se sul proprio Browser è installato il plug-in di Google Earth( http://www.google.com/earth/explore/products/plugin.html ) è possibile visualizzaree navigare le mappe in 3D. 10
  11. 11. Il sito risulta lineare e semplice da usare, il layout rimane costante tra le pagine tranneper la pagina dei credits.Struttarato a tre colonne, sotto ogni immagine sono presenti le informazioni dei creatorie la bacheca dei tweet personali che scorrono in maniera dinamica. In questa sezione èstato modificato il contenuto del pulsante Help, inserendo le informazioni relative alprogetto. 11
  12. 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 ladisponibilità di una valida tecnologia, si è pensato ad un sito che rende semplice laricerca di questi luoghi grazie alla geo-localizzazione con l’aggiunta di dinamica socialdata dal portale di Twitter.5. Considerazioni e problemiDurante 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 pocopersonalizzabile e molto lento nel caricamento, soprattutto quando non si utilizzano pinstandard. 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 visualizzareogni pin sulla mappa, tramite il logo, la foto che contraddistingue quella location inmodo da facilitare l’utente nel riconoscimento della tipologia del luogo (esempio: alposto di mettere un’anonima tazzina, avremmo messo il logo del caffè500), ma visti iproblemi di caricamento citati sopra si è deciso di optare questa scelta solo in alcunemappe per non appesantire troppo la navigazione. Per le mappe restanti abbiamoutilizzato 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 famigliadel broswer.Il sito è stato ottimizzato per funzionare su Broswer Safari, Google Chrome, MozillaFireFox ed IExplorer.Per quanto riguarda la risoluzione non è stato possibile utilizzare le percentuali perrendere il sito completamente accessibile da diverse piattaforme in quanto l’utilizzo diWidget (Tweet-Search e My-Maps) non permette di inserire valori percentuali.Abbiamo quindi deciso di usare una risoluzione 1024 x 768 in modo da esserecompatibile con Ipad senza andare troppo a penalizzare gli utenti “non-mobile”, comesarebbe successo scegliendo una risoluzione più bassa.Un altro problema riscontrato è stato che l’account Twitter creato ad hoc per lecomunicazioni “Ufficiali” all’interno del sito, ( http://twitter.com/#!/Bicoccatweet ) nonveniva indicizzato nelle ricerche. Questo problema si è risolto solo dopo innumerovolicomunicazioni con il supporto di Twitter.Abbiamo inoltre messo il sito on-line, acquistato il dominio btweet.it su Aruba, perpermettere agli utenti di partecipare alla versione Beta.Attraverso il servizio di Google-Analitics abbiamo potuto monitorare le visite sul sito. 12
  13. 13. Come ultima cosa per pubblicizzare il sito abbiamo deciso di creare una paginaFacebook https://www.facebook.com/BicoccaTweet in modo da cercare di diffondereBicocca Tweet tramite questo canale dato il numero di utenti registrati a Facebook èmolto ampio, inoltre abbiamo collegato la pagina Facebook all’account di Twitter inmodo che ogni aggiornamento di stato si propaghi ad entrambe gli account.Abbiamo quindi deciso di inserire nella home page del sito dei pulsanti social chepermenttono 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 permigliorare il caricamento e la personalizzazione degli Widget.Attraverso le API di Google Maps è possibile attivare la funzione di geo-localizzazionetramite mobile, che permetterebbe all’utente che visita in mobilità btweet di mostrarglianche il punto in cui si trova e raggiungere più velocemente la posizione dei pinutilizzando GPS e bussola integrati nel telefono.Un’altro sviluppo futuro potrebbe essere quello di dare la possibilità di scrivere i tweet aivisitatori direttamente dal sito senza doversi interfacciare per forza con Twitterlasciando il sito; questo permetterebbe di visualizzare le parole chiave/tag utilizzate inogni 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 utentiavrebbero la possibilità di aggiungere nuove location.Un’altra funzione molto utile che si potrebbe introdurre è una campo di ricerca chepermetta di cercare sia nelle location sia nei tweet tramite tag o parola chiave.Infine si potrebbe permettere agli utenti di geolocalizzare i propri tweet associandolidelle location in modo da far apparire direttamente sul baloon i commenti su quelluogo. 13

×