Relazione finale per il progetto del corso di Comunicazione visiva e design delle interfacce. Seguendo il brief abbiamo creato un sito che rispondesse alle esigenze del Quartire Bicocca di Milano, con funzioni di geolocalizzazione, di filtraggio, e social tra le altre. Il sito Beecocca risponde inoltre alla richiesta di realizzazione di un sistema informativo ibrido, fruibile in modalità on-line da postazione fissa, ma è altrettanto adeguato alla fruizione su device mobili in modalità landscape e portrait.

1. Università degli Studi di Milano Bicocca
Corso di Laurea Magistrale in Teoria e Tecnologia della comunicazione
Corso di Comunicazione visiva e design delle interfacce
Proff. Letizia Bollini & Riccardo Cova
Relazione finale del progetto d’esame
“Milano Bicocca: l’isola urbana.
Territori urbani. Territori sociali. Territori digitali.”
(Gruppo 6)
Gennari Valeria
matr. 758677
v.gennari@campus.unimib.it
Salvaggio Morgan
matr. 711214
m.salvaggio3@campus.unimib.it
Troni Ilaria
matr. 744826
ilaria.troni88@gmail.com

2. INDICE
1. PRIME PROPOSTE __________________________________________ p. 2
1.1 Concept e wireframe
Concept A (mappa concettuale e wireframe)
Concept B (mappa concettuale e wireframe)
Concept C (mappa concettuale e wireframe)
2. ARCHITETTURA DEI CONTENUTI di BEECOCCA __________________ p.7
2.1 Obiettivi
2.2 Analisi benchmark
2.3 Geolocalizzazione
2.4 Sistema di filtraggio
Tribù
Categorie
Orari
Punti d’interesse
Bottoni social
3. ORGANIZZAZIONE E ARCHITETTURA DELL’INTERFACCIA ________ p.10
3.1 beecocca-da qui a lì per il quartiere Milano Bicocca
(prima versione)
3.2 bicoccartina-Check your choice!
4. BEECOCCA-DA QUI A LÌ PER IL QUARTIERE MILANO BICOCCA
(VERSIONE DEFINITIVA) _____________________________________ p.13
4.1 Il tema
4.2 Il layout
5. USABILITÀ ________________________________________________ p.18
5.1 User Persona & User Scenario
6. SCELTE TECNOLOGICHE E D’IMPLEMENTAZIONE _______________ p.18
7. ”A PORTATA DI CLICK E A PORTATA DI TOUCH” _________________ p.20
Allegati ______________________________________________________ p.21
1_concept a – mappa concettuale
2_concept a – wireframe homepage
3_concept a – wireframe pagina-tipo
4_concept b – mappa concettuale
5_concept b – wireframe pagina-tipo
6_concept c – mappa concettuale
7_concept c – wireframe pagina-tipo
8_Punti d’interesse (tabella dati)

3. 2
1. PRIME PROPOSTE
Massimizzare la quantità e qualità
dell’informazione e
minimizzare il costo e lo sforzo per trovarla.
Il quartiere Bicocca non è tra i luoghi fisici e digitali più ricercati di Milano: non è frequentato per
grandi eventi o manifestazioni, ma è vissuto per le funzioni di base che caratterizzano le attività
quotidiane delle persone che transitano soprattutto durante le ore diurne. Per questi motivi le
prime fasi di progettazione sono state dedicate alla individuazione di concept che meglio
interpretassero le esigenze del nostro ipotetico target. Dall’analisi iniziale fatta sui siti esistenti
che trattano del quartiere Bicocca, abbiamo notato che le componenti dinamiche di news e
aggiornamenti non sono molto rilevanti (probabilmente perché il quartiere non è particolarmente
attivo se non nei pochi periodi, e ben definiti, di alcune festività). Per questo abbiamo deciso di
dare grande spazio ai servizi offerti e alle attività commerciali presenti sul territorio.
Grazie al supporto di uno strumento semplice e immediato come Google Maps, sono stati ideati
due primi concept che rispecchiano il più possibile quanto detto. In seguito a numerose riflessioni
sulle criticità di questi ultimi, abbiamo elaborato un terzo concept, punto di incontro delle migliori
idee venuteci. Nei paragrafi che seguono descriveremo quali processi ci hanno portato alla scelta
del sito sviluppato per il progetto.
1.1 Concept e wireframe
CONCEPT A
Mappa concettuale
La prima proposta mira a creare uno spazio digitale che rispecchi i punti di interesse utili all’utente
che si muove nello spazio fisico del quartiere. Partendo da un filtraggio per tribù, gli snodi
principali della nostra mappa concettuale sono: servizi, risto, tempo libero e negozi. Ognuno di
questi filtri, essendo una macro area, viene poi diviso in sottocategorie per rendere più agevole la
ricerca dell’utente: tra i servizi abbiamo inserito trasporti, banche, poste, commissariati, scuole e
chiese; la categoria risto è stata suddivisa a seconda dell’orario in cui gli utenti potevano usufruire
dei locali (colazione, pranzo, aperitivo, cena after, all day long); all’interno dell’area tempo libero
abbiamo incluso teatri, cinema, mostre, sport e parchi; ed infine sotto la voce negozi sono stati
inseriti supermercati, shopping, librerie e farmacie. Ogni sottocategoria raccoglie i punti di
interesse con le relative informazioni (sito web, localizzazione mediante Google Maps, orari di
esercizio, bottoni social per la condivisione tra utenti in rete e uno spazio disponibile per i
commenti). È un diagramma ad albero semplice e pulito che organizza categorie e sottocategorie
in modo gerarchico: l’utente, in pochi passaggi, riesce a raggiungere le informazioni utili. Qui si
seguito una “vista dall’alto” del concept a nel suo complesso, per i dettagli, si rimanda all’Allegato
n°1.

4. 3
Wireframe
La soluzione pensata per tradurre la struttura sopra descritta in un sito web è la seguente.
Presenta una home (Allegato n°2) caratterizzata da:
- un logo ben visibile in alto a sinistra con annesso pay-off,
- una introduzione che descriva brevemente le funzioni del sito,
- un filtro tribù che permette all’utente di scegliere la propria tribù di appartenenza, più di
una o tutte (grazie alla voce “tutte le tribù”),
- un ampio ed importante menù dedicato alle categorie sopra descritte.
La medesima pagina si trasforma appena l’utente sceglie una delle quattro categorie (Allegato
n°3): in Fig.3 vediamo l’esempio fatto sulla scelta della categoria servizi. Proseguendo per livelli,
nella linguetta compaiono le voci incluse nella sezione e le relative informazioni utili all’utente con
annessa mappa di Google.
Fig. 2 - Wireframe Homepage concept a
Fig. 1 - Mappa concettuale concept a

5. 4
CONCEPT B
Mappa concettuale
Il secondo concept (Fig.4) mostra dinamiche differenti e, a nostro parere, più accattivanti. I filtri
sono il nucleo del funzionamento del sito web: grazie a questa funzione, l’utente arriva alla mappa
e ai punti d’interesse che rientrano nei parametri scelti.
L’Allegato n°4 mostra i sistemi di filtraggio scelti:
- filtro tribù (studenti, personale universitario, residenti, impiegati, addetti ai servizi, city-
user),
- filtro categorie (servizi, risto, tempo libero, negozi che rispecchia la scelta fatta nel primo
concept),
- filtro orari (mattinata, pranzo, pomeriggio, happy hour, sera, after),
- filtro zone (qui chiamate zona 1, zona 2, zona 3, zona 4. >>1: Zona U6 e U7, Piazza della
Trivulziana; >>2: Zona Arcimboldi, Stazione, Abitazioni limitrofe; >>3: Zona DeutchBank,
Piazza della Scienza; >>4: Zona industriale, Bicocca Village, Centro Sarca, U14).
Come il concept a, ciascun luogo sarebbe stato descritto tramite sito web, localizzazione mediante
Google Maps, orari di esercizio, bottoni social per la condivisione tra utenti in rete e uno spazio
disponibile per i commenti.
Fig. 3 - Wireframe Pagina_tipo concept a
Fig.4 – Mappa concettuale concept b

6. 5
Wireframe
La mappa concettuale si concretizza in un sito web che, questa volta, vede la mappa come
elemento dominante sulla scena (Allegato n°5). Il nome del sito e il pay-off occupano una
posizione centrale; lateralmente vengono posti i bottoni dei filtri che si trasformano nell’elenco
delle voci selezionabili, con un click del mouse (o con un semplice tap su schermo touch). Il punto
d’interesse viene individuato dal classico marcatore di Google Maps e le informazioni sono
visualizzabili in un fumetto.
CONCEPT C
Mappa concettuale
La terza proposta nasce dalla rivisitazione del concept b: per arrivare al risultato, l’utente ha a
disposizione i filtri di tribù, categorie e orari. Come si vede bene dalla mappa concettuale
(Allegato n°6), è stato eliminato il filtro per zone poiché non ritenuto abbastanza efficace per il
raggiungimento del goal da parte dell’utente: le zone da noi definite non sono abitualmente usate
per suddividere il quartiere, e ciò potrebbe portare l’utente a perdere tempo (e pazienza!).
Inoltre, le tribù sono passate da sei a quattro: in base a quanto emerso dai risultati dei
questionari, le esigenze del personale universitario, dei colletti bianchi e degli addetti ai servizi si
assomigliano molto, e ci è sembrato giusto far confluire tutti sotto l’etichetta “lavoratori”.
Il filtro degli orari è stato ripensato con le seguenti voci: mattino, pranzo, pomeriggio, happy hour,
night, tutto il giorno.
Ultimo punto, ma fondamentale è stata inserita la funzione di geolocalizzazione sia da pc che da
device mobile.
Fig.5 – Wireframe Pagina_tipo concept b

7. 6
Wireframe
Il wireframe (Allegato n°7) è rimasto pressoché invariato rispetto a quello del concept b,
senonché il menù è stato spostato tutto a sinistra accanto alla mappa.
Al momento della creazione delle due vesti grafiche per questo concept, però, il wireframe è stato
stravolto; in una delle due proposte, la geolocalizzazione precede d’importanza la mappa e il
menù diventa a scomparsa. Vedremo meglio dei paragrafi che seguono i dettagli di queste
modifiche che costituiscono le peculiarità del sito beecocca.
Fig. 6 – Mappa concettuale concept c
Fig. 7 – Wireframe Pagina_tipo concept c (prima versione)

8. 7
2.ARCHITETTURA DEI CONTENUTI
Trovare l’informazione è il primo passo
per prendere una decisione.
Scegliere è il secondo.
L’architettura dell’informazione dovrebbe
aiutarci non solo a trovare qualcosa
ma anche a fare la scelta giusta.
Lo sviluppo del progetto in questione è sempre stato caratterizzato dalla consapevolezza di dover
offrire all’utente finale un buon prodotto di interaction design: abbiamo cercato di rendere il sito
fruibile e usabile, pensando a come potessero meglio incontrarsi le tre componenti chiave del
territorio urbano, digitale e sociale, ossia contesto, contenuto e utenti.
Il territorio urbano era sotto i nostri occhi, ma tradurre ciò nei contenuti del sito per farlo
diventare territorio digitale, non è stato semplice. Categorizzare il contesto per arrivare ai
contenuti del sito ha richiesto tempo è svariate tecniche: brainstorming personale e di gruppo,
card sorting (più comunemente conosciuta come “tecnica dei post-it”), e organizzazione di queste
idee nelle mappe concettuale prima descritte.
Fig. 8 – “Territorio – centered” design

9. 8
L’analisi delle categorie da inserire ha richiesto ricerca, analisi e catalogazioni dei punti di
interesse utili all’utente: non abbiamo presentato uno massa disorganizzata di dati, ma abbiam
cercato di essere chiari e semplici nello stratificare le informazioni ottenute1
.
Vediamo ora, in modo più approfondito, come sono state organizzati i contenuti del sito per dare
sostanza ai concept descritti in precedenza.
2.1 Obiettivi
Prima di sviluppare questo progetto, abbiamo riflettuto sugli utenti e le attività che avrebbero
potuto svolgere grazie a questo strumento. Le tribù che ci sono state assegnate hanno
sicuramente obiettivi diversi, motivazioni razionali ed emotive differenti per usufruire del
quartiere secondo percorsi alternativi tra loro. “Date all’utente quello che cerca esattamente
quando lo cerca.. non c’è niente di più gratificante”; il nostro sito cerca di dare risposta a questa
esigenza attraverso due funzioni fondamentali: la geolocalizzazione e i filtri (si vedano a proposito
i paragrafi 2.3 e 2.4 ). Entrambe ci permettono di mettere in pratica questo principio, tanto
semplice quanto veritiero!
2.2 Analisi benchmark
Alcuni dettagli migliorativi del sito sono stati ispirati dalla preliminare analisi dei siti (brief 2).
Come riportato nell’analisi benchmark di Troni, http://jammap.cassioso.com/ ci è parso un sito
semplice, immediato e altamente fruibile, che mette la localizzazione alla base del proprio
funzionamento; allo stesso modo, in beecocca i bottoni per la geolocalizzazione sono i primi che si
presentano all’utente per iniziare ad usare il sito.
Inoltre, dal sito web www.wikihood.com/web, abbiamo preso spunto per integrare al classico
fumetto di Google Maps, una breve descrizione del punto d’interesse selezionato dall’utente e il
principio di rating.
Un altro sistema che ruota attorno alla geolocalizzazione è il sito analizzato Salvaggio,
http://fruitcity.co.uk/: mettere a conoscenza cittadini londinesi e non che lungo le strade della
capitale inglese maturano ogni anno grandi quantità di frutti che non vengono raccolti e così
marciscono in terra. Con questo sito è facile trovare tutti gli alberi o piante da frutto presenti a
Londra.
A differenza di http://www.mybicocca.it/, invece, abbiamo preferito evitare il lungo elenco di
categorie in ordine alfabetico che renderebbero la ricerca dell’utente più in stile “pagine gialle” e
meno immediata. Inoltre non è caratterizzato da molti modelli di interazione; è un sito
informativo a una sola direzione sito  utente.
1
Al fine della realizzazione del progetto, va detto che i punti di interesse del quartiere sono stati scremati; ad esempio,
non sono stati inseriti tutti i punti di ristoro presenti in Bicocca, ma alcuni a titolo esemplificativo perché fosse
comprensibile il progetto realizzato.

10. 9
2.3 Geolocalizzazione
La prima funzione a disposizione dell’utente è la geolocalizzazione, attivabile sia da device mobile
che fisso. C’è sia la localizzazione automatica del dispositivo, sia la possibilità di inserire l’indirizzo
o il luogo a cui si vuole arrivare. I dettagli verranno meglio spiegati nel paragrafo 4.2 alla voce
Layout.
2.4 Sistemi di filtraggio
Come accennato in precedenza, una delle due funzioni fondamentali di beecocca per cui è
necessario spendere alcune parole sono i filtri attraverso i quali l’utente può scremare la propria
ricerca e arrivare in poco tempo al risultato desiderato. Vediamoli nel dettaglio.
TRIBÙ
Come richiesto dal brief, nel sito beecocca, le tribù rivestono un ruolo importante: sono il primo
dei tre filtri a disposizione dell’utente per effettuare una scrematura tra tutti i punti di interesse
individuabili nel quartiere Milano-Bicocca. Non abbiamo optato per la suddivisione in 6 tribù
utilizzando la divisione di universitari e lavoratori perché, in base ai dati emersi dal questionario,
le risposte di docenti e personale TA erano più vicine a quelle di impiegati e addetti ai servizi,
piuttosto che a quelle degli studenti; quindi, presumibilmente, la suddetta categoria potrà
usufruire della funzionalità “filtraggio” di beecocca, sotto la voce “lavoratori”, senza trovare
difficoltà. Riconosciamo comunque che la principale criticità di una schematizzazione per utenza è
la capacità del visitatore di riconoscersi in un gruppo. Va detto però che all’interno del quartiere
Bicocca non c’è un’utenza così particolareggiata da dover ampliare questo tipo di filtro.
CATEGORIE
Il secondo filtro è forse quello più importante. Abbiamo già spiegato il perché della scelta fatta per
categorie di macro aree con un solo sottolivello, piuttosto che l’organizzazione dei contenuti in
ordine alfabetico: abbiamo optato per un sistema di tipo ambiguo, ossia evitare di moltiplicare
all’infinito la suddivisione in sottocategorie delle informazioni a favore di una più semplice
divisione per macro aree, appunto. Secondo questa scelta, abbiamo pensato alle seguenti
etichette di categoria: servizi, risto, tempo libero e negozi. Ognuna di loro presenta
rispettivamente 6 o 5 sottocategorie. Per i servizi abbiamo individuato trasporti, scuole, poste,
commissariati, banche e chiese; per i punti di ristoro abbiamo effettuato la seguente suddivisione
bar, pub, gelaterie, fast-food, ristoranti e mense. Nel tempo libero abbiamo inserito teatri,
cinema, mostre, parchi e sport; mentre tra i negozi abbiamo menzionato supermercati, librerie,
farmacie, abbigliamento, tecnologie e tabacchi.
ORARI
La terza modalità di filtraggio è stata elaborata in funzione degli orari di utilizzo del quartiere
Bicocca: mattino (07:30-12:00), pranzo (12:00-15:00), pomeriggio(15:00-17:00), happy hour
(17:00-21:00), night (21:00-02:00), tutto il giorno. Le risposte ai questionari mostrano che studenti
e un lavoratori frequenteranno il quartiere nelle prime tre fasce orarie, mentre un city user
potrebbe usufruire del quartiere nelle ore diurne se interessato al Bicocca Village o al Centro
Sarca, oppure nelle ore serali per il teatri, i cinema e qualche locale. I residenti spesso sono fuori
per lavoro tutto il giorno, ma vivono di più la categoria dei negozi rispetto alle altre tribù.

11. 10
PUNTI D’INTERESSE
I punti ritenuti “d’interesse” all’interno del quartiere e i confini del quartiere Bicocca sono stati
individuati anche con l’aiuto delle mappe disegnate dai nostri intervistati. Ne è emerso un
documento di Excel (si veda l’Allegato n° 8) con l’elenco dei punti di interesse, e le voci dei filtri a
cui corrispondono; per di più, per agevolare il lavoro di creazione del fumetto con le informazioni
inerenti al luogo, sono state compilate anche le celle con breve descrizione del servizio, indirizzo,
orari e presenza del sito web.
BOTTONI SOCIAL
Nella versione definitiva di beecocca, la parte social è direttamente collegata a ciascun punto
d’interesse che compare sulla mappa del quartiere. Nel fumetto con le informazioni utili al
visitatore compaiono anche le icone di facebook, twitter, Google plus e Pinterest; tutto ciò,
ovviamente, se l’attività in questione ha già gli account attivi per questi social media!
3.ORGANIZZAZIONE E ARCHITETTURA DELL’INTERFACCIA
Gli utenti vogliono
applicazioni e siti familiari,
graficamente appaganti
e facili da usare.
Il wireframe del concept c (si veda Allegato n°7) è stato ulteriormente modificato in corso
d’opera. Vi mostriamo di seguito le due proposte grafiche e di layout intermedie da cui è nata la
versione finale di beecocca.

12. 11
3.1 beecocca – da qui a lì per il quartiere Milano Bicocca
(prima versione)
Concentriamoci a descrivere l’organizzazione dell’interfaccia. Per il tema grafico si rimanda al
paragrafo 4.1. Il nome del sito e il pay-off esplicativo occupano uno spazio significativo nella
pagina: la scelta è dovuta al fatto che questo è l’unico dettaglio grafico particolarmente incisivo
all’interno di tutto il sito. Una striscia intermedia è dedicata alla geolocalizzazione e alla funzione
di richiesta delle indicazioni stradali.
Il resto del sito si divide in due parti: una buona porzione è lasciata alla mappa, mentre a sinistra
troviamo i filtri di tribù, categoria e orario.
Sottostanti la mappa, erano stati posti i bottoni social, poi inseriti nel fumetto che descrive nel
dettaglio ciascun punto di interesse.
Fig.9 – Interfaccia beecocca (prima versione)

13. 12
3.2 bicoccartina – Check your choice!
In questo caso, l’interfaccia è ancora più minimalista e pulita, ma il nome del sito e il pay-off
occupano ugualmente una posizione centrale e di discreta grandezza. La funzione di
geolocalizzazione rimane invariata rispetto a quella di beecocca e la mappa del quartiere
guadagna la centralità della pagina. Il menù con i filtri compare su una tenda scorrevole (Fig.11).
Fig.10 – bicoccartina (screenshot 1)
Fig.11 – bicoccartina (screenshot 2)

14. 13
4.beecocca – da qui a lì per i quartiere Milano Bicocca
(versione definitiva)
Il sito riprende il tema grafico (look) più incisivo di beecocca e la struttura (feel) più accattivante di
bicoccartina.
4.1 Il tema
Il tema scelto è giocoso, presenta colori delicati e riesce ad essere minimale senza cadere
nell’anonimato. La scelta dell’ape come fil rouge del concept grafico ci è parsa un’ottima
soluzione per invogliare l’utente a “curiosare per il quartiere”. A partire dal gioco di parole del
nome (“bee” in inglese significa “ape” e si legge “bi”) il sito, in questo modo, gode di una forte
identità senza perdere di credibilità: l’alta fruibilità del sito e l’immediatezza con cui si presenta
all’utente, fa capire a quest’ultimo che non è un sito-giocattolo e che nonostante il carattere
bambinesco, il concept a supporto del funzionamento arriva dritto al punto.
Fig.12 – Homepage beecocca

15. 14
4.2 Il layout
I bottoni per la geolocalizzazione presentano la classica forma a esagono della cella d’api e
differenziano in percorso dell’utente a seconda che stia usufruendo del sito tramite device mobile
o fisso. Se siamo su device mobile, la geolocalizzazione avviene semplicemente schiacciando il
bottone e la posizione comparirà nella prima stringa; altrimenti è possibile fare una ricerca di
luogo inserendo l’indirizzo e cliccando sulla lente d’ingrandimento. Se l’utente visita il sito da pc
dovrà inserire l’indirizzo nella prima stringa e cliccare sul tasto “bzz!” per avviare la ricerca e far
comparire il marcatore di posizione sulla mappa.
L’utente può anche vedere sulla mappa il percorso da fare per spostarsi da un punto A ad un
punto B, semplicemente inserendo gli indirizzi di partenza e arrivo nelle stringhe che compaiono
una volta cliccato su indicazioni stradali.
Fig.13 - Localizzazione da device mobile Fig.14 – Localizzazione su device fisso

16. 15
Nel caso in cui l’utente si geolocalizzi su mobile, ma non si trovi nel quartiere Bicocca, l’ape
ricorderà all’utente che può visualizzare solo le mappe riguardanti il quartiere in questione
(fig.15). Nel caso in cui si trovi su pc, il sistema comunicherà che l’indirizzo non è tra quelli
presenti a Milano Bicocca, e lo inviterà ad effettuare un’altra ricerca (fig.16).
Fig.15 – Messaggio errore localizzazione su mobile Fig.16 – Messaggio errore indirizzo su pc

17. 16
La seconda funzione, quella di filtraggio, compare nello sliding che si sovrappone alla mappa del
quartiere (fig.17). I filtri principali (tribù, categorie e orario) compaiono da subito, mentre le
sottocategorie compaiono cliccando su ciascuna delle categorie. La scelta dell’utente è segnalata
dal check che compare sul box corrispondente. Una volta che l’utente ha completato la sua
combinazione di filtri, può cliccare su “Vai!” per vedere i punti di interesse che rispondono a
questi requisiti.
Fig.17 – Sliding filtri scelta utente (un esempio)

18. 17
Il risultato è segnato sulla mappa da un marcatore; cliccando su quest’ultimo, compare un
fumetto contenente le informazioni utili all’utente (nome del luogo, indirizzo, orario, breve
descrizione, stelline di valutazione per il rating, e bottoni social). Inoltre, sulla porzione di sliding
che rimane visibile all’utente, compaiono i filtri scelti nell’ultima ricerca compiuta: in questo modo
non è necessario riaprire ogni volta la finestra dei filtri per vedere dove sono stati posti i check
(Fig. 18).
Fig.18 – Pagina con segnalazione punto d’interesse selezionato

19. 18
5.USABILITÀ
Usability is not a luxury on the Internet.
It is essential to survival: it is the key technique for
superior customer relationships…
… The Internet obeys a kind of
Sheer Design Darwinism: survival of the easiest.
(Jakob Nielsen & Donald Norman)
Il layout è consistente, semplice e diretto. La scelta della pagina unica è, a nostro parere, un punto
di forza che guida l’utente a non avere distrazioni e ha compiere il task con successo nel minor
tempo possibile. I controlli principali, in questo modo, rimangono sempre nello stesso posto: ciò
evita all’utente di doverli cercare di nuovo.
Le voci del filtraggio non sono troppo numerose e permettono al visitatore di avere subito uno
sguardo d’insieme su ciò che offre il sito. L’esplorazione del sito non richiede troppo tempo:
anche se beecocca non rispetta i tratti canonici, i punti con cui interagire sono così evidenti da
non creare problemi all’utente. Per quanto riguarda la visibilità, i testi sono ben leggibili e il font
(pur non essendo tra i canonici) non crea problemi particolari. I colori usati sono abbastanza in
contrasto da facilitare la lettura, senza essere troppo forti alla vista dell’uomo.
6.SCELTE TECNOLOGICHE E D’IMPLEMENTAZIONE
Sin dalla progettazione dei primi due concept è stato evidente che le idee partorite sarebbero
state difficilmente implementabili con le conoscenze da noi apprese durante il Laboratorio di
Comunicazione Visiva. Non volevamo che questo fosse un limite per la nostra creazione e per
questo motivo abbiamo pensato di utilizzare il linguaggio html e lo stile dei css per creare una
“demo” il più possibile fedele a quello che sarebbe il sito compiuto e completo in ogni sua parte.
Nello specifico gli ostacoli riscontrati riguardano in primo luogo la scelta di mettere a disposizione
dell’utente un menù con possibilità di scelta multipla facoltativa incrociata: questo comporta
innumerevoli combinazioni, dai risultati, sulla cartina, diversi. La nostra capacità di creare pagine
statiche non è appropriata. Anche l’uso di jquery ha dimostrato i suoi limiti.
Abbiamo raccolto nel dettaglio le informazioni su ogni luogo, servizio, attività commerciale
presente nella zona bicocca come previsto dai primi due format. Abbiamo riunito tutte queste
informazioni in un documento Excel. Alla fine però, resici conto dell’impossibilità di creare per
pagine statiche tutte le possibili combinazioni selezionabili, abbiamo preferito guidare chi valuterà
il nostro progetto, in un percorso prestabilito che faccia capire come avviene la fruizione del sito.
L’uso aggiuntivo delle API di Google Maps sarebbe stato comodo ma alla luce del primo ostacolo
avrebbe comunque fatto emergere limiti.

20. 19
Essendo un sito sostanzialmente grafico e senza testo ci siamo permessi di usare per il menù e
l’header due font entrambi non browser-safe avvalendoci dei più oculati formati di immagini a
seconda delle esigenze. Elementi con trasparenza totale sono stati convertiti in .gif (qualità
permettendo), quelli con trasparenza parziale come le celle decorative di sfondo sono .png-24 o
.png-8. Per il resto, naturalmente, il formato .jpg non è stato disdegnato. Nessun immagine
comunque ha dimensioni o caratteristiche tecniche tali da rendere difficoltoso il caricamento
anche per le connessioni più lente (delle moderne generazioni di tecnologie informatiche).
Pur essendo un lavoro a carattere esemplificativo è stata nostra premura accertarci che “girasse”
su i principali internet-browser in funzione di una corretta visualizzazione e valutazione.
Non abbiamo ritenuto necessario utilizzare meccanismi di interazione con l’interfaccia come il
“mouse over”. Abbiamo puntato sullo studio di icone riconoscibili chiaramente come tasti
cliccabili così evitando anche discrepanze con l’interazione tramite sistemi “touch” (il ristretto
numero di pulsanti è una delle tecniche adottate).
Si può facilmente notare come ogni pagina html contenga anche un proprio foglio di stile. Questa
scelta non sarebbe MAI stata presa in considerazione per la creazione di un reale sito (come
dimostrato dai nostri lavori per il laboratorio del primo semestre). Nella fattispecie però, visto il
“particolare” e anomalo utilizzo del linguaggio html, abbiamo pensato che fosse meglio
caratterizzare al meglio ogni singola pagina per poter controllare ogni evento simulato possibile.
Il solo reale inconveniente della fruizione del lavoro da noi presentato è che ad ogni “click”
corrisponde un refresh dell’intera pagina (il che rimanda sempre all’header). Naturalmente, come
già detto, connaturata nel nostro progetto è l’esistenza di una sola pagina che si modifica nelle
sue componenti.
6.1 Istruzioni per la navigazione
Il lavoro finale è navigabile nelle sue funzioni principali. Per una completa comprensione dello
strumento si consiglia di seguire poche semplici guide alla navigazione:
Come visto prima, sin dalla pagina index è possibile scegliere se cominciare le proprie ricerche
dalla localizzazione di sé o di un determinato luogo, oppure concentrarsi in prima istanza sul
filtraggio delle informazioni che si vogliono ottenere. L’interfaccia suggerisce immediatamente
due grandi tasti e la linguetta di una tendina chiusa. Il tasto di sinistra richiama con la sua icona un
device mobile, il tasto a destra un device fisso. Abbiamo utilizzato questa differenziazione poiché
tendenzialmente chi naviga in internet da mobile ha una connessione ad abbonamento e quindi
può usufruire della rete ovunque ci sia il segnale del proprio operatore telefonico. Chi invece chi
usa un “fisso” difficilmente possiede la tecnologia di geo-localizzazione, per altro nella fattispecie
poco utile. In questo modo cliccando o “tappando” il primo tasto si avrà un’immediata geo-
localizzazione sulla cartina sottostante. Facendo lo stesso sul secondo si avrà la possibilità di
digitare il nome di una via o di un posto che, come per Google-Maps deve essere registrato nel
database. Naturalmente è possibile selezionare manualmente una via con il sistema mobile o geo-
localizzarsi pur utilizzando un device fisso (con le relative icone che appaiono nelle rispettive barre
di ricerca). Questa parte del sito è liberamente navigabile (non sarà possibile compilare i campi di
ricerca).

21. 20
Passiamo ora alla parte “guidata”.
Cliccando sulla linguetta posta sopra la mappa è possibile visualizzare la tendina dei filtri. Di questi
solo alcuni sono stati resi cliccabili nella nostra dimostrazione.
Per quanto riguarda il filtraggio TRIBU’ cliccare su STUDENTI.
Tra le categorie abbiamo deciso di rendere selezionabile la check-box del TEMPO-LIBERO. Avendo
riassunto ogni possibile servizio, luogo o attività commerciale del quartiere in quattro categorie è
stato necessario far apparire una lista di sottocategorie dal momento in cui si clicca su una delle
macro-categorie.
Selezionare la sotto-categoria TEATRI.
Non resta che scegliere la fascia oraria. Nel nostro esempio il MATTINO.
Cliccando sul tasto “VAI!” la tendina si ritirerà lasciando spazio alla cartina del quartiere con
l’indicatore della richiesta fatta: in questo caso, dal nostro database, verrà evidenziato il TEATRO
DEGLI ARCIMBOLDI. L’indicatore, cliccato, offre un riquadro contenente svariate informazioni e
link, come quello del sito del teatro e dei suoi principali canali social.
(Si ricorda che, secondo il concept di progetto, è possibile anche cliccare più campi per filtri.)
7.“A PORTATA DI CLICK E A PORTATA DI TOUCH”
Now.
Content becomes the button.
Click becomes touch.
Il sito beecocca risponde perfettamente alla richiesta di realizzazione di un sistema informativo
ibrido: è fruibile in modalità on-line da postazione fissa, ma è altrettanto adeguato alla fruizione
su device mobili in modalità landscape e portrait.
Fig.19 – beecocca su Galaxy, iPhone e iPad

22. 21
ALLEGATI
1_concept a – mappa concettuale

23. 22
2_concept a – wireframe homepage

24. 23
3_concept a – wireframe pagina-tipo

25. 24
4_concept b – mappa concettuale

26. 25
5_concept b – wireframe pagina-tipo

27. 26
6_concept c – mappa concettuale

28. 27
7_concept c – wireframe pagina-tipo

29. 28
8_Punti d’interesse (tabella dati)

30. 29

31. 30

32. 31