1

GRUPPO 9

Chiara Frantini 720385 Design dell’interfaccia ed esperienza utente

Melania Mauri 758951

Implementazione e sviluppo tecnologico

Sara Minoli 757088Architettura dell’informazione ed usabilità

Teoria e tecnologia della comunicazioneCorso “Comunicazione visiva e Design delle Interfacce“

AA 2011-2012

2

INDICE

Introduzione....................................................................................................................................3

Indagine preliminare......................................................................................................................4Siti d’ispirazione

Fase progettuale............................................................................................................................8Sviluppo dell’idea

Soluzione concettuale...................................................................................................................8 Architettura dell’informazione ed usabilitàSistemi di navigazione

Design dell’interfaccia ed esperienza utente ............................................................................13Aspetti grafico comunicativi dell’interfacciaScelte tipografiche

Implementazione e sviluppo tecnologico..................................................................................14Compatibilità cross-browser e cross-device

Funzionamento del prototipo......................................................................................................14

Conclusioni...................................................................................................................................15

3

INTRODUZIONE

Il progetto di seguito presentato nasce dall’idea di creare un aggregatore d’informazioni (knowledge-base) sul quartiere di Milano-Bicocca, che risponda alle esigenze eterogenee di tutti gli utenti che ogni giorno usufruiscono di questo spazio urbano. Il proposito è quello di creare quattro accessi diversificati alle informazioni in base alla tribù di appartenenza degli utenti: residenti, universi-tari, lavoratori, e city-user (come da brief). Due sono gli obiettivi principali, il primo è quello di favorire la conoscenza del quartiere fisico-attraverso un suo corrispettivo virtuale in un’ottica geolocalizzata; il secondo è invece quello di fornire informazioni aggiornate su novità ed eventi, stimolando la partecipazione attiva dei cittadini anche attraverso l’utilizzo di piattaforme social. Per far questo abbiamo realizzato un sistema informativo ibrido, ovvero accessibile anche in mobilità, attraverso tablet, e che nel suo essere “applicativo” sI distingue dal concetto classico di sito.

Il progetto ha previsto una fase preliminare in cui sono state indagate le esperienze dirette degli utenti attraverso la somministrazione di un’intervista e di un test rappresentativo. Dalle informa-zioni raccolte abbiamo sviluppato un’idea fino a giungere alla soluzione concettuale realizzata, che di seguito presentiamo, andando ad analizzare tre differenti aspetti:

- Architettura dell’informazione ed usabilità;- Design dell’interfaccia ed esperienza utente; - Implementazione e sviluppo tecnologico.

4

INDAGINE PRELIMINARE

Al fine di raccogliere informazioni utili allo sviluppo di un’idea, abbiamo sottoposto un’intervi-sta qualitativa e un test rappresentativo ad un campione di 36 soggetti, 6 per ogni tribù e sotto-tribù elencate nel brief. L’intervista (28 domande) era volta a: - raccogliere i dati anagrafici generali dei soggetti; - sondare la loro conoscenza ed esperienza del territorio urbano; - investigare il grado di socializzazione in esso; - indagare la loro fruizione del web 2.0, ed in relazione al quartiere Bicocca.Dalle interviste è emerso che la maggioranza dei soggetti avverte la mancanza di spazi verdi (es. parchi), e di situazioni che favoriscano la socializzazione (es. centri sociali o culturali, eventi), tanto che la maggior parte di essi ha dichiarato di non trascorrere il suo tempo libero nel quartiere, e di lasciarlo non appena finito di svolgere la propria attività di studio o lavorativa.

Il test rappresentativo è consistito, invece, nel disegnare la mappa del quartiere Bicocca.

I disegni ottenuti hanno evidenziato la scarsa conoscenza del quartiere da parte della maggioranza dei soggetti, i quali spesso dimostrano di conoscere solo gli spazi adiacenti al tragitto effettuato quoti-dianamente, in relazione alla loro destinazione e tribù di appartenenza (come evidente nella mappa a lato).

Da questa indagine preliminare è emerso che le quattro tribù difficilmente trovano occasioni di so-cializzazione e di integrazione all’interno del quartiere; un motivo potrebbe essere la posizione dei differenti edifici nello spazio urbano (universitari, lavorativi, residenziali), che occupando “blocchi” di territorio separati, consentono agli utenti di raggiungere la meta desiderata senza dover attraversare zone non di loro interesse.

5

Ecco da dove nasce l’esigenza di creare un sistema informativo che faccia da ponte tra questi quat-tro spazi, e che promuova la partecipazione agli eventi proposti dalle diverse tribù, favorendo la cono-scenza dello spazio urbano attraverso una fedele riproduzione virtuale del quartiere reale.

Siti d’ispirazione

Di seguito riportiamo i siti web da cui abbiamo tratto ispirazione.

Abbiamo considerato TimeOut.com come

esempio dei servizi offerti da un aggrega-

tore di informazioni nel caso delle grandi

città; TimeOut infatti è un sito che offre

informazioni su tutte le più importanti

città del mondo, tra cui anche Milano. In

particolare questo sito ci ha fornito spunti

interessanti per quanto riguarda la suddi-

visione in categorie delle attività presenti

sul territorio urbano.

6

Da instablog.org abbiamo preso spunto per

quanto riguarda la resa delle categorie attra

verso le icone, con la descrizione relativa che

appare al passare del mouse.

Il sito milano.tonight.eu ci ha permesso di comprendere il funzionamento della ricerca geolocalizzata dei luoghi.

7

Dal seguente layout (Behance Network) abbiamo tratto ispirazione per quanto riguarda l’aspetto grafico (impostazione

delle news, del menù, e per l’uso del colore).

8

FASE PROGETTUALE

La fase iniziale è stata caratterizzata da un costante emergere di idee, elaborate e vagliate fino a confluire in un solo concept. Il nostro punto di partenza è stato cercare di sviluppare un’idea di sito/applicazione che fosse il più possibile fedele alle indicazioni del brief. Allo stesso tempo, abbiamo cer-cato di individuare un layout grafico che potesse esprimere al meglio la soluzione concettuale definiti-va.

Sviluppo dell’idea

Originariamente, abbiamo voluto pensare al quartiere come ad un luogo dato dall’insieme di più “spazi” (università, lavoro, tempo libero, abitazioni), in costante interazione tra di loro. Gli utenti, oltre a usufruire delle informazioni relative al loro spazio di appartenenza, avrebbero potuto trovare interesse anche negli spazi vicini (es. residente che consulta gli eventi promossi dall’università). Si era pensato quindi di permettere agli utenti di registrarsi al sito, specificando oltre alla tribù di appartenen-za anche gli interessi personali, in modo da poter beneficiare di una navigazione “filtrata” e preferen-ziale, e per ricevere, inoltre, periodicamente una newsletter personalizzata. Fondamentale sarebbe stata poi una pagina Mappa del quartiere Bicocca, volta a aiutare le persone ad individuare luoghi ed attività d’interesse attraverso un sistema di ricerca semantico (tag, categorie), per facilitare l’orientamento in esso. Il sito avrebbe, quindi, offerto un servizio di marketing geolocalizzato alle attività, dando loro la possibilità di presentarsi e promuoversi attraverso una pagina personale. In un’ottica social, si era pensato anche di realizzare un sistema di votazione e di commento delle attività e degli eventi (rating e ranking), e un Social Wall, ovvero uno spazio adibito al dibattito e alla libera circolazione di informazioni, ovviamente con un controllo da parte di un moderatore. Nell’intento di realizzare un sito-applicazione rivolto ad una comunità territoriale ridotta, non ci è sembrato appropriato sviluppare tutte le sezioni ipotizzate inizialmente. Per funzionare, un social network necessita della partecipazione attiva e costante di molto utenti, condizione non facilmente realizzabile in una situazione così specifica. Abbiamo quindi abbandonato l’idea di un sito di questo tipo, puntando su un’applicazione che sfruttasse le potenzialità di condivisione dei social-network già esistenti e più utilizzati (facebook, twitter), al fine di diffondere e promuovere il nostro sito il più possi-bile.

SOLUZIONE CONCETTUALE

Il progetto del sito “InBicocca” è ispirato a criteri di essenzialità ergonomica e di facilità d’utilizzo.Lo scopo principale è quello di offrire agli utenti del quartiere Bicocca, una selezione di informazioni relative alle quattro categorie predefinite di utenti. Queste informazioni sono consultabili all’interno di un unico pannello polifunzionale, contenente le news o la mappa informativa in base all’azione che si vuole compiere. Per consentire una navigazione preferenziale, abbiamo optato per un sistema di selezione del

9

profilo desiderato mediante un’operazione che avviene al primo accesso. L’utente appena entrato nel sito sarà invitato a scegliere la tribù di appartenenza, e da quel momento in alto a destra, comparirà un omino del colore corrispondente. La selezione del profilo tribù si rivela, inoltre, più coerente con l’architettura delle informazioni da noi utilizzata. Dopo il primo accesso, l’utente verrà indirizzato alla pagina news del profilo tribù precedentemente selezionato. Si potrà comunque accedere ai contenuti degli altri profili tribù cliccando sui bottoni relativi nel pannello centrale della pagina, oppure cliccando su <Cambia profilo tribù> nel menù principale. Abbiamo scartato la possibilità di effettuare una vera e propria registrazione, poiché non ritenuta essenziale ai fini dei servizi offerti, e in quanto la compilazione di un form avrebbe dissuaso alla naviga-zione buona parte degli utenti. Per ricevere gli aggiornamenti del sito abbiamo, quindi, abbandonato l’idea della newsletter, che sarebbe stata possibile attraverso la registrazione, puntando invece sulle potenzialità di condivisione dei social network già esistenti.

Il Claim “Non cercare, trova!” è un evidente invito alla navigazione, che nel nostro sito si rivela guidata, in quanto l’utente è facilitato dalla stessa architettura dell’informazione, che gli indica qual’è il percorso da seguire per trovare ciò che cerca. La ricerca di informazioni richiede un dispendio di energia notevole, in quanto prevede anche di scartare i contenuti superflui. Nel caso del nostro sito, la ricerca viene saltata, e la navigazione gui-data, attraverso categorie precedentemente da noi selezionate, indirizza l’utente sulla strada giusta. Anche il logo, un quadrifoglio composto dai pin dei colori che rappresentano le tribù, evocan-do la fortuna, vuole enfatizzare l’opportunità di “trovare”, senza tentativi inutili di ricerca.

Architettura dell’informazione ed usabilità Le pagine che sono state portate a realizzazione sono tre: homepage, pagina news, pagina mappe. Tutti i contenuti sono consultabili in via preferenziale dopo aver selezionato la tribù di apparte-nenza nella pagina iniziale.

Home page (scelta profilo-tribù) La home page è la pagina-vetrina del sito: la

funzione dei quattro box 4 colorati, è quella di far cogliere intuitivamente all’utente quali sono le tribù tra cui può scegliere per comin-ciare a usufruire dei servizi che il sito offre. Questa pagina è visibile solo al primo acces-so, e attraverso la scelta di un particolare profilo-tribù permetterà all’utente, negli ac-cessi successivi, di visionare direttamente le informazioni di suo interesse. Di conseguen-za l’omino-utente in alto a destra assumerà il colore della tribù selezionata.

10

Pagina News

La pagina news presenta un elenco di eventi consultabili attraverso una barra di scorrimen-to laterale e suddivisi per data, e in base alla tribù a cui sono rivolti. Ogni news presenta delle informazioni essenziali sull’evento a cui si riferisce (tipo luogo, ora, argomento), e pre-senta due link: uno che conduce ad una pa-gina esterna al sito con maggiori informazioni, ed un altro che porta alla pagina mappa, dove consente di geolocalizzare il luogo presso cui si terrà l’evento.Sulla destra del box c’è un’immagine riferita ad un evento principale del mese.

Pagina Mappe In questa pagina, Ia maggior parte del box principale è occupata da una mappa stati-ca del quartiere Bicocca. I luoghi e le attività risultano rintracciabili attraverso le categorie identificate da icone, nel menù verticale a si-nistra. Per ciascuna tribù abbiamo individuato quelle categorie ritenute di maggior utilità, e selezionate grazie alle opinioni raccolte degli utenti del quartiere (es. ristoranti, bar, centri sportivi, bancomat, cinema, teatro, aree verdi, trasporti, ecc. ). Subito dopo aver seleziona-to una categoria, appariranno sulla mappa dei pin in corrispondenza della posizione dei

luoghi richiesti. Cliccando su di un pin, si aprirà una finestrella contenente brevi informazioni relative al luogo/attività desiderati (es. indirizzo, numero di telefono, orari di apertura, link sito web).

11

Qui di seguito riportiamo la mappa del sito.

12

Sistemi di navigazione La navigazione all’interno del sito avviene principalmente grazie ad un menù principale situato in tutte le pagine in alto a destra. Per navigare invece all’interno delle singole pagine, vi è un menù verticale differenziato sulla sinistra del box rettangolare con quattro tasti colorati che servono a filtrare le informazioni in base alla tribù desiderata, e una colonna di tasti più piccoli che nel caso della pagi-na news, contengono i diversi giorni della settimana corrente, nel caso della pagina mappe invece le varie categorie. In quest’ultima pagina al passare del mouse sulle icone delle categorie appare una finestrella con una scritta esplicativa delle varie icone, in modo da facilitarne il riconoscimento e l’ap-prendimento.

Usabilità in mobilità Nell’ottica di rendere il nostro sito “ibrido” ovvero accessibile anche in mobilità, abbiamo scelto di realizzare poche pagine, con solo contenuti chiave di maggior interesse. La scelta grafica è finaliz-zata a rendere più usabile e intuitivo il sito anche in mobilità. Ad esempio la posizione dei vari menù secondari verticali suggerisce il percorso da seguire per usufruire delle informazioni offerte. Inoltre, la misura adottata per il layout del sito 1024x768px permette di visualizzare la maggior parte delle informazioni su tutti gli schermi orizzontali (pc, e teblet). Nel caso della visualizzazione verticale (caso tablet), è possibile navigare allo stesso modo poiché le informazioni più importanti sono comun-que contenute in una larghezza pari a 768px. A questo scopo, si è scelto, infatti, di lasciare le infor-mazioni meno importanti sul lato destro delle pagine (es. fotografie, parti di mappa non contenente pin).

13

DESIGN DELL’INTERFACCIA ED ESPERIENZA UTENTE

InBicocca, è un sito fullpage, in cui tutte le pagine presentano la stessa dimensione (all in win-dow) di 1024x758px. Il box principale è un rettangolo di 996x480 px all’interno del quale avvengono tutte le azioni possibili. Questa scelta riduce la dispersione delle informazioni focalizzando l’attenzione dell’utente in un’area ristretta. L’aspetto grafico è molto semplice e tende a mettere in risalto fin da subito i diversi menù, sia quello principale sia quelli secondari, aiutando l’utente ad orientarsi facilmente all’interno del sito.Sono inoltre presenti degli elementi visivi che tengono costantemente informato l’utente relativamente alla pagina in cui si trova, ed altri elementi roll-over che evidenziano invece il passaggio del mouse su un elemento cliccabile.

Scelte cromatiche

I colori scelti per rappresentare le diverse tribù sono i seguenti:

- Rosso: studenti universitari. Riprende il colore degli edifici dell’università di Milano Bicocca, e anche associabile alla laurea (i confetti sono rossi); - Blu: lavoratori. Associato all’ambito Istituzionale e lavorativo; - Giallo: city user. Colore caldo, richiama la solarità del divertimento e dello svago; - Verde: residenti. Evoca la stabilità e la tranquillità, condizione importante nel luogo in cui si vive, e che richiama la vegetazione degli spazi verdi.

Abbiamo scelto colori leggermente desaturati, sostanzialmente diversi fra di loro secondo i canoni dell’infografica, facilitando l’immediatezza e la riconoscibilità, piuttosto che l’armonia. Abbiamo inoltre utilizzato:- Bianco di sfondo, e per tutti i testi, e per i link che al passare del mouse diventano sottolineati;- Grigio scuro per il logo, il testo del menù principale e per lo sfondo delle news.

Sceltetipografiche Per tutto il testo abbiamo scelto il Font browser-safe, Verdana. La scelta di un font semplice e molto usato è stata dettata dal fatto che si è voluto puntare ad un’interazione giocosa e immediata per l’utente, la cui l’attenzione fosse diretta principalmente agli aspetti grafici quali bottoni, icone ed immagini, piuttosto che al testo, la cui funzione è solo quella di fornire brevi informazioni, per lo più a monitor a dimensioni ridotte.Tipologia delle iconeLe icone utilizzate sono state in parte adattate da alcune già esistenti e altre create in illustrator (70x60px), affinchè fossero omogenee tra di loro, ben visibili anche se molto piccole e riconoscibili attraverso i loro tratti essenziali. Il colore scelto è il bianco, su sfondo diverso in base alla tribù; sono stati previsti 3 stati: none, over e selected.

14

Layout e colori dei pulsanti

I bottoni del menù principale sono costituiti dalle voci in grigio scuro su sfondo bianco allo stato normale, al passare del mouse i colori si invertono in modo dinamico, scritte bianche su sfondo grigio scuro, e quando si entra nella pagina questa combinazione di colori diventa statica. La scelta di non differenziare ulteriormente lo stato over da quello selected è dovuta al fatto che avendo poche voci del menù non ci è sembrato necessario inserire uno stato differenziato al passaggio del mouse.Gestione delle immaginiLe immagini, qualora presenti nel sito sono ritagli di foto impaginate al vivo, verticalmente.

IMPLEMENTAZIONE E SVILUPPO TECNOLOGICO

Il sito è stato implementato con Dreamweaver (linguaggio html, css, javascript) e le misure scelte per il layout sono di 1024x768px. L’utilizzo del css ci ha permesso di modificare lo stile delle pagine senza appesantire il codice html, attraverso l’uso di Classi e Id. Il box principale in cui sono racchiuse tutte le informazioni è stato realizzato attraverso l’uso di un grande Div ID principale, al cui interno abbiamo nidificato ulteriori Div ID. L’uso dei Div è stato preferito a quello delle tabelle secondo le indicazioni del W3C. I bottoni, sia per il menù principale, sia per la barra delle categorie, sono stati creati prima in Photoshop, e successivamente salvati per web e inseriti nel codice ( in versione normal e over) così da creare un effetto rollover, e fornire un feedback all’utente. L’impiego del linguaggio Javascript ha ulteriormente semplificato lo sviluppo del sito grazie ad un comportamento chiamato “cambia-proprietà”, il quale consente di mostrare l’informazione diretta-mente sulla pagina visualizzata, grazie all’apparizione di una piccola finestra con informazioni relative alle attività sulla mappa con un click, richiudibile con un altro click. Abbiamo preferito questo metodo all’utilizzo delle API di Google (situazione ideale) in quanto quest’ultimo procedimento avrebbe richie-sto tempo e conoscenze informatiche ben più avanzate di quelle da noi possedute.

Compatibilità cross-browser e cross-device

Il sito è progettato per essere visualizzabile su tutti i browser: anche il font scelto è browsersa-fe. Al fine di rendere navigabile il nostro sito anche su device quali tablet e iPad, lo abbiamo realizzato utilizzando una misura standard (1024X768 px) che permettesse la sua visualizzazione su schermi di diverse dimensioni. Abbiamo quindi lasciato le informazioni più importanti sulla sinistra dello schermo, in modo che potessero essere visibili su ogni tipo di device (compreso quello del tablet in modalità portrait), mentre abbiamo tenuto le info meno importanti nella parte destra (es: parti di mappa inutile in cui non vi sono pin, immagini delle pagine news). Il sito InBicocca risulta quindi navigabile su tablet sia in posizione orizzontale, sia in posizione verticale, dove però le informazioni laterali vengono na-scoste.

15

FUNZIONAMENTO DEL PROTOTIPO

Il prototipo è stato realizzato per offrire una demo esplicativa, per cui non tutti i percorsi pos-sibili sono stati resi funzionanti. Quelli percorribili dall’inizio alla fine, sono all’interno della navigazione riservata al profilo tribù degli universitari (omino rosso attivato) e non risulta possibile passare da una navigazione preferenziale ad un’altra:

- primo percorso:Home > News > Università > Prima news > link esterno al sito di origine + link interno alla mappa- secondo percorso: Home > Mappa > Università > Aree Verdi > baloon attivato con comportamento cambia-proprietà Javascript.- terzo percorso:Home > Mappa > Università > Trasporti (con esempio di over per ogni pin).

Poiché il comportamento di Javascript da noi utilizzato è risultato lungo e macchinoso, abbia-mo scelto di rendere effettivamente funzionante a fine esplicativo il baloon solo alla voce “aree verdi”, nella pagina mappe rossa destinata agli universitari. Nella pagina news, sempre a scopo esemplificativo, è visualizzabile per tutte le tribù solo la pagina del giorno lunedì 9, contenente una sola news ripetuta. Per ogni evento, i link alla mappa nel prototipo rimandano alla pagina mappe generica della tribù a cui è rivolta (es. pagina news city-user > llink mappa > pagina mappa cityuser). Invece nel sito reale il link dovrebbe indirizzare alla pagina specifica con le indicazioni sulla posizione reale del luogo dove si terrà l’evento (es. pin indicativo del luogo sulla mappa, con baloon già aperto con indirizzo e informazioni utili. Per il Footer, abbiamo utilizzato una png statica, i cui link a facebook e twitter non sono funzio-nanti, dal momento che anche le nostre pagine social non sono realmente state create.

CONCLUSIONI

In un’ottica social, i servizi offerti potrebbero venire ampliati ulteriormente puntando ad una maggior interazione, dando la possibilità per esempio agli utenti di commentare, votare e consigliare le varie attività ed eventi. Affinché il sito sia funzionante è indispensabile però che diventi “popolare”, e che riceva un gran numero di visite. Per fare ciò sarebbe utile avvalersi di una forte promozione attraverso il potenziamento dei canali social, e di una campagna di comunicazione accompagnata da marker fisici sul territorio.