Progettazione Sito - Quanto basta Quartiere bicocca

Quanto Basta - Bicocca1

QB QUANTO BASTA (SAPERE)

QUARTiERE BicOccA

CARRADORI CARLO VIERI 722990COLOMBO ANDREA 720386RAINERI IRENE 715970

INDICE

1. ANALISI & BENCHMARK2. RICERCA SULLE UTENZE3. IL PROGETTO4. ARCHITETTURA DELL’INFORMAZIONE5. WIREFRAME6. INTERFACCIA GRAFICA7. PROTOTIPO

1. ANALISI & BENCHMARK


Per il nostro lavoro abbiamo iniziato analizzando siti che potessero ispirare la creazione del nostro sito, come era stato richiesto dal brief.

Sono state considerate quattro tipologie di siti:

- Community 2.0- Sistemi Geolocalizzati- One Page Site- Siti inerenti il Quertiere Bicocca


COMMUNITY 2.0

Questa tipologia di siti è forse quella che meno ha condizionato lo sviluppo del nostro progetto. La parte di community non è infatti sviluppata nel nostro sito se non come raccomandazione e valutazione di places con i relativi commenti. Per questo motivo forse la community più rappresentative di quelle che avevamo selezionato è madeinkitchen.tv.


Il motivo fondamentale per cui abbiamo scelto la community di madeinkitchen come riferimento è la doppia modalità di valutazione dei piatti: infatti è possibile valutare sia con un punteggio ad icone ( da 1 a 5 stelle ) sia inserire commenti per fare domande e ottenere delucidazioni sulle ricette, meccanismo che abbiamo deciso di implementare anche per il rating dei places presenti in Bicocca.


SITI GEOLOCALIZZATI

La geolocalizzazione è uno strumento molto importante perché permette di consigliare a un utente un luogo non solo in senso assoluto ma anche in base alla sua posizione. Nel nostro progetto abbiamo tenuto conto di quelli che sono anche i vincoli spaziali dovuti all’appartenenza alle diverse tribù. Per quanto riguarda questa tipologia di siti ne abbiamo selezionati due diversi, foodspotting.com e aroundmeapp.com.


Come si può vedere in quest’immagine la mappa non si limita a mostrare le vie e i punti d’interesse in maniera spoglia ma grazie all’aggiunta di imma-gini invoglia a esplorare un determinato luogo, in questo caso piatto. Nel nostro progetto abbiamo inserito una mappa con icone che invogliassero a visitare il luogo.


Per quanto riguarda invece il sito aroundmeapp.com abbiamo sempre te-nuto in considerazione lo stile minimalista e iconico che permette di indivi-duare le categorie di esercizi grazie ad immagini semplici e dirette.


ONE PAGE SITES

La richiesta del brief era di creare un one-page site, per stimolare la nostra creatività abbiamo esaminato quelli selezionati nella seconda esercitazione e abbiamo cercato di capire quali fossero le caratteristiche principali di questa tipologia di sito che favorissero la navigazione e facilitassero la fruizione dei contenuti. Principalmente i due siti che hanno influenzato grazie al loro stile la nostra progettazione sono elettromeccanicadorica.it e minimalmonkey.com


Questo sito pur non presentando una grafica molto ricercata o ad effetto ha un sistema di navigazione molto semplice e a nostro avviso efficace. Il menù nella parte superiore dello schermo indica le varie sezioni che possono essere visitate, queste poi sono disposte tutte verticalmente e selezionando quella che si vuole raggiungere si viene spostati con uno scorrimento veloce al punto desiderato. In questo modo i contenuti non sono dispersi su varie pagine ma sono tutti a portata di sguardo spostandosi, grazie anche all’aiuto del menù che ci accompagna in tutta la navigazione, su un’unica pagina organizzata.


Il secondo sito che ci ha ispirato è sicuramente molto più curato nel design e sfrutta al massimo le potenzialità del minimalismo, ci sono solo delle colonne con i titoli degli articoli, e dei colori, una sezione è distinta dall’altra grazie al cambio del colore di sfondo della colonna. L’utilizzo di colori pastello inoltre non sforza la vista e permette una navigazione che non affatica l’utente.


SITI INERENTI IL QUARTIERE BICOCCA

Per quanto riguarda invece l’analisi dei siti che riguardassero il quartiere Bicocca abbiamo trovato prevalentemente siti dalla grafica spoglia e dai contenuti scarni e non aggiornati. Anche per quanto riguarda il sito maggiormente curato per quanto riguar-da entrambi gli aspetti, grafica e contenuti, (farebicocca.it) non abbiamo trovato somiglianze con il nostro progetto. Il sito infatti non offre consigli su luoghi da visitare o informazioni utili per un frequentatore occasionale del quartiere ma solamente delle news sul consiglio di zona o su avvenimenti e notizie di pubblico dominio.

2. RICERCA SULLE UTENZE


La prima parte operativa del nostro progetto è stata quella di capire chi fossero i soggetti rappresentativi delle varie categorie di “abitanti” del quartiere Bicocca definite dal brief.Le categorie erano:

- RESIDENTI- UNIVERSITARI Studenti Docenti e Personale- LAVORATORI Impegati e Colletti Bianchi Addetti ai lavori- CITY USER

Per fare questo abbiamo creato delle Personas per ogni singola categoria.

Con il termine Personas si intendono dei personaggi immaginari creati per rappresentare tipologie di utenti secondo determinati criteri costruiti su obiettivi e comportamenti ritenuti caratteristici.

Abbiamo scelto tre differenti personas per ogni categoria perché all’interno dello stesso gruppo di utenti possono esserci anche delle nette differenze oltre alle similarità dovute all’appartenenza al gruppo.


Giovanni, 68 anni

Sposato, in pensione, ha lavorato in Pirelli per più di 30 anni. Ha 1 figlio ormai grande che vive all’estero.Per spostarsi all’interno del quartiere e per andare a fare la spesa, al Centro Sarca, utilizza una vecchia Punto bianca.Utilizza il computer per guardare gli spettacoli in programmazione al cinema dove gli piace recarsi almeno una sera alla settimana con sua moglie Carmelina, per guardare il meteo e per comunicare con il figlio tramite Hangouts.Il figlio gli ha regalato anche uno smartphone ma non è molto pratico e lo usa praticamente solo per chiamare e mandare rari sms.Legge tutte le mattine il Corriere e la Gazzetta in formato cartaceo non utilizza quotidiani online.

RESIDENTI

Kevin, 10 anni

Ha appena iniziato l’ultimo anno delle scuole elementari del quartiere. Nella sua cambretta che divide con la sorellina di 2 anni più piccola c’è un vecchio computer fisso che usa per tenersi informato sui risultati della sua beneamata Inter e per leggere le email che si scambia con i suoi amichetti.La navigazione sul resto del web è stata molto limitata dalle protezioni inserite dal papà ingegnereinformatico, può comunque effettuare ricerche su Google dove si diverte a cercare nuovi ristoranti in cui portare la nonna.

Simona, 24 anni

Vive in affitto assieme alla sorella, studia allo Iulm che raggiunge comodamente con il treno dalla Stazione di Greco PirelliNon ha un’auto ma durante la bella stagione per muoversi in città usa la sua Vespa azzurra.Possiede uno smartphone che la accompagna sempre, e un pc portatile: usa i suoi device per navigare in rete, per fare shopping on-line e per mantenere i contatti con i suoi amici.Ha profili su diversi social network.


Stefania, 38 anni

Laureata in economia, lavora come contabile, è originaria di Bologna e si è trasferita a Milano per cercare lavoro.Abita da sola nel quartiere di Affori in una casa in affitto, è fidanzata e vive una relazione a distanza.Si sposta a piedi all’interno del quartiere poiché non possiede un proprio mezzo di trasporto, ha comunque un abbonamento ai mezzi pubblici per recarsi al lavoro e far fronte ad eventuali imprevisti.La sua giornata lavorativa è di 8 ore quindi è fuori casa da mattina a sera.Possiede uno smartphone con il quale controlla i suoi conti e con il quale utilizza i social network.

BUSINESS : COLLETTI BIANCHI

Michela, 29 anni

Laureata in giurisprudenza, abita a Monza nell’appartamento del fidanzato.E una pendolare e prende il treno tutti i giorni per raggiungere l’ufficio evitando cosi di usare la macchina, risparmiando tempo e denaro. Ama tenersi in forma ed è iscritta alla Virgin del Bicocca Village.Lavora alla Siemens come segretaria di direzione e spesso esce con le colleghe andando al Sio cafè.Possiede uno smartphone, un tablet e un portatile con i quali prenota viaggi e fa shopping online. Attraverso i social network cui è iscritta mantiene i rapporti con i suoi amici lontani.

FIlippo, 58 anni

Laureato in economia lavora come dirigente alla Deutsche Bank; è divorziato e da qualche anno abita da solo a Sesto, possiede un’altro appartamento in Moscova in cui vive l’ex moglie con il figlioPer raggiungere l’ufficio utilizza la macchina che ama guidare anche in viaggi impegnativi durante il tempo libero.Spesso va a teatro e al cinema gli piace molto mangiare e ancora di più bere.Possiede uno smartphone di ultima generazione e un portatile che usa prevalentemente per scopi lavorativi.


Andrea, 26 anni

Lavora come barista al PanCafè, 5 giorni alla settimana dalle 6 alle 14, raggiunge il posto di lavoro in macchina e una volta tornato a casa dorme sempre un paio d’ore prima di concedersi un’ora di jogging.Vive da solo perché è appena uscito da una lunga convivenza andata male.Ha uno smartphone, che usa poco e prevalentemente solo per chiamate e sms, e un computer portatile che collega spesso alla televisione per guardare le serie tv che segue al passo con gli Stati Uniti.

BUSINESS: ADDETTI AI LAVORI

Sofia, 42 anni:

Impartisce lezioni di tennis, personali o di gruppo, presso la Pro Patria in viale sarca, nonostante non lavori mai prima delle 14 spesso raggiunge il quartiere già in mattinata per allenarsi e per pranzare con la sua migliore amica che lavora in zona.Vive in viale Zara ed ha appena cambiato il suo mezzo di trasporto passando dal tram alla metropolitana sfruttando la nuova linea “lilla” cosa che la fa sentire molto più moderna.Ama leggere e lo fa spesso e volentieri, anche durante gli spostamenti, sul suo Ipad con il quale organizza anche tutti i suoi impegni quotidiani. Possiede anche un telefono di ultima generazione e un computer portatile che però è spesso utilizzato dal figlio 13enne.

Paolo, 22 anni

Adora il teatro e grazie alla scuola di recitazione che frequenta è riuscito a trovare un lavoro agli Arcimboldi dove, a seconda delle necessità, lavora in biglietteria o come maschera.Vive assieme a due amici in zona Lambrate e raggiunge il teatro con il passante ferroviario.Fanatico di tecnologia possiede Pc, portatile, smartphone, tablet, ebook reader, lettore mp3 e smart tv. Cerca sempre nuove applicazioni e nuovi siti per sorprendere gli amici. Ha conosciuto la sua ragazza proprio attraverso un’app per single.


Antonio, 19 anni

Matricola dell’università Bicocca, ha appena conseguito la maturità scientifica e adesso si prepara con entusiasmo a iniziare la sua carriera universitaria come studente di Economia.Vive con i genitori in Porta Romana e raggiunge il quartiere con il passante ferroviario.Non si ferma mai dopo le lezioni, ma tutti i giorni pranza in Bicocca.Ha un Iphone che usa ogni minuto per qualsiasi cosa ma non possiede un portatile, sta pensando di comprarsi l’Ipad che ritiene un must per ogni studente che si rispetti.

UNIVERSITÀ: STUDENTI

Laura, 23 anni

Laureanda in Sociologia, ama parlare con le persone e quindi si reca tutti i giorni in Bicocca, anche se non frequenta più i corsi perché deve solo ultimare la tesi. Abita su viale Monza e raggiunge l’università sulla sua Graziella bianca. Durante le belle giornate le piace studiare sulla Collina dei ciliegi. E’ vegetariana e cerca quindi sempre posti veg-friendly per pranzi e colazioni.Non ha uno smartphone ma possiede un portatile e un desktop con i quali prevalentemente lavora e si tiene informata leggendo quotidiani on-line e blog di informazione.

Matteo, 27 anni

Studente in triennale, ha già cambiato tre volte facoltà, è tutti i giorni in Bicocca ma non frequenta mai le lezioni. Arriva verso le 10,30 per la colazione e se ne va dopo le 19 orario dell’happy-hour.I genitori lo mantengono pagandogli vitto e alloggio, un monolocale in città studi in cui vive da solo.Possiede uno smartphone e un portatile con i quali controlla sempre i social network per invitare i suoi amici a feste e serate.


Anna 40 anni

Laureata in Architettura, insegna presso la facoltà di Psicologia, tiene due corsi uno per la laurea triennale e uno per la magistrale.Si sente molto giovanile e cerca di trasmetterlo anche ai suoi alunniVive da sola assieme ai suoi animali domestici (2 gatti e un cane).Possiede smartphone, portatile, tablet e desktop, è presente su tutti i social network, segue diversi blog e usa Whatsapp per comunicare con amici e colleghi.

UNIVERSITÀ: DOCENTI

Sonia, 63 anni

Laureata in Scienze statistiche insegna ormai in bicocca da più di 30anni, è vicepreside della facoltà di Economia e segue diversi progetti dell’università.Sposata con 3 figli che cercano di modernizzarla regalandole smartphone e portatile che però lei non ha voglia di utilizzare. A lezione usa ancora i lucidi per spiegare e ha un brutto rapporto con le mail degli studenti alle quali risponde con ritardi impressionanti.Raggiunge l’università in macchina dato che abita in Brianza.

Marco, 28 anni

Primo anno di insegnamento in Bicocca dopo il conseguimento di un PHD negli Stati Uniti.Motivatissimo, vorrebbe essere non solo un docente ma anche un punto di riferimento per la formazione dei suoi studenti.Registra tutte le sue lezioni che poi rende disponibili in streaming e per il download sul suo sito personale che aggiorna in parallelo a quello ufficiale della didattica.Utilizza portatile e tablet in parallelo durante le lezioni che prepara in keynote e arricchisce con enorme quantità di contenuti multimediali.Vive vicino all’università e si sposta in moto.


Salvatore, 48 anni

Abita in Brianza con la nuova compagna, è separato e ha un figlio di 19 anni che vede nel week-end con il quale gioca a tennis in viale Sarca, e spesso dopo la partita si ferma in zona per pranzare.E’ appassionato di basket ed è abbonato all’ Armani Jeans Milano, gli piace andare anche a concerti e al cinema.Ha un portatile che utilizza per lavoro, un pc fisso con il quale segue i risultati sportivi e usa come gaming-pc e uno smartphone che non sfrutta come potrebbe.

CITY USERS

Paola, 22 anni

Dopo la maturità ha scelto di studiare Storia e si è divisa dalle sue due migliori amiche Lucia ed Elena che invece hanno scelto Scienze della Formazione in Bicocca come percorso di laurea. Nonostante lei studi in Statale non si sono perse di vista, Paola infatti ha lezioni solo tre giorni alla settimana e nei giorni liberi usa le aule studio della Bicocca per preparare gli esami e sfrutta l’occasione per trovare le sue amiche.Adora il sushi e la pizza, i suoi piatti preferiti.Non utilizza molto il computer e lo smartphone che possiede; se lo fa è principalmente per informarsi o fissare degli appuntamenti.

Luigi, 65 anni

Sposato con Anna da ormai 41 anni, hanno tre figli, uno dei quali insegna all’università Bicocca, gli altri due trasferitisi all’estero per lavoro. Ogni tanto con la moglie prende il tram da Maciacchini dove abita per raggiungere l’unico figlio rimasto a Milano.Non possiede un computer né uno smartphone ma da un paio d’anni ha un Tablet con il quale legge libri e giornali e utilizza le applicazioni che gli hanno scaricato per controllare gli spettacoli dei cinema e dei teatri.

3. IL PROGETTO


Il sito QB è nato dalla volontà di soddisfare le esigenze degli abitanti, dei lavoratori, degli studenti e dei frequentatori più o meno occasionali del quartiere.Lo scopo principale del sito è fornire una panoramica chiara e utile dei servizi disponibili in Bicocca e di fornire ai visitatori consigli e valutazioni degli esercizi commerciali presenti.

Abbiamo creato un onepage site per creare un’esperienza di progettazione e d’implementazione del prototipo di un sito web secondo le metodologie e le prassi correnti nel mondo professionale e secondo un approccio sperimentale centrato sull’utente.

Sarà un aggregatore d’informazioni sul quartiere Milano Bicocca che risponderà ad eterogenee esigenze dei diversi target di utenti che frequentano il quartiere. Le esigenze si diversificano rispetto allo spazio urbano, allo spazio funzionale e sociale.


COME ABBIAMO PROGETTATO

Le fasi progettuali si sono articolate in diversi step. In un primo momento abbiamo stilato tutti i servizi e gli esercizi commerciali che esistono in Bicocca. Dopodichè abbiamo attribuito ad ogni tribù, e sottotribù, i diversi servizi ed esercizi commerciali in precedenza stilati.A questo punto della progettazione è emerso un problema, compilando tali attribuzioni, ci siamo resi conto che ogni servizio o/e esercizio pareva essere utile per tutte le tribù.Questo è stato il punto di snodo nel quale abbiamo deciso di procedere con la creazione delle Personas, immaginando quali potessero essere le esigenze dei diversi utenti del quartiere.

Un ulteriore soluzione concettuale, ma sostanzialmente collegato all’aspetto grafico-comunicativo dell’interfaccia grafica, è stata la scelta cromatica. Differenziare, dunque, ogni sezione del nostro onepage site dedicata alle tribù, con i colori che caratterizzano l’ambiente urbano della Bicocca. Le quattro sezioni sono contraddistinte da colori che concettualmente rimandano ai punti focali del quartiere, all’interno del quale esistono colori che connotano l’aggregazione sociale delle tribù. Un esempio, il caratteratteristico color mattone degli edifici universitari diventa il colore della sezione dedicata a questa tribù.



FASI DELLA PROGETTAZIONE

Il primo approccio pratico alla creazione di un’ipotetica interfaccia grafica, che compredesse ovviamente un primo abbozzo di AI, è quello illustrato dall’immagine soprastante. Si stratta di veri e propri schizzi carta e penna, nei quali è evidente una fase di brainstorming in cui sono stati delineati i primi elementi grafici e il logo.


In seguito ai primi schizzi carta e penna abbiamo iniziato a lavorare con photoshop per creare le prime grafiche. Il risultato di questa immagine, cioè la home page, è rimasto sostanzialmente invariato.


Step successivo è stato curare la grafica delle singole sezioni per tribù. In un primo momento l'idea era quella di creare div che contenessero non soltanto l'icona di categoria (food, wellness, fun, bar&tabacchi, shopping e nightlife), ma anche una breve descrizione di questa. Inoltre cliccando sull'icona, l'idea prevedeva di far scorrere un menu a tendina con delle sottocategorie per ogni macrocategoria, esempio; cliccando sull'icona food le opzioni consultabili dal menù sarebbero state pizza, ristorante, piadine e panini e supermercati. Nella fase successiva di prototipazione e scrittura del codice HTML, ci siamo però resi conto che questa interazione avrebbe creato un “sovraffollamento iconico”, per cui abbiamo optato per un'escamotage che di seguito riporteremo.


Questo screenshot si riferisce ad un ulteriore fase di interazione. Cliccando sull'elenco delle microcategorie della fase d'interazione precedente, avevamo ipotizzato l'apertura di questa finestra pop-up che indicasse l'elenco di tutti gli esercizi commerciali relativi al'icona cliccata, in questo esempio tutte le paninerie e piadinerie. Inoltre quest'idea prevedeva un sistema di ranking integrato sfruttando l'icona della stella come valutazione, e cliccando su un esercizio proposto si apriva sulla mappa a fianco un fumetto che riportasse il nome di tale esercizio commerciale, una breve descrizione dello stesso, l'indirizzo internet e gli eventuali account social.


Di seguito presentiamo gli screenshot del prototipo definitivo, un’evolu-zione, per certi versi sostanziale, di quello che abbiamo presentato in precedenza. La revisione di elementi del AI e grafico-comunicativi si sono resi necessari in fase di stesura del codice HTML, fase del progetto in cui ci siamo resi conto che tante interazioni che potevano funzionare a livello concettuale, a livello concreto non avevano la stessa usabilità.

La homepage è rimasta sostanzialmente la stessa, unico cambiamento è stato inserire una mappa, indicata dalla classica icona di pin, accanto al logo. Cliccando su di essa si apre in overlay la classica mappa di Google map in cui c'è un box di digitazione per la ricerca dei luoghi o degli eser-cizi commerciali.


Questo screenshot è l'evoluzione della sezione tribù, qui ad esempio quella dell'università. Si possono notare chiare differenza dall'idea iniziale, prima di tutto abbiamo alleggerito il campo dai troppi box a favore di un look minimale in cui facessero da padrone solo le icone di food, wellness, bar&tabacchi, shopping e nightlife. In basso a sinistra un menù rapido che rimanda l'utente alle diverse sezioni e lo riporta alla homepage (attraverso un sistema di scrolling verticale).

4. ARCHITETTURA DELL’INFORMAZIONE


Il sito è stato costruito “OnePage” seguendo le indicazioni del brief.All’inizio questo vincolo ci ha creato delle difficoltà perché questo tipo di architettura è più adatto allo story-telling piuttosto che al suggerimento e raccomandazione di places. Dopo le difficoltà iniziali abbiamo scelto uno scorrimento verticale e una categorizzazione iconica in modo da semplificare la navigazione per gli utenti.Riteniamo che la semplicità sia la caratteristica principale per un sito onepage infatti l’utente, che non ha la possibilità di tornare alla pagina precedente, deve potersi muovere all’interno del sito con fluidità e semplicità.

Fin dalla home si può riconoscere lo stile basato su icone facilmente riconoscibili sia per quanto riguarda la segmentazione degli utenti in tribù sia per quanto riguarda la ricerca di place a seconda delle categorie.

Per ogni tribù abbiamo creato una sezione specifica in cui il visitatore poteva esplorare le categorie proposte (food, wellness, fun, shopping, cafè e nightlife) ed esplorare le raccomandazioni.Ovviamente per ogni tribù i luoghi proposti differivano in modo tale da offrire a ogni utente un punto di aggregazione con altre persone della stessa fascia di età e di interesse.


Ogni luogo presenta un collegamento al proprio sito internet e alle pagine dei social network ( se presenti) oltre che un rating basato sui voti degli utenti.

Un chiaro esempio della selezione dei places in base non solo alle tribù ma anche alle sottotribù è l’ “American bar - tutto a un euro” inserito nella sezione food della tribù “università” solo per gli studenti e non per i docenti. La caratteristica principale del luogo è infatti quella di dare junk-food a prezzi molto contenuti che lo rende un luogo appropriato per studenti che non vogliono spendere molto.

5. WIREFRAME


La struttura della Home Page è molto essenziale, presenta il logo del nostro sito QB, un collegamento alle varie pagine delle tribù e la possibilità di aprire una mappa interattiva del quartiere.


Le sezioni dedicate alle singole tribù presentano anch’esse una struttura essenziale. Il logo della tribù compare nella sezione superiore della pagina, gli altri elementi grafici sono le icone delle sei categorie che sono state selezionate per le diverse tribù e un menù laterale per spostarsi all’interno del sito


Selezionando una categoria, se la tribù è divisa in sottotribù, si apre un menù di selezione specifica. L'esempio in questo caso è la scelta tra "colletti bianchi" e "addetti ai lavori" per quanto riguarda la categoria "business". Anche in questo caso la grafica segue lo stile minimalista del sito e la rappresentazione scelta è quella iconica.


Una volta selezionato il segmento di appartenenza vengono visualizzate le proposte di locali consigliati e le rispettive descrizioni. Oltre alle proposte per la categoria selezionata è presente un menù che permette all'utente di cambiare categoria ed esplorare cosi tutte le proposte dedicategli.

6. INTERFACCIA GRAFICA


Per quanto riguarda la grafica del sito abbiamo optato per una soluzione molto minimalista e iconica.

Vediamo nel dettaglio perché la scelta di icone e colori. Le icone per le tribù sono molto intuitive e raffigurano un esemplare prototipico della tribù. I colori sono stati scelti in base a criteri specifici: il colore giallo per i residenti è stato selezionato per ricordare il colore delle abitazioni presenti nel quartiere, il grigio per la categoria business per richiamare i colori degli edifici di Pirelli, Siemens e Deutsche Bank cosi come il colore rosso mattone per la categoria università è stato scelto per ricordare quello degli edifici dell’ateneo.

Leggermente diverso il discorso per quanto riguarda i city users, in questo caso il colore non è stato scelto per richiamare quello di un edificio, bensi quello di un mezzo di trasporto, la linea metropolitana 5 che collega il quartiere, prima abbastanza isolato, al resto della città.


Icona Food: classica icona da ristorante. Forchetta e cuc-chiaio indicano da sempre un luogo in cui poter mangiare;

Icona Wellness: icona tipica per palestre e centri benessere utilizzata per la categoria “wellness”;

Icona Fun: icona che rappresenta la maschera caratteri-stica dei teatri dato che i principali punti d’interesse della categoria sono il Teatro degli Arcimboldi e i cinema;

Icona Shopping: il caratteristico sacchetto da boutique è stato selezionato per indicare i luoghi dove poter fare ac-quisti;

Icona Caffè: la tazza del caffè fumante e la “T” di tabacchi sono stati inseriti per indicare i bar della zona Icona

Icona NightLife: data la varietà di locali dove passare la serata, dallo chic al casual è stata scelta un’indicazione temporale piuttosto che una stilistica.

Oltre alle icone per le tribù abbiamo selezionato quelle per i servizi. Anche in questo caso abbiamo optato per una scelta stilistica minimale. I colori di tutte le icone sono stati scelti su tonalità pastello, armoniche tra loro, in modo tale da ottimizzare l’user experience.

7. PROTOTIPO


Una volta digitato l’url del nostro sito la prima schermata che apparirà sarà quella di benvenuto che inviterà gli utenti ad iniziare la navigazione selezionando la categoria più adatta a loro.

Cliccando su “Inizia a navigare” l’overlay scomparirà lasciando spazio alla Home Page.


Cliccando in alto a destra nella home page sull’icona rappresentante una mappa è possibile aprire in overlay una mappa interattiva (di Google Maps) dalla quale reperire informazioni e indicazioni per raggiungere i luoghi desiderati.


Passando invece il mouse sulle icone delle tribù, animate da un’immagine di rollover, sarà possibile selezionare la categoria interessata.

Una volta raggiunta la categoria desiderata sarà possibile scegliere ciò che ci interessa trovare nel quartiere.

Nel caso delle categorie Business e Università prima dei places verrà visualizzata una schermata di selezione per affinare la ricerca: sarà quindi possibile scegliere la sottotribù “Colletti bianchi” o “Addetti ai Lavori” oppure “Studenti” o “Docenti”.


Una volta individuata la tribù sarà finalmente possibile navigare tra i luoghi significativi del quartiere. Nella parte bassa della pagina troviamo le 6 categorie mentre al centro della pagina sono presenti le schede dei places selezionati.

Scorrendoci sopra con il mouse tramite un pannello slide a scorrimento verticale appariranno i dettagli e i contatti per raggiungere i places.


Per quanto riguarda il nome del nostro progetto abbiamo scelto la sigla QB, chiaro riferimento alla notazione “quanto basta” presente nelle ricette, e alla sigla del quartiere Bicocca.

Lo spirito del sito è infatti fornire l’informazione necessaria a un utente del quartiere per potersi spostare con coscienza nei luoghi d’interesse presenti senza però vincolarlo a “quantità” precise ma lasciandogli la libertà di scegliere il suggerimento che preferisce.

Technology

Progettazione Sito - Quanto basta Quartiere bicocca