Documentazione Passenger Bicocca

  • View
    216

  • Download
    3

Embed Size (px)

DESCRIPTION

Documentazione relativa a tutta la fase progettuale del sito Passenger Bicocca, realizzato per il corso di Comunicazione Visiva e design delle Interfacce

Transcript

  • Comunicazione visiva e design delle interfacce

    Elena Arena matricola 732831

    Andrea Bene matricola 731338

    Michela Cairo matricola 733685

  • INDICE

    1 INTRODUZIONE ..............................................................................1

    2 BENCHMARK ...................................................................................2

    3 STEREOTIPIZZAZIONE DEGLI UTENTI ................................................5

    3.1 Studenti ..............................................................................6

    3.2 Lavoratori ............................................................................6

    3.3 Residenti..............................................................................6

    3.4 Occasionali...........................................................................7

    3.5 Moodboard...........................................................................7

    4 WIREFRAME....................................................................................9

    4.1 Primo prototipo.....................................................................10

    4.2 Secondo prototipo ................................................................19

    5 INTERFACCIA GRAFICA ....................................................................26

    5.1 Colore e scelte comunicative...................................................32

    5.2 Scelta dei caratteri.................................................................33

    6 SCELTE E TECNOLOGIE DI IMPLEMENTAZIONE ....................................35

    ALLEGATI .........................................................................................36

  • 1.INTRODUZIONE

    Il progetto PassengerBicocca.it nasce come un esperimento di interazione che prova a mettere vicini dei luoghi fisicamente anche molto distanti, preferendo ad una gerarchia di contenuti spaziale una puramente legata alle preferenze ed agli interessi del target. Ogni soggetto si identifica con una particolare categoria di utente ed in base a questa viene guidato e seguito nel soddisfacimento delle sue esigenze. Linterfaccia grafica suggerisce unambientazione sub-urbana, ed i menu di navigazione riprendono lo stile tipico delle mappe che si trovano nelle stazioni ferroviarie e metropolitane.

    Il primo vantaggio di questa strategia che i contenuti sono distribuiti lungo delle Linee che partono dallutente, percorrono la mappa seguendo un percorso, non casuale, dove ogni fermata corrisponde ad una categoria di informazioni. La mappa rappresenta il cuore del sito, il punto di partenza per ogni ricerca. Abbiamo immaginato che ogni soggetto fosse accompagnato nella navigazione da colori e percorsi preferenziali che rendano linterazione pi comoda e coerente, diventando cos un Passenger con il massimo dei comforts. Ogni percorso, ogni contenuto ed ogni consiglio sono pensati per quella particolare trib in modo da creare il percorso pi breve per raggiungere linformazione desiderata.

    Il secondo vantaggio, quello sul quale abbiamo concentrato tutta la nostra attenzione, quello di semplificare la ricerca alutente, sia in termini temporali che visivi, il quale non deve porsi il problema di trovare la categoria giusta; una volta scelta la trib il percorso gli consiglier da dove iniziare a cercare. La fermata pi vicina sar quella che ha pi probabilit di soddisfare la sua richiesta, mentre le fermate in grigio sono state ritenute non pertinenti (non per lutente, ma per la trib!) e contengono informazioni sintetiche. Se lutente vuole accedere ad informazioni pi dettagliate su quellargomento/categoria evidentemente dovr cambiare trib/linea della metro.

    1

  • 2.BENCHMARK

    Il nostro primo approccio consistito nellelaborare una serie di interfacce onepage site (come richiesto dal brief) che potessero svolgere al meglio il compito di contenere informazioni strutturate per trib. La prima proposta consisteva in un sito con una griglia grafica istituzionale e con un menu di navigazione organizzato per corsie, dove ogni corsia apparteneva ad una trib. Abbiamo comunque subito abbandonato lidea dello scrolling appena ci siamo confrontati con la mole di contenuti che il nostro sito avrebbe dovuto ospitare.

    Riportiamo alcuni siti che ci hanno aiutato negli spunti grafici:

    http://www.pikaboo.be/#overlay_news

    http://www.metadesign.ch/html/de/index.html

    http://www.nathan.com/thoughts/index.html

    http://www.rocksteadyrootsofreggae.com/english/rocksteady.html

    http://www.mediaflash.ca/portfolio/james_taylor.html

    Nel frattempo per riflettevamo su come realizzare uninterfaccia che potesse essere allo stesso momento intuitiva, comunicativa e cool. La maggior parte dei siti che abbiamo trovato utilizzava un sistema di scroll automatico della pagina che abbiamo ritenuto molto accattivante in contesti con ridotta quantit di contenuti come siti personali o di presentazione professionale. Con una ricca quantit di contenuti, invece, risultava un effetto particolarmente fastidioso ai fini della navigazione. Abbiamo poi trovato questo sito: http://cpeople.ru/#portfolio-web. Molto accattivante, non eccessivamente scarno di contenuti e con una navigazione rapida e piacevole.

    Da qui ci siamo mossi verso la prima proposta e stesura del primo prototipo (vedi 4.1).

    Abbiamo iniziato a ragionare in funzione del menu di navigazione: doveva essere esteso, accessibile a tutti gli utenti a prescindere dalla loro trib, ma doveva allo stesso tempo essere evidente ci che era specifico per una trib e cosa no.

    2

  • Volevamo accompagnare lutente alla scoperta del quartiere Bicocca, guidandolo verso un percorso consigliato, ma non per questo limitante e restrittivo. Volevamo insomma consigliare al nostro utente ci che con maggior probabilit sarebbe stato nei suoi interessi, ma senza negargli lopportunit di accedere agevolmente a qualsiasi categoria di informazioni del sito, senza per questo dover necessariamente identificarsi in unaltra trib.

    Cos venuta fuori lidea di una mappa concettuale che assumesse forme e colori diversi, generando dei percorsi costruiti secondo le esigenze dei membri delle diverse trib (vedi 4.2). Lidea grafica prende le sue prime mosse grazie ad un sito portfolio molto particolare che contiene le illustrazioni create da un artista che trova ispirazione nelle espressioni dei passeggeri delle diverse metropolitane del mondo:

    http://www.subway-life.com/

    In questo esempio gli incroci delle linee rappresentano le citt visitate dallartista, e cliccando su uno di questi nodi si attiva una navigazione basata su un effetto zoom sulla mappa. Le informazioni relative allartista, ai supporters, cos come la sezione contatti, sono posizionate nelle zone periferiche della mappa virtuale. E non certo un caso se la citt natale dellartista, Lisbona, si trova invece al centro.

    Il fascino della mappa, la grafica minimalista, lefficacia comunicativa di percorsi colorati, il paradosso di una metro virtuale in sostituzione di una metro reale, inesistente, hanno fatto s che questa divenisse lIdea su cui lavorare.

    Molti punti per rimanevano in sospeso:

    Come organizzare le trib?

    Come gestire graficamente e concettualmente il menu di navigazione? Ed i contenuti?

    Realizzare una mappa che riprendesse geograficamente i punti di interesse delle diverse trib ci subito sembrata unidea troppo scontata ed inutile: se qualcuno vuole sapere dov un bar va sul sito del bar (o pi semplicemente ricerca su Google bar bicocca) che magari sfrutta gi un mashup con googleMaps. Sfruttare invece uno spazio totalmente virtuale, dove i punti di interesse sono disposti a seconda di un coefficiente di importanza assegnato dalle diverse trib tutta unaltra cosa!

    Tuttavia per la realizzazione della mappa avevamo bisogno di un numero sterminato di mappe vere dalle quali estrarre quante pi informazioni grafiche possibili, ne riportiamo alcuni esempi:

    http://www.visualcomplexity.com/vc/

    http://informationarchitects.jp/ia-trendmap-2007v2/

    Per quanto riguarda i contenuti abbiamo attinto a piene mani dal sito MyBicocca.It, che stato molto utile per dimensionare la mole di dati che linterfaccia avrebbe dovuto visualizzare.

    3

  • Per completezza riportiamo anche una serie di strumenti che ci hanno aiutato nelle diverse fasi di realizzazione e ricerca:

    Realizzazione di mockup veloci e portabili: http://www.balsamiq.com/;

    Wireframes e flowchart: http://www.axure.com/, http://www.lovelycharts.com/

    Ispirazioni e ricerche sui font: http://www.fridayfonts.com/, http://www.fonttester.com/, http://www.ms-studio.com/FontSales/mostra.html, http://www.alistapart.com/;

    Ispirazioni per le trib: http://designerscouch.org/show_news/873/the-elemental-self-portraits-of-levi-van-veluw.html;

    Codifica dei colori: http://www.colourlovers.com/blog/2010/01/18/color-identifying-system-for-the-color-blind

    Ispirazioni grafiche ad alto grado di interazione: http://www.datadreamer.com/2daudio/projecttwo.html, http://www.inudge.net/index.en.html, http://www.infinitewheel.com/infinite_wheel.html, http://www.victortaba.com/;

    Cromoterapia e colorwheels: http://www.disinformazione.it/cromoterapia.htm, http://www.paper-leaf.com/blog/wp-content/uploads/2010/01/ColorTheory_Screen_White.jpg, http://www.colorjack.com/sphere/;

    Contenuti: http://www.niguardaonline.com/, http://www.mybicocca.it/categorie.html;

    4

  • 3.STEREOTIPIZZAZIONE DEGLI UTENTI

    Lo studio sullinterazione partito da una considerazione iniziale che ha modellato lintero progetto in ogni sua fase: il quartiere B