Progettazione Sito - Quanto basta Quartiere bicocca

1. QB
QUANTO BASTA (SAPERE)
Quartiere Bicocca
CARRADORI CARLO VIERI
COLOMBO ANDREA
RAINERI IRENE
1
722990
720386
715970
Quanto Basta - Bicocca

2. INDICE
1. ANALISI & BENCHMARK
2. RICERCA SULLE UTENZE
3. IL PROGETTO
4. ARCHITETTURA DELL’INFORMAZIONE
5. WIREFRAME
6. INTERFACCIA GRAFICA
7. PROTOTIPO

3. 1. ANALISI & BENCHMARK

4. 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
4
Quanto Basta - Bicocca

5. 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.
5
Quanto Basta - Bicocca

6. 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.
6
Quanto Basta - Bicocca

7. 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.
7
Quanto Basta - Bicocca

8. 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 immagini 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.
8
Quanto Basta - Bicocca

9. Per quanto riguarda invece il sito aroundmeapp.com abbiamo sempre tenuto in considerazione lo stile minimalista e iconico che permette di individuare le categorie di esercizi grazie ad immagini semplici e dirette.
9
Quanto Basta - Bicocca

10. 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
10
Quanto Basta - Bicocca

11. 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.
11
Quanto Basta - Bicocca

12. 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.
12
Quanto Basta - Bicocca

13. 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 riguarda 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.
13
Quanto Basta - Bicocca

14. 2. RICERCA SULLE UTENZE

15. 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.
15
Quanto Basta - Bicocca

16. RESIDENTI
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.
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à
ingegnere
informatico, 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 Pirelli
Non 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.
16
Quanto Basta - Bicocca

17. BUSINESS : COLLETTI BIANCHI
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.
Michela, 29 anni
Laureata in giurisprudenza, abita a Monza nell’appartamento del fidanzato.
È una pendolare e prende il treno tutti i giorni per raggiungere l’ufficio evitando così 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 figlio
Per 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.
17
Quanto Basta - Bicocca

18. BUSINESS: ADDETTI AI LAVORI
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.
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.
18
Quanto Basta - Bicocca

19. UNIVERSITÀ: STUDENTI
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.
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.
19
Quanto Basta - Bicocca

20. UNIVERSITÀ: DOCENTI
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 alunni
Vive 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.
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.
20
Quanto Basta - Bicocca

21. CITY USERS
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.
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.
21
Quanto Basta - Bicocca

22. 3. IL PROGETTO

23. 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.
23
Quanto Basta - Bicocca

24. 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ù.
24
Quanto Basta - Bicocca

25. 25
Quanto Basta - Bicocca

26. 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.
26
Quanto Basta - Bicocca

27. 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.
27
Quanto Basta - Bicocca

28. 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.
28
Quanto Basta - Bicocca

29. 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.
29
Quanto Basta - Bicocca

30. Di seguito presentiamo gli screenshot del prototipo definitivo, un’evoluzione, 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 esercizi commerciali.
30
Quanto Basta - Bicocca

31. 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).
31
Quanto Basta - Bicocca

32. 4. ARCHITETTURA DELL’INFORMAZIONE

33. 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.
33
Quanto Basta - Bicocca

34. 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.
34
Quanto Basta - Bicocca

35. 5. WIREFRAME

36. 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.
36
Quanto Basta - Bicocca

37. 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
37
Quanto Basta - Bicocca

38. 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.
38
Quanto Basta - Bicocca

39. 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 così tutte le proposte dedicategli.
39
Quanto Basta - Bicocca

40. 6. INTERFACCIA GRAFICA

41. 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 così 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, bensì
quello di un mezzo di trasporto, la linea metropolitana 5 che collega il
quartiere, prima abbastanza isolato, al resto della città.
41
Quanto Basta - Bicocca

42. 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.
Icona Food: classica icona da ristorante. Forchetta e cucchiaio 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 caratteristica 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 acquisti;
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.
42
Quanto Basta - Bicocca

43. 7. PROTOTIPO

44. 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.
44
Quanto Basta - Bicocca

45. 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.
45
Quanto Basta - Bicocca

46. 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”.
46
Quanto Basta - Bicocca

47. 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.
47
Quanto Basta - Bicocca

48. 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.
48
Quanto Basta - Bicocca