JungleB

JUNGLEBBUSDON Giulia
CESATI Matteo
MAZZOLA Annalisa
Comunicazione Visiva e Design delle Interfacce
2012/2013
729041
729001
728871

INDICE
1. ANALISI & BENCHMARK
2. RICERCA SULLE UTENZE
3. ARCHITETTURA DELL’INFORMAZIONE
4. WIREFRAME
5. INTERFACCIA GRAFICA
6. PROTOTIPO
3
20
30
35
60
67

JungleB 4
Il punto di partenza per il nostro lavoro è stato quello di analizzare, come
richiesto dal brief, altri siti già esistenti che hanno come obiettivi gli stessi
che ci riproponiamo di raggiungere con il nostro prototipo.
Abbiamo preso in considerazione tre tipologie:
- Community 2.0
- Sistemi Geolocalizzati
- One Page Site
In aggiunta, abbiamo ricercato dei siti che fossero specifici sul quartiere
Bicocca, che ne raccogliessero informazioni e consigli, esattamente
come farà il nostro prototipo.

JungleB 5
COMMUNITY 2.0
Le community 2.0 di riferimento che abbiamo scelto sono:
leganerd.com
snooth.com
lifekraze.com
Come più rappresentativa, tra le altre, abbiamo selezionato LegaNerd.

JungleB 6
Osservando il layout di LegaNerd, si nota subito che è una community
ricca di contenuti: il suo punto di forza è il modo in cui questi vengono
disposti, tentando di dare all’utente dei punti di riferimento.
A primo impatto sembrerà confusionario, ma dopo qualche minuto di
navigazione l’utente saprà già come muoversi.
Il sito si rivolge ad utenti già avvezzi a community grandi e ad internet in
generale.
L’originalità e il non prendersi troppo sul serio sono gli elementi distintivi
del blog.

JungleB 7
Lega Nerd è un social blog, ovvero un blog che si alimenta dei post
scritti da tutti gli utenti.
Ognuno può contribuire pubblicando articoli di vario genere: da articoli
prettamente di stampo informatico a quelli un po’ più frivoli che trattano
argomenti come fumetti o la tecnologia vista in ottica geek.
La mission di LegaNerd è quella di tenere aggiornati i suoi seguaci nerd
a 360° sulle ultime novità: quale modo migliore se non sfruttare le co-
noscenze degli utenti e la loro voglia di partecipare?

JungleB 8
Il target medio di LegaNerd sono (erano) uomini tra i 16 e i 35 anni: negli
ultimi tempi anche la componente femminile sta rinforzando le sue file.
I lettori possono fruire di articoli scritti da altri nerd o di editoriali pubblicati
dai webmaster del sito. I contenuti non si limitano solamente agli articoli
del blog ma anche agli interventi sul blog interno alla community.
LegaNerd offre quindi la possibilità di condividere i propri interessi con
utenti esperti ed avere un riscontro sulle proprie posizioni e al contempo
creare legami anche al di fuori del sito.
Si possono individuare tre principali modalità di interazione: il post all’in-
terno del blog, commentare i post di altri utenti e la partecipazione al fo-
rum.
Nel corso della sua storia, intoltre, LegaNerd ha cercato di creare occa-
sioni per far incontrare i propri utenti anche nella vita reale.

JungleB 9
SITI GEOLOCALIZZATI
Per i siti geolocalizzati, nel web abbiamo individuato questi tre esempi:

spottedbylocals.com
mapquest.com
yelp.it
Il sito che meglio incarnava la nostra idea di sito geolocalizzato, anche
pensando in ottica app, è SpottedByLocals.

JungleB 10
SpottedByLocals dà la possibilità ad un turista di poter visitare la città dal
punto di vista di chi la vive tutti i giorni.
Il punto di forza di questo sito geolocalizzato è sicuramente il poter
vedere i posti in relazione a tutta la città e mette in risalto più du altri le
descrizioni dei posti e i commenti di chi, la città, la conosce come le
proprie tasche.
Questo aspetto è uno di quelli che, per quanto riguarda la geolocaliz-
zazione, ci interessava maggiormente poter riprodurre all’interno del
nostro protoripo sul quartiere Bicocca, anche se in maniera più sintetica.

JungleB 11
Lo scopo di SpottedByLocals è quello di mostrare le città dal punto di
vista di chi ci vive tutti i giorni, dando la possibilità ai turisti di poter vede-
re posti o partecipare ad eventi che, altrimenti, sarebbero impossibili da
trovare solo con l’aiuto di una tradizionale guida turistica.
Allo stesso tempo, con l’aiuto degli utenti residenti nelle città, è possibile
vivere le classiche attrazioni turistiche con uno spirito diverso e un oc-
chio più attento e, forse, critico.
Proprio per la concezione dinamica e social del sito, il target sono i turisti
più giovani.

JungleB 12
In forma di blog gli spotters, autori selezionati dai webmaster del sito, ag-
giornano il sito indicando posti ed eventi che potrebbero maggiormente
interessare chi visita la città.
SpottedByLocals è guindi una dinamica guida turistica geolocalizzata
che permette ai turisti di muoversi in maniera più consapevole.
Gli utenti possono interagire col sito lasciando commenti ai post degli
spotters oppure rilasciando delle recensioni sui posti/eventi a cui hanno
partecipato grazie a SpottedByLocals.

JungleB 13
ONE PAGE SITES
Essendo un po’ il trend del momento, quando siamo arrivati a scegliere
one page sites, c’era un l’imbarazzo della scelta.
Dopo aver navigato un po’ in diverse gallerie di onepagesite, ne abbia-
mo selezionati quattro, dai quali abbiamo attinto le dinamiche principali
di quello che sarà il nostro prototipo:
viens-la.com
vanityclaire.com
bioipsum.com
perconte.com
Da ognunon di questi siti abbiamo estratto il carattere distintivo per farlo
diventare elemento fondamentale del nostro.

JungleB 14
Viens La è il one page site di uno studio grafico.
Abbiamo selezionato questo sito per le dinamiche che utilizza nella
gestione dei progetti. È da qui che ci siamo ispirati per la gestione delle
tribù del nostro progetto: sezioni che si aprono come ad entrare in un
altro sito, con una propria navigazione che cambia direzione rispetto alla
pagina principale.

JungleB 15
VanityClaire.com è stato scelto principalmente per il caratteristico utiliz-
zo che fa dei colori: per ogni sezione del sito, l’autrice usa uno specifico
colore che non si ripeterà nelle altre sezioni.
Da qui siamo partiti per definire la grafica del nostro prototipo: ogni tri-
bù, all’interno del nostro sito, avrà il suo colore identificativo, che aiuterà
l’utente ad orientarsi nella navigazione; ogni volta che si troverà in una
sezione di un dato colore, saprà che sta navigando nella tribù associata
a quel colore.
Anche in questo one page site ritroviamo il modello di navigazione in oriz-
zontale e, inoltre, interessante aspetto, è quello per cui l’autrice pensa il
suo sito in ottica responsive e le dinamiche di navigazione che sono in-
serite nella versione desktop si mantengono nella versione mobile, così
da non dover fare reimparare all’utente come navigare il sito.

JungleB 16
Il modello di navigazione multidirezionale è senz’altro il protagonista nel
one page site di perconte.com ed è anche il motivo per il quale è stato
incluso nei siti di ispirazione per questo progetto.
La navigazione avviene in verticale per selezionare i progetti, e in oriz-
zontale per esplorarli; il sito è navigabile utilizzando sia il mouse che le
frecce direzionali in versione desktop, mentre in versione mobile il sito
cambia leggermente aspetto, perdendo la multidirezionalità.
Inoltre abbiamo molto apprezzato l’utilizzo prepotente che viene fatto
delle immagini a discapito della parola scritta: questo rende il sito molto
più accattivante e di impatto oltre che di facile comprensione.

JungleB 17
Infine,l’ultimositocheabbiamopresoinconsiderazioneèbioipsum.com.
Bioipsum è una sorta di gioco: inserendo degli elementari dati personali,
come nome e sesso, e selezionando un mestiere, il sito fornisce come
output una breve e simpatica biografia personalizzata.
Nel concepire il nostro prototipo, abbiamo fatto della mission di bioipsum
il nostro mezzo per guidare l’utente inesperto all’interno del nostro sito:
con lo stesso meccanismo, l’utente inserirà i propri dati in un form, for-
nendo informazioni sul proprio coinvolgimento con il quartiere Bicocca
e ricevendo un’indicazione sulla tribù cui appartiene per poter continua-
re la navigazione del sito.

JungleB 18
QUARTIERE DI MILANO-BICOCCA
Dovendo creare un sito che raccoglie informazioni sul quartiere Bicoc-
ca, ci siamo guardati un po’ intorno per farci un’idea precisa dei siti esi-
stenti aventi lo stesso scopo.
Abbiamo trovato perlopiù blog, non aggiornati, che raccoglievano liste
di posti del quartiere.
Quasi nella totalità dei casi, le interfacce non erano curate e, in linea di
massima, molto essenziali, spesso poco intuitive e, in qualche caso,
confusionarie.
Tra gli altri, ne abbiamo isolato uno che ci è sembrato il migliore:
farebicocca.it

JungleB 19
FareBicocca.it è l’unico, tra i siti esistenti riguardanti il quartiere Bicoc-
ca, ad essere curato sia nella sua forma grafica sia nella dimensione dei
contenuti.
È un blog che viene continuamente aggiornato dai suoi autori e ripor-
ta notizie suddivise in diverse categorie come: Consiglio Zona 9, News,
Parco Nord, Salute e Ambiente, Sicurezza, Trasporti e Viabilità.
A differenza di quello che è il nostro obiettivo principale, il blog non con-
siglia i frequentatori del quartiere sui posti che possono risultare partico-
larmente interessanti nè, tantomeno, utilizza un sistema geolocalizzato
per aiutare l’orientamento nella zona, cosa che per noi ha enorme rilievo
all’interno del progetto.

JungleB 21
La principale richiesta del brief era quella di rispondere alle esigenze di
4 diverse tribù così definite:
- RESIDENTI
- UNIVERSITARI
- Studenti
- Docenti e Personale
- LAVORATORI
- Impegati e Colletti Bianchi
- Addetti ai lavori
- CITY USER
Basandoci su questa divisione, il nostro compito era di creare quattro
differenti narrazioni basate sui diversi utenti.

JungleB 22
Per rispondere alla richiesta del brief in maniera divertente ed intrigante,
abbiamo deciso di studiare un naming alternativo a quello del brief, in
modo tale che si integrasse meglio al concetto base del nostro proget-
to.
Abbiamo quindi risolto il problema trasformando le tribù in:
- NATIVES
- ACADEMICS
- NotesTakers
- Blackboarders
- WORKAHOLICS
- White Collars
- Service Dealers
- VISITORS

JungleB 23
Come le tribù indentificano abitudini e routine diverse, anche gli individui
che le popolano, pur magari appartenendo alla stessa, sono diversi tra
loro.
Per questo motivo, ispirandoci al lavoro del fotografo Jason Travis (aka
J Trav) e a delle persone reali, abbiamo delineato dei profili tipo per cia-
scun gruppo di appartenenza.
Grazie a questo step, in una fase successiva del lavoro, potremo più
facilmente smistare i punti di interesse presenti sul territorio, rifacendoci
alle abitudini delle nostre personas.

JungleB 24
NATIVESVive in Bicocca
© J Trav
Lucia, 7 anni
Vive con la sua famiglia in una casa di prorpietà
nel quartiere; frequenta la 2 elementare all’istituto
Carlo Poerio e si sposta accompagnata dai suoi
genitori.

La sua giornata, come quella di ogni bambino della
sua età, inizia presto quando viene accompagna-
ta a scuola dalla mamma, che è casalinga, mentre
il papà lavora in centro a Milano.
Le piace stare all’aria aperta e correre ma anche
giocare al pc anche se non può passarci più di 2
ore al giorno.
Riccardo, 35 anni
È single e vive da solo in una casa in affitto nel
quartiere.
È laureato in economia e lavora in banca in centro
a Milano.
Utilizza i mezzi pubblici per spostarsi più rapida-
mente in città ma possiede comunque un auto. È
un amante dello sport e della tecnologia.Va in pa-
lestra almeno tre volte a settimana e, un weekend
al mese, gli piace dedicarlo ad una gita fuori porta.

Possiede uno smartphone, un tablet e un pc por-
tatile: usa i suoi device per navigare in rete (ma gli
piace comunque leggere il giornale per rimanere
informato sulle ultime notizie), per fare acquisti onli-
ne e per contattare i suoi amici all’estero.
Ha profili su diversi social network.
Maria, 75 anni
Vedova, in pensione, ha lavorato in posta per 35
anni. Ha 3 figli grandi e sposati quindi vive da sola
in una casa di prorpietà
Utilizza i mezzi pubblici per spostarsi all’interno del
quartiere e per raggiungere il cimitero all’esterno
del quartiere. Va spesso a far la spesa e si trova
3 pomeriggi a settimana a bere il caffe con le sue
amiche al bar. Le piace raccontare storie e aned-
doti sulla sua vta.
I figli le hanno regalato un telefono cellulare base e
un pc fisso che ha imparato ad usare per contat-
tare il figlio che vive all’estero, ma non sa fare altro.
Non ha mai acquistato online perchè non è in
grado e non si fida.
Si informa ancora attraverso i mezzi tradizionali
quali tv e giornali. Ama leggere romanzi rosa.

JungleB 25
NOTESTAKERSStudia in Bicocca
© J Trav
Alice, 20 anni
È una studentessa di informatica al 2 anno, abita
con la sua famiglia a Sesto San Giovanni.
Lavora come animatrice presso un associazione
culturale, è single.
Frequenta tutti i giorni l’università , è una creativa.
Utilizza la macchina per muoversi e per raggiun-
gere l’università, le piace la musica e spesso va a
concerti. Ama stare in compagnia e appena può si
ferma a fare serata ed aperitivi con i suoi amici ed
è per questo che preferisce un pomeriggio al bar
piuttosto che in palestra.
Possiede uno smartphone, un computer fisso, un
portatile e un ipod: naviga in rete, fa shopping onli-
ne e acquista musica, utilizza i social network per
comunicare con i suoi amici.
Il suo sogno è quello di creare una startup.
Rita, 23 anni

È iscritta al primo anno di specialistica in Psicolo-
gia Sociale dei Consumi e dei Comportamenti.
Abita con la sua famiglia a Lecco, non lavora ma
arrotonda con delle ripetizioni. È fidanzata e fuma.
Si reca in università tutti i giorni: è una pendolare,
prende il treno tutti i giorni.
Le piace raccontare storie, fare foto e leggere.
Tutti i giovedì partecipa a della serate in discoteca
organizzate dal suo fidanzato, le piacerebbe lavo-
rare nel campo pubblicitario.
Possiede uno smartphone, un pc fisso, un portati-
le, un iPod e una reflex.
Usa i suoi device per navigare in rete e per con-
tattare i suoi amici all’estero. È iscritta a molti social
network, tra cui molti di photosharing per condivi-
dere le sue foto.
Simone, 24 anni
È uno studente, originario di firenze, vive con un
coinquilino in zona Lambrate.Studia giurispruden-
za ed è iscritto al 4 anno; arrotonda facendo il dj
un paio di sere al mese. È fidanzato con Giulia.
Va in università quasi tutti i giorni: per raggiunger-
la, utilizza i mezzi pubblici o la sua bici.
Ama lo sport, quando può organizza delle par-
titelle con i suoi compagni di corso. Una sera a
settimana si concede una cena fuori con la sua
fidanzata.
Possiede uno smartphone, un portatile e un ipod.
Utilizza i suoi device per navigare in rete, per ac-
quistare musica e per contattare la sua famiglia.
È molto attivo sui social network, che usa per re-
stare informato sul mondo, per comunicare con i
suoi amici e per orientarsi all’interno della città.

JungleB 26
BLACKBOARDERSInsegna in Bicocca
© J Trav
Laura, 40 anni

Laureata architettura, è docente di prima fascia
presso la facoltà di Psicologia. Abita da sola in una
casa di proprietà in centro, è single, fuma ed ha
un gatto.
Frequenta l’università 4 giorni a settimana ed uti-
lizza la macchina per muoversi. Le piace frequen-
tare workshop e convegni. Ama viaggiare, infatti
appena può ne approfitta per scappare dalla città.
Frequenta un club del libro e almeno due volte a
settimana fa aperitivo con i suoi amici.
Possiede uno smartphone, un tablet, un com-
puter fisso, un portatile, un lettore e-book e una
reflex. Utilizza i suoi device per restare aggior-
nata nel suo campo, per comunicare con i suoi
colleghi all’estero. Comunica con i suoi studenti
attraverso Facebook.
Roberto, 60 anni

Laureato in fisica, è docente di prima fascia pres-
so la facoltà di informatica. Abita con sua moglie in
una casa di prorpietà in centro a Milano. È sposa-
to, ha due figli grandi.
Frequenta l’università tutti i giorni ed è il coordi-
natore della sua facoltà. Utilizza la macchina per
arrivare al lavoro.
Gli piace fare foto e viaggiare; spesso trascina
sua moglie nei suoi viaggi. È interessato alle nuo-
ve tecnologie, compra il giornale tutti i giorni. Una
volta al mese porta sua moglie a teatro.
Possiede uno smartphone, un computer fisso, un
portatile e una reflex. Utilizza i suoi device per pre-
parare le lezioni. Si aggiorna ancora con i mezzi di
comunicazione tradizionali.
Mirco, 36 anni
Laureato in matematica, è ricercatore presso
l’università sotto la facoltà di Scienze Matimati-
che, Fisiche e Naturali. Abita con la sua famiglia in
una casa di proprietà a Monza. È sposato e ha un
figlio.
Pur possedendo una macchina, fa il pendolare e
prende il treno tutti i giorni per raggiungere l’uni-
versità perchè pensa che sia più comodo.
Gli piace leggere fumetti e colleziona oggetti
d’epoca, ama stare con la sua famiglia e ogni
weekend fanno una gita fuori porta. Quando può
parte per dei viaggi alla riscoperta della natura.
Possiede uno smartphone e un computer fisso:
utilizza i suoi device per comunicare con suoi
colleghi all’estero e per svagarsi. È legato ancora
ai mezzi tradizionali per avere informazioni.

JungleB 27
SERVICE DEALERSLavora in Bicocca
© J Trav
Giuseppe, 44 anni

Ha un bar nel quartiere, è sposato e abita con sua
moglie nel quartiere in una casa in affitto.
Utilizza la macchina per arrivare al lavoro.
Sei giorni a settimana apre presto la sua attività,
rimanendo fino all’orario di chiusura in serata, aiu-
tato da sua moglie.
Appena ha tempo gli piace fare del movimento,
almeno una sera a settimana porta la moglie al
cinema.
Possiede uno smartphone e un computer fisso
con i quali si svaga nei momenti di pausa.
Non ha mai fatto acquisti online, non ha un profi-
lo personale in facebook ma solo quello del suo
locale. Legge il giornale e guarda la tv per restare
informato sul mondo.
Irma, 50 anni
Lavora al centralino in università. È sposata e abita
con suo marito e il suo cane in una casa di pro-
prietà in zona Porta Venezia a Milano, ha due figlie
grandi ed è una fumatrice.
Pur avendo la macchina, prende i mezzi pubblici
tutti i giorni per recarsi in ufficio. Lavora 5 giorni a
settimana con orari 9-13 15-18. È solare e aperta e
le piace osservare le persone, è una donna attiva
e impegnata culturalemente, infatti appena può
visita musei anche se li ha gia visti.
Le piace trovarsi ogni giovedi con le sue amiche
per una serata tra donne che può variare tra cena
o aperitivo post lavoro.
Possiede uno smartphone e un computer fisso,
che usa per lavoro, per svagarsi, per comunicare
con le sue figlie e per leggere news online.
Silvia, 35 anni
Lavora in una boutique al Bicocca Village; abita in
affitto a Sesto San Giovanni ed è single.
Arriva sul posto di lavoro con la sua utilitaria; lavo-
ra full-time per cinque giorni alla settimana.
È molto portata per il suo lavoro in quanto le piace
stare in contatto con le persone e consigliarle su-
gli acquisti da fare e ha uno spiccato senso per la
moda. Almeno una volta al mese va a ballare con
le sue amiche che non riesce a vedere spesso a
causa dei suoi orari lavorativi

Possiede uno smartphone e un computer fisso;
utilizza i suoi device per comunicare con le sue
amiche. Le è capitato di fare acquisti online, ma
preferisce toccare le cose che compra.
Ha un profilo su facebook e twitter chesfrutta
nelle sue pause.

JungleB 28
WHITE COLLARSLavora in Bicocca
© J Trav
Letizia, 42 anni

Laureata in giurisprudenza, abita da sola in una
casa di proprietà a Saronno ed è fidanzata.
È una pendolare e prende il treno tutti i giorni
per raggiungere l’ufficio evitando così di usare la
macchina, risparmiando tempo e denaro. È una
donna cui piace la vita salutare e che ama mante-
nersi in forma: due volte a settimana va in palestra
dopo il lavoro.
Ama il cinema, la moda e i viaggi; le piace visitare
città straniere.
Non sempre è il suo uomo a pagare la cena, è
una donna indipendente e decisa.

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.
Ivan, 39 anni

Laureato in matematica, lavora come contabile, è
originario di Roma, si è trasferito a Milano ai primi
anni di università. Abita da solo nel quartiere in una
casa in affitto, è single.
Si sposta a piedi o in bici all’interno del quartiere
perchè è un amante della natura, ha comunque
un abbonamento ai mezzi pubblici per far fronte
ad eventuali imprevisti, non ha una macchina.
Va a correre ogni sera post lavoro.
La sua giornata lavorativa è di 8/9 ore, è timido
ma determinato e puntuale, e sul lavoro non sba-
glia mai. Quando può va a teatro.
Possiede uno smartphone, un tablet e un portatile
con i quali controlla i suoi conti e le cose di lavoro.
Pensa che i social network siano fonte di distra-
zione, si tiene aggiornao attraverso i giornali.
Soshito Nakakata, 43 anni
Laureato in economia e management, è origina-
rio di tokyo e lavora come esperto alla Deutsche
Bank; è single e da qualche anno abita da solo a
Monza in una casa di proprietà.
È un pendolare, usa il treno tutti i giorni per rag-
giungere l’ufficio, se gli capita di dover raggiun-
gere il centro preferisce il taxi ai mezzi pubblici.
Anche se non deve essere presente ogni giorno
in unfficio, a lui piace andarci: infatti gli piace stare
a contatto con le persone.
Non disdegna una bella serata a teatro.

Possiede uno smartphone di ultima generazione
e un portatile che usa per comunicare con i suoi
amici, parlare con la sua famiglia a distanza e per
svagarsi. È iscritto a diversi social network che
usa come strumento per tenersi aggiornato.

JungleB 29
VISITORSVisita la Bicocca
© J Trav
Andrea, 27 anni

Laureato in Scienze Naturali lavora in un’azienda
a Sesto San Giovanni, abita in una casa in affitto
con la sua ragazza a Milano.
Usa la macchina per raggiungere il posto di
lavoro e per spostarsi all’interno della città; è un
uomo molto pratico che non sta mai con le mani
in mano. Va in palestra tre sere a settimana e
quando può nel weekend gli piace portare la sua
ragazza al lago. È un grande appassionato di
cinema e di teatro.

Possiede uno smartphone e un portatile attra-
verso i quali si informa sugli avvenimenti in città,
prenota pacchetti vacanze e acquista beni di
diverso genere online. Ha diversi profili su social
network che utlizza per contattare i suoi amici e
per informarsi su quello che succede nel mondo.
Elisa, 35 anni

Geometra, lavora in uno studio in centro. Abita
con suo marito in una casa di proprietà a Milano.
Ha una macchina ma, per comodità, preferisce
usare i mezzi per spostarsi in città. Ha diverse
amiche che insegnano in Bicocca e almeno una
sera a settimana si trovano nel quartiere per una
serata tra donne approfittando del cinema e del
teatro Arcimboldi. Le piace la moda e la fotogra-
fia, è una donna attiva che cerca di mantenersi in
forma.
Possiede uno smartphone e un tablet. Attraverso
i suoi device si informa sugli avvenimenti in città e
prenota online per le sue visite in luoghi culturali e
per le sue cene.
Ha un profilo facebook che utlizza per contattare i
suoi amici e colleghi.
Ludovica, 23 anni
Iscritta al 2 anno di Lettere Moderne in Statale,
abita in una casa di proprietà con la sua famiglia a
Milano, è single.
Ha la macchina ma preferisce utilizzare i mezzi
pubblici per spostarsi all’interno della città.
Le piace scrivere ed è al passo con le ultime ten-
denze in fatto di moda. Le piace visitare mostre e
spesso si reca all’Hangar Bicocca.
Ha diversi amici che frequentano l’Università Bi-
cocca quindi diverse sere a settimana si trovano
a fare aperitivo in zona.
Possiede uno smartphone, un tablet, un compu-
ter fisso e un portatile.
Usa molto i social network a cui è iscritta per
orientarsi in città e restare in contatto con i suoi
amici. Legge notizie online.

ARCHITETTURA
DELL’INFORMAZIONE3.

JungleB 31
Per quanto riguarda l’architettura dell’informazione abbiamo dovuto
affrontare il vincolo posto dalla consegna del ONE PAGE SITE.
Abbiamo allora, cercato di capire quale potesse essere la struttura or-
ganizzativa logica e semantica migliore delle informazioni e dei conte-
nuti, affinchè l’utente finale non avesse trovato difficoltà nell’utilizzarlo.
Dopo aver scelto quali fossero le informazioni davvero utili al nostro
utente abbiamo pensato al modo in cui esso si potesse orientare all’in-
terno del sito: un menù.
La scelta delle voci all’interno del menù è stata facile: volevamo creare
un menu semplice e “riconoscibile” all’interno delle varie pagine naviga-
bili. Perciò abbiamo optato per un menù fisso, sempre presente , nella
stessa posizione, proprio per permettere all’utente di orientarsi.

JungleB 33
La fase che ha richiesto più tempo ed ingegno è stata quella in cui ab-
biamo dovuto smistare i punti di interessi per le varie tribù.
Aiutandoci soprattutto con il lavoro svolto nella fase della ricerca sulle
utenze, la soluzione per la quale abbiamo optato è stata quella che pre-
vede la creazione di diverse mappe, divise in categorie.
Nella vita delle nostre personas, siamo stati in grado di individuare, in
totale, sette categorie:
- Culture
- Eating Out
- Fun
- Movement
- Needs
- Rituals
- Take a Break

JungleB 34
Chiaramente non tutte le tribù avranno tutte le categorie e, nella stes-
sa maniera, a diversa tribù corrisponderanno diversi punti di interesse
elencati nelle varie categorie.
Per essere più chiari, la categoria Needs della tribù Visitors e della tribù
Notestakers non comprenderanno gli stessi posti.
Questo processo porta ad una visione un po’ “dissacrante” dei luoghi e
delle abitudini delle varie persone, ad esempio, il Centro Commerciale
Bicocca Village, per i Notetakers è stato visto più come un posto in cui
ci si va a svagare/mangiare..mentre per i Natives è rientrato nella cate-
goria dei Rituals, perchè un residente, al centro commerciale, ormai ci
va per passare il tempo.

JungleB 36
Una volta determinata l’architettura dell’informazione del nostro sito, ci
siamo dovuti porre il problema di come fare interfacciare gli utenti con
questi contenuti.
Per arrivare a stabilire il wireframe definitivo, abbiamo attraversato diversi
passaggi per poter arrivare a definire l’interfaccia che fosse più intuibile e
semplice per l’utente.

JungleB 37
1° INTERFACCIA
La prima interfaccia progettata prevedeva un menù orizzontale nella
parte superiore del sito, con le voci: Home, Tribù, Form, Contatti; nella
Home compariva uno slider di immagini del quartiere con inserite delle
parti scritte che spiegassero la mission del sito.
Passando nella seconda sezione, Tribù, si presentava all’utente una
schermata divisa orizzontalmente in 4 sottosezioni, una per ogni ma-
crotribù.
Nella sezione sottostante, Form, l’utente era invitato, nel caso fosse
stato necessario, a segnalare un nuovo posto non ancora segnalato
nel sito oppure una nuova tribù/minoranza consistente.
Infine, nella sezione Contatti venivano proposti i contatti degli autori del
sito, per ogni evenienza.

JungleB 40
Accedendo ad una delle tribù, il menù in alto cambia le sue voci in:
Consigliati, Tribù, Categorie, Social.
La prima cosa che l’utente trovava era una mappa con segnalati i posti,
selezionati per quella tribù, consigliati dallo staff, ovvero la sezione Con-
sigliati.
Navigando tramite il menù, si poteva accedere alle categorie sia trami-
te un menù a tendina sia tramite una schermata.
Nella schermata della categoria selezionata compariva una lista di posti
con, per ognuno, una mappa che geolocalizzasse il posto e delle indi-
cazioni su indirizzo, orari, etc.
Nella sezione Social si poteva fruire di un servizio streaming di post, se-
lezionati tramite parole chiave dallo staff, sui principali social network.

JungleB 43
2° INTERFACCIA
Avendo riscontrato dei problemi nella fruibilità dei contenuti, abbiamo
rivisto l’interfaccia iniziale apportando delle modifiche in modo tale che
l’utente non si “perdesse” nel tentativo di orientarsi.
Il menù di navigazione principale rimane sempre nella parte superiore,
orizzontale, con l’aggiunta di due sezioni: Conquista e Classifica.
Le tribù non compaiono più in orizzontale, ma una affiancata all’altra, in
modo tale che non si creasse una gerarchia tra queste ultime. Inoltre è
stato aggiunto una sorta di “identikit” per aiutare l’utente ad individuare
la propria tribù di appartenenza.
Nelle due nuove sezioni si possoo facilmente individuare i posti più vo-
tati all’interno del quartiere, sia tramite mappa che tramite lista.
La sezione Form è stata privata della possibilità di consigliare una nuo-
va tribù poichè si trattava di una possibilità limitata, mentre la possibilità
di consigliare un nuovo posto è rimasta invariata.

JungleB 47
Anche all’interno delle singole tribù qualcosa è cambiato:
all’apertura della sezione non ci si trova più la mappa con segnalati i po-
sti consigliati dallo staff ma l’icona della tribù circondata da quelle delle
singole categorie.
Alle singole categorie si accede solo tramite menù a tendina, è stata
eliminata la schermata che le raccoglieva tutte.
La schermata di ogni categoria è composta da una mappa e da un
elenco di posti. Una volta selezionato il posto si apriva una scheda con-
tenente le stesse informazioni prevista nella precedente interfaccia.
La sezione Social rimane invariata, viene aggiunta la sezione Itinerari,
ovvero una serie di percorsi consigliati per gli appartenenti a quella tri-
bù.

JungleB 51
3° INTERFACCIA
Nella proposta di interfaccia definitiva sono stati apportati ulteriori e im-
portanti cambiamenti.
Innanzitutto, il menù di navigazione principale non è più orizzontale
come nelle precedenti versioni ma questa volta è verticale, a sinistra
dello schermo.
La sezione adibita alla scelta della tribù è rimasta invariata mentre è sta-
ta eliminata la mappa dei posti più votati per lasciarne solo un elenco,
che ora compare nella stessa schermata del form per consigliare un
nuovo posto.
La schermata dei contatti degli autori invece è sempre rimasta uguale,
dalla prima all’ultima formulazione dell’interfaccia.

JungleB 54
4° INTERFACCIA: DEFINITIVA
Dopo aver iniziato a lavorare sul codice, ci siamo accorti che alcuni ele-
menti del sito e voci del menù, così come li avevamo pensati nell’ultima
proposta di interfaccia, potevano risultare fuorvianti e poco intuibili.
Di conseguenza abbiamo apportato ulteriori modifiche per arrivare,
finalmente, all’interfaccia definitiva.

Le tribù, anche quelle doppie, funzionano tutte alla stessa
maniera, con la differenza che queste ultime presentano
una schermata di scelta prima di accedere alla vera e pro-
pria sezione

JungleB 61
Dopo aver studiato il wireframe a supporto del nostro prototipo, abbia-
mo dovuto prendere delle scelte per quanto riguardava la grafica, ov-
vero come “vestire” la nostra interfaccia.
Dal momento che abbiamo deciso di mantere le linee del sito il più
semplici e pulite possibili, l’unico elemento (o perlomeno quello più im-
mediato) che poteva aiutarci nel guidare l’utente all’interno di questo
portale erano i colori.
Abbiamo deciso di adottare un colore “guida” per ogni sezione in cui
sarebbe potuto trovarsi un ipotetico utente.
Quindi la pagina principale, così come ogni singola tribù, ha il proprio
colore base che è l’elemento, insieme all’icona identificativa della tribù,
che fa capire all’utente, senza ombra di dubbio, che parte del sito sta
navigando.

JungleB 62
PAGINA PRINCIPALE {
}
background-color: #FFCC00;
Il giallo è sinonimo di vivacità, estroversione, leggerezza, crescita e
cambiamento.
Denota forte personalità ed è associato al senso di identità.
Stimola l’attenzione e l’apprendimento oltre che acuire la mente e la
concentrazione.
Per questi motivi abbiamo scelto una tonalità di giallo come colore
base del prototipo, affinchè l’utente sia meglio predisposto alla scoper-
ta e alla navigazione del sito.

JungleB 63
NATIVES {
}
background-color: #F47A20;
I Natives sono rappresentate da un arancione: colore simbolo dell’ar-
monia, associato alla salute del nostro corpo e che agisce sulla nostra
vitalità .
Così come chi ama la propria casa, chi ama l’arancione esprime il suo
amore con gioia e coinvolgimento e generalmente riesce a trovarsi in
perfetta armonia con tutto ciò che lo circonda.

JungleB 64
BLACKBOARDERS {
}
background-color: #569A4F;
La categoria degli Academics, che accoglie i Blackboarders e i Note-
stakers, è stata vestita di verde, colore che simboleggia la perseveran-
za, caratteristica ideale di ogni studente, e la conoscenza superiore,
propria dei professori.
NOTESTAKERS {
}
background-color: #87C771;
ACADEMICS

JungleB 65
SERVICEDEALERS {
}
background-color: #00ADEF;
Il mondo dei Workaholics è delle tonalità del cielo: azzurro per i Service-
dealers che trasmette il senso di pacatezza e un comportamento ar-
monioso verso l’ambiente e le persone che li circondano; blu per i Whi-
tecollars, in genere calmi, tranquilli ed equilibrati, che rifuggono ambienti
eccessivamente caotici e sfugge le persone irascibili e litigiose.
WHITE COLLARS {
}
background-color: #014A81;
WORKAHOLICS

JungleB 66
VISITORS {
}
background-color: #E40045;
Agli attivissimi Visitors è stato abbinato un rosso, colore che infonde
straordinaria forza psichica e motoria; è sinonimo di forte passionalità e
grande personalità. Chi è rappresentato dal rosso è una persona con
molta energia e che ama agire.

JungleB 68
Al termine di questo percorso di analisi e progettazione, siamo arrivati a
completare il prototipo.
È il frutto del lavoro dei tre componenti del gruppo: giulibudi, niceut,
teuz_rulez.
Lo sviluppo del progetto ha avuto il suo corso da Marzo a Luglio 2013,
e durante questo periodo l’evoluzione è stata radicale.

JungleB 69
Dopo aver affrontato la fase di analisi e benchmark, come prima cosa
ci siamo focalizzati sul concept del progetto:

Il tema di progetto è un aggregatore d’informazioni sul quartiere di Milano-Bicocca
che risponda alle esigenze di target eterogenei come le 4 tribù (e sotto tribù) che nei
diversi spazi e ore del giorno usano/vivono/frequentano questo spazio urbano,
funzionale e sociale.
Il sito deve cioè creare quattro narrazioni prevalenti o accessi diversificati alla
knowledge-base, capaci di soddisfare le esigenze informative in un’ottica social
e geo-localizzata.
Soffermandoci su questo passo del brief, forse suggestionati da termi-
ni come tribù, urbano e spazi ci è subito venuto in mente il concetto di
JUNGLEB, ovvero il quartiere Bicocca visto come una jungla urbana,
popolata da molte varietà di “specie”.
Ancora non sapevamo che proprio JUNGLEB sarebbe stato l’unico
elemento del nostro lavoro a rimanere nella sua forma originale.
JUNGLEB

JungleB 70
Rifacendoci alla concezione tradizionale di jungla, abbiamo iniziato a
pensare di associare ad ogni tribù un animale tipico di quell’ambiente,
nel quale, gli utenti appartenenti a quella tribù, avrebbero dovuto identi-
ficarsi.
Accantonata l’idea degli animali, ci siamo immaginati una jungla più
tribale; in questa fase è nato il naming alternativo a quello del brief, in
modo da renderlo armonico col concetto base del sito.
Successivamente, astraendo dal concetto tradizionale di jungla, ci sia-
mo spostati su quello di jungla urbana, quindi non più liane, alberi e ani-
mali ma strade, macchine, palazzi e persone.
Dopo esserci resi conto che anche in questa maniera il sito sarebbe
risultato troppo caotico, abbiamo ulteriormente astratto il concetto ren-
dendo l’idea della jungla attraverso l’utilizzo dei colori che, seppur tanti,
fanno da guida all’utente, aiutandolo ad orientarsi nella navigazione.
IL CONCETTO DI JUNGLA

JungleB 71
Una volta definito il nostro concetto base, le nostre tribù e in che modo
le loro “storie” sarebbero state raccontate, abbiamo elaborato l’archi-
tettura dei contenuti e successivamente studiato un’interfaccia che
fosse facilmente utilizzabile anche da un utente non proprio esperto
nella navigazione di piattaforme web.
Mantenendo costante l’idea di rendere il sito comunque meno caotico
e dispersivo possibile, nel vestire il wireframe abbiamo mantenuto le li-
nee semplici, servendoci prevalentemente di forme squadrate e lineari.
INTERFACCIA

JungleB 72
Una volta realizzata la veste grafica utilizzando Adobe Photoshop, sia-
mo arrivati a scrivere il codice per dar realmente vita al nostro prototipo.
Richiesta del brief era che fosse realizzato con una soluzione one page
site; per soddisfare questo punto ci siamo serviti di codice html, css e
javascript.
CODICE

JungleB 73
Altra richiesta del brief era che il sito fosse geolocalizzabile e, quindi, fare
in modo che l’utente potesse orientarsi mediante la consultazione di
una vera e propria mappa.
Anche essendo solo un prototipo, non abbiamo voluto servirci di im-
magini statiche ne di programmi appositi per la creazione di mappe per
simulare la geolocalizzazione ma abbiamo voluto mettere mano nel
codice servendoci di js e dello strumento Maps di Google.
Inquadrando l’area del quartiere Bicocca, abbiamo inserito le coordina-
te dei punti di interesse selezionati individuandoli così con un puntatore
su una mappa; abbiamo inoltre modificato i css delle mappe coloran-
dole coi colori delle nostre tribù.
MAPPE

JungleB 74
JUNGLEB
Infine, dopo mesi di lavoro continuo e ore passate in compagnia dei
principali tool della suite Adobe Design and Web Premium, siamo ar-
rivati a realizzare un prototipo funzionante sui principali browser quali
FireFox, Chrome e InternetExplorer e visibile anche da device mobili
come tablet e smartphone.
Non ci resta quindi che augurarvi una buona navigazione!

JungleB

Recommended

Recommended

More Related Content

Similar to JungleB

Similar to JungleB (20)

More from Giulia Busdon

More from Giulia Busdon (8)

JungleB