Laboratorio di Comunicazione Visiva

Giulia Belloni 770689 Dario Contini 705212

Alessandro Croce 771762

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.

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.

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.

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.

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.

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.

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

Pagina Interna

Soluz ione 2 Home Page

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.

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.