Relazione progetto comunicazione visiva e design delle interfacce, TTC, Università di Milano Bicocca.

2. 1. Introduzione al progetto
2. Ricerca sulle utenze
3. Architettura delle informazoni
4. Wireframe
5. Grafica
6. Prototipo
INDICE

3. Il progetto BicoccaPoint nasce da un’idea di Alessandro Lagasca, Giacomo Mariani e Roberto Zer-
bo durante il corso di Comunicazione visiva e design delle interfacce, che prevedeva la progetta-
zione di un aggregatore di informazioni, fruibile da più categorie di persone, che permettesse di
ricevere informazioni sul quartiere bicocca.
Il progetto prevedeva la presa in considerazione di quattro categorie di persone (definite “Tribù”),
che nell’arco del giorno usufruissero, in modalità ed orari differenti, lo spazio urbano, funzionale e
sociale del quartiere.
L’aggregatore doveva soddisfare le specifiche esigenze delle diverse tribù in un’ottica di
mobilità e di geo-localizzazione.
1. Introduzione

4. 2. Ricerca sulle utenze
La realizzazione di un sistema come BicoccaPoint, poneva ovviamente il problema di fornire infor-
mazioni adeguate alla categoria (o tribù) di appartenenza, creando un’esperienza ad-hoc per il tipo
di utente.
Naturalmente non potevamo conoscere tutte le esigenze di ogni tipologia di utente, quindi abbiamo
optato per delle interviste semi-strutturate.
Le tribù e le persone intervistate erano:
- Universitari: (studenti, docenti e personale dell’università Bicocca);
- City User: (spettatori in uscita dal teatro Arcimboldi e dall’Uci Cinemas);
- Lavoratori: (impiegati in pausa pranzo all’esterno della Deutsche Bank, personale Trenitalia in sta-
zione Greco Pirelli ed alcuni commercianti sul Viale dell’Innovazione);
- Residenti

5. Il nostro BicoccaPoint aveva bisogno di un cuore pulsante, una struttura portante e non poteva che
nascere dalla profonda analisi delle esigenze espresse dagli utenti nelle interviste.
Abbiamo diviso le informazioni provenienti dalla nostra ricerca sul campo in cinque macrocatego-
rie comuni alle quattro tribù (svago, ristorazione, wellness, servizi, trasporti).
Le sottocategorie sono state così organizzate all’interno delle diverse tribù:
3. Architettura delle informazioni

6. 4. Wireframe
Nella fase di realizzazione del wireframe low-fidelity, si è preso in considerazione un concept che si
discostava molto da quello utilizzato per la versione finale del sito.
Questo primo concept era infatti basato principalmente sulla visualizzazione di locali/luoghi con-
traddistinti da immagini, con un menù orrizzontale organizzato su più livelli, risultato poi un po’ trop-
po macchinoso.
Concept 1 - homepage
Concept 1 - homepage Concept 1 - menu
Lo stesso concept era stato adattato per la ver-
sione mobile:

7. Si è deciso di abbandonare il primo concept perché la sua caratteristica principale (puntare sul fatto-
re evocativo dei contenuti) contrastava con la formalità richiesta in un aggregatore di informazioni
che andasse al di là di un elenco fotografico di locali ed eventi serali. Abbiamo così progettato un se-
condo concept:
Concept 2 - homepage Concept 2 - menu

8. La caratteristica principale di questo nuovo concept era la suddivisione del quartiere in aree.
La navigazione del menù vedeva la possibilità di scegliere le categorie (ad esempio ristorazione) per poi potersi soffermare sulle
sottocategorie (ristoranti,pizzerie,fast-food,bar).
Al click sul tasto “mostra selezione”, veniva visualizzata una lista con tutti i locali ordinati per ranking (o vicinanza nel caso si utiliz-
zasse il pulsante per la geolocalizzazione, “la tua posizione”, posto in alto) e la loro presenza all’interno delle aree di appartenenza.
Avvicinando il cursore sulle aree aventi più di un locale , venivano visualizzati i nomi dei locali in essa contenuti. Tale scelta venne
considerata per facilitare una migliore localizzazione dei risultati.
Utilizzando la funzione “cerca nelle vicinanze”, accessibile dalle singole voci in elenco, si otteneva un nuovo risultato in elenco,
secondo un’area delimitata (immagine 2).
Concept 2 - mappa Concept 2 - zoom area

9. La verisone tablet rispecchiava in parte il concept desktop, abbandonando però la mappa in po-
sizione portrait, per dare spazio ad un elenco a tutto schermo, mantenendo invece l’aspetto nella
posizione landscape.

10. Concept 2 - interazioni dalla homepage fino alla funzione nelle vicinanze
Concept 2 landscape - mappa e modalità realtà aumentata
Il secondo concept, nella sua versione mobile , prendeva spunto dal design della versione desktop,
abbandonando la mappa sempre visibile per fare spazio al menù ed alle voci in elenco (visibili a
tutto schermo). Alla visualizzazione dell’elenco dei locali, era possibile accedere nuovamente alla
mappa, ponendo il device in modalità landscape ed in posizione orizzontale, mentre ponendolo in
posizione verticale si accedeva alla modalità realtà aumentata.

11. Il passaggio dal Low all’High fidelity

12. Per la homepage si è deciso di sostituire i tasti rettangolari delle quattro tribù, che avrebbero do-
vuto contenere delle foto evocative, con quattro tasti quadrangolari contenenti delle icone rappre-
sentative, in quanto aventi un riferimento più chiaro e forte nei confronti delle tribù

13. Per la pagina interna di city-user, si è deciso di spostare il box di ricerca in una posizione fissa
dello schermo (in alto a destra), in modo tale da renderla sempre fruibile da parte dell’utente. In
questo modo si è anche alleggerito il menu di ricerca.
Inoltre abbiamo deciso di modificare radicalmente il concetto di “area” inizialmente considerato.

14. Le nuove aree sono state “concettulizzate”: ogni tribù ha delle aree diverse. Nella foto sono attivate tutte le possibili aree per la
tribù city user: come si vede non ci sono aree che racchiudono gli edifici universitari ad esempio.
Queste aree compaiono una volta effettuata la ricerca, e compaiono solo quelle in cui sono effettivamente presenti dei risultati.
Andando in hover su un’area viene mostrata una lente d’ingrandimento su di essa e vengono proposti nella lista solo i risultati
presenti in quell’area; viceversa, andando in hover su un risultato, si illumina l’area in cui è presente tale risultato.
Inoltre, per mantenere una più forte coerenza e integrazione fra i due sistemi (mappa ed elenco), abbiamo aggiunto delle mini-a-
ree in corrispondenza delle diverse voci in elenco, per poterli localizzare immediatamente sulla mappa.

15. La funzione “nelle vicinanze” non ha subito particolari cambiamenti rispetto al low-fi, se non l’ag-
giunta di una miniatura della mappa satellitare per consentire all’utente di tornare allo stato pre-
cedente.

16. Il passaggio da low-fi ad Hi-fi non ha comportato grossi cambiamenti per quanto concerne la
parte Tablet

17. Per il mobile, una delle modifiche più significative è stata la navigazione tra le pagine di una singola voce: inizialmente era
visibile una parte della pagina successiva, per dare l’idea della possibilità di scorrere tramite uno swipe, le varie informazioni
di una voce. Si è deciso di utilizzare un sistema classico di carousel, che consente di sapere quale della quattro pagine si stia
visitando.
Per la modalità Landscape invece, si è abbandonato il passaggio Mappa - Realtà aumentata in base alla posizione del device,
per dare spazio ad una più semplice icona di attivazione/spegnimento.

18. 5. Grafica
Icone
Abbiamo deciso di utilizzare delle icone flat, per mantenere la coerenza con lo stile dato al nostro
sito.

19. Trasporti Ristorazione Servizi Svago Wellness
Colori
Per quanto riguarda le tribù si è scelto di non assegnare dei colori diversificati ma di utilizzare un colore neutro. Stessa scelta
è stata fatta anche per gli elementi grafici/navigazionali del sito, dove è stata utilizzata una scala di grigi.
Discorso diverso va fatto invece per le categorie, dove si è scelto di utilizzare 5 colori rappresentativi che evocassero la ri-
spettiva categoria. Inoltre la differente colorazione delle categorie rende più facile l’identificazione di ciò che è visualizzato
sulla mappa.

20. 6. Prototipo
Per la realizzazione del prototipo abbiamo cercato, compatibilmente con le nostre conoscen-
ze, di rendere l’esperienza di fruizione quanto più possibile fedele all’idea originale.
Per questa fase finale si è scelto di implementare nel prototipo un’ipotetica esperienza d’uso
da parte di un city-user, sviluppando quindi la parte del sito relativa a questa tribù.