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

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)

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.

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

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

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

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)

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

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.

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ù.

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.

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)

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)

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

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

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

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)

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

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.

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).

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

21

ALLEGATI

1_concept a – mappa concettuale

22

2_concept a – wireframe homepage

23

3_concept a – wireframe pagina-tipo

24

4_concept b – mappa concettuale

25

5_concept b – wireframe pagina-tipo

26

6_concept c – mappa concettuale

27

7_concept c – wireframe pagina-tipo

28

8_Punti d’interesse (tabella dati)

29

30

31