Your SlideShare is downloading. ×
Relazione finale Bee_cocca
Relazione finale Bee_cocca
Relazione finale Bee_cocca
Relazione finale Bee_cocca
Relazione finale Bee_cocca
Relazione finale Bee_cocca
Relazione finale Bee_cocca
Relazione finale Bee_cocca
Relazione finale Bee_cocca
Relazione finale Bee_cocca
Relazione finale Bee_cocca
Relazione finale Bee_cocca
Relazione finale Bee_cocca
Relazione finale Bee_cocca
Relazione finale Bee_cocca
Relazione finale Bee_cocca
Relazione finale Bee_cocca
Relazione finale Bee_cocca
Relazione finale Bee_cocca
Relazione finale Bee_cocca
Relazione finale Bee_cocca
Relazione finale Bee_cocca
Relazione finale Bee_cocca
Relazione finale Bee_cocca
Relazione finale Bee_cocca
Relazione finale Bee_cocca
Relazione finale Bee_cocca
Relazione finale Bee_cocca
Relazione finale Bee_cocca
Relazione finale Bee_cocca
Relazione finale Bee_cocca
Relazione finale Bee_cocca
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Relazione finale Bee_cocca

369

Published on

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 …

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.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
369
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
10
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Università degli Studi di Milano BicoccaCorso di Laurea Magistrale in Teoria e Tecnologia della comunicazioneCorso di Comunicazione visiva e design delle interfacceProff. Letizia Bollini & Riccardo CovaRelazione finale del progetto d’esame“Milano Bicocca: l’isola urbana.Territori urbani. Territori sociali. Territori digitali.”(Gruppo 6)Gennari Valeriamatr. 758677v.gennari@campus.unimib.itSalvaggio Morganmatr. 711214m.salvaggio3@campus.unimib.itTroni Ilariamatr. 744826ilaria.troni88@gmail.com
  • 2. INDICE1. PRIME PROPOSTE __________________________________________ p. 21.1 Concept e wireframeConcept A (mappa concettuale e wireframe)Concept B (mappa concettuale e wireframe)Concept C (mappa concettuale e wireframe)2. ARCHITETTURA DEI CONTENUTI di BEECOCCA __________________ p.72.1 Obiettivi2.2 Analisi benchmark2.3 Geolocalizzazione2.4 Sistema di filtraggioTribùCategorieOrariPunti d’interesseBottoni social3. ORGANIZZAZIONE E ARCHITETTURA DELL’INTERFACCIA ________ p.103.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.134.1 Il tema4.2 Il layout5. USABILITÀ ________________________________________________ p.185.1 User Persona & User Scenario6. SCELTE TECNOLOGICHE E D’IMPLEMENTAZIONE _______________ p.187. ”A PORTATA DI CLICK E A PORTATA DI TOUCH” _________________ p.20Allegati ______________________________________________________ p.211_concept a – mappa concettuale2_concept a – wireframe homepage3_concept a – wireframe pagina-tipo4_concept b – mappa concettuale5_concept b – wireframe pagina-tipo6_concept c – mappa concettuale7_concept c – wireframe pagina-tipo8_Punti d’interesse (tabella dati)
  • 3. 21. PRIME PROPOSTEMassimizzare la quantità e qualitàdell’informazione eminimizzare il costo e lo sforzo per trovarla.Il quartiere Bicocca non è tra i luoghi fisici e digitali più ricercati di Milano: non è frequentato pergrandi 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 leprime fasi di progettazione sono state dedicate alla individuazione di concept che megliointerpretassero le esigenze del nostro ipotetico target. Dall’analisi iniziale fatta sui siti esistentiche trattano del quartiere Bicocca, abbiamo notato che le componenti dinamiche di news eaggiornamenti non sono molto rilevanti (probabilmente perché il quartiere non è particolarmenteattivo se non nei pochi periodi, e ben definiti, di alcune festività). Per questo abbiamo deciso didare 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 ideatidue primi concept che rispecchiano il più possibile quanto detto. In seguito a numerose riflessionisulle criticità di questi ultimi, abbiamo elaborato un terzo concept, punto di incontro delle miglioriidee venuteci. Nei paragrafi che seguono descriveremo quali processi ci hanno portato alla sceltadel sito sviluppato per il progetto.1.1 Concept e wireframeCONCEPT AMappa concettualeLa prima proposta mira a creare uno spazio digitale che rispecchi i punti di interesse utili all’utenteche si muove nello spazio fisico del quartiere. Partendo da un filtraggio per tribù, gli snodiprincipali della nostra mappa concettuale sono: servizi, risto, tempo libero e negozi. Ognuno diquesti filtri, essendo una macro area, viene poi diviso in sottocategorie per rendere più agevole laricerca dell’utente: tra i servizi abbiamo inserito trasporti, banche, poste, commissariati, scuole echiese; la categoria risto è stata suddivisa a seconda dell’orario in cui gli utenti potevano usufruiredei locali (colazione, pranzo, aperitivo, cena after, all day long); all’interno dell’area tempo liberoabbiamo incluso teatri, cinema, mostre, sport e parchi; ed infine sotto la voce negozi sono statiinseriti supermercati, shopping, librerie e farmacie. Ogni sottocategoria raccoglie i punti diinteresse con le relative informazioni (sito web, localizzazione mediante Google Maps, orari diesercizio, bottoni social per la condivisione tra utenti in rete e uno spazio disponibile per icommenti). È un diagramma ad albero semplice e pulito che organizza categorie e sottocategoriein modo gerarchico: l’utente, in pochi passaggi, riesce a raggiungere le informazioni utili. Qui siseguito una “vista dall’alto” del concept a nel suo complesso, per i dettagli, si rimanda all’Allegaton°1.
  • 4. 3WireframeLa 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ù diuna 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 (Allegaton°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 conannessa mappa di Google.Fig. 2 - Wireframe Homepage concept aFig. 1 - Mappa concettuale concept a
  • 5. 4CONCEPT BMappa concettualeIl secondo concept (Fig.4) mostra dinamiche differenti e, a nostro parere, più accattivanti. I filtrisono il nucleo del funzionamento del sito web: grazie a questa funzione, l’utente arriva alla mappae 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 primoconcept),- 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 dellaTrivulziana; >>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 medianteGoogle Maps, orari di esercizio, bottoni social per la condivisione tra utenti in rete e uno spaziodisponibile per i commenti.Fig. 3 - Wireframe Pagina_tipo concept aFig.4 – Mappa concettuale concept b
  • 6. 5WireframeLa mappa concettuale si concretizza in un sito web che, questa volta, vede la mappa comeelemento dominante sulla scena (Allegato n°5). Il nome del sito e il pay-off occupano unaposizione centrale; lateralmente vengono posti i bottoni dei filtri che si trasformano nell’elencodelle voci selezionabili, con un click del mouse (o con un semplice tap su schermo touch). Il puntod’interesse viene individuato dal classico marcatore di Google Maps e le informazioni sonovisualizzabili in un fumetto.CONCEPT CMappa concettualeLa terza proposta nasce dalla rivisitazione del concept b: per arrivare al risultato, l’utente ha adisposizione 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 ilraggiungimento del goal da parte dell’utente: le zone da noi definite non sono abitualmente usateper 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 deiquestionari, le esigenze del personale universitario, dei colletti bianchi e degli addetti ai servizi siassomigliano 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 dadevice mobile.Fig.5 – Wireframe Pagina_tipo concept b
  • 7. 6WireframeIl 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 è statostravolto; in una delle due proposte, la geolocalizzazione precede d’importanza la mappa e ilmenù diventa a scomparsa. Vedremo meglio dei paragrafi che seguono i dettagli di questemodifiche che costituiscono le peculiarità del sito beecocca.Fig. 6 – Mappa concettuale concept cFig. 7 – Wireframe Pagina_tipo concept c (prima versione)
  • 8. 72.ARCHITETTURA DEI CONTENUTITrovare l’informazione è il primo passoper prendere una decisione.Scegliere è il secondo.L’architettura dell’informazione dovrebbeaiutarci non solo a trovare qualcosama anche a fare la scelta giusta.Lo sviluppo del progetto in questione è sempre stato caratterizzato dalla consapevolezza di doveroffrire all’utente finale un buon prodotto di interaction design: abbiamo cercato di rendere il sitofruibile e usabile, pensando a come potessero meglio incontrarsi le tre componenti chiave delterritorio 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 farlodiventare territorio digitale, non è stato semplice. Categorizzare il contesto per arrivare aicontenuti 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 questeidee nelle mappe concettuale prima descritte.Fig. 8 – “Territorio – centered” design
  • 9. 8L’analisi delle categorie da inserire ha richiesto ricerca, analisi e catalogazioni dei punti diinteresse utili all’utente: non abbiamo presentato uno massa disorganizzata di dati, ma abbiamcercato 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 daresostanza ai concept descritti in precedenza.2.1 ObiettiviPrima di sviluppare questo progetto, abbiamo riflettuto sugli utenti e le attività che avrebberopotuto svolgere grazie a questo strumento. Le tribù che ci sono state assegnate hannosicuramente obiettivi diversi, motivazioni razionali ed emotive differenti per usufruire delquartiere secondo percorsi alternativi tra loro. “Date all’utente quello che cerca esattamentequando lo cerca.. non c’è niente di più gratificante”; il nostro sito cerca di dare risposta a questaesigenza attraverso due funzioni fondamentali: la geolocalizzazione e i filtri (si vedano a propositoi paragrafi 2.3 e 2.4 ). Entrambe ci permettono di mettere in pratica questo principio, tantosemplice quanto veritiero!2.2 Analisi benchmarkAlcuni 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 sitosemplice, immediato e altamente fruibile, che mette la localizzazione alla base del propriofunzionamento; allo stesso modo, in beecocca i bottoni per la geolocalizzazione sono i primi che sipresentano all’utente per iniziare ad usare il sito.Inoltre, dal sito web www.wikihood.com/web, abbiamo preso spunto per integrare al classicofumetto di Google Maps, una breve descrizione del punto d’interesse selezionato dall’utente e ilprincipio 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 dellacapitale 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 aLondra.A differenza di http://www.mybicocca.it/, invece, abbiamo preferito evitare il lungo elenco dicategorie in ordine alfabetico che renderebbero la ricerca dell’utente più in stile “pagine gialle” emeno immediata. Inoltre non è caratterizzato da molti modelli di interazione; è un sitoinformativo a una sola direzione sito  utente.1Al 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é fossecomprensibile il progetto realizzato.
  • 10. 92.3 GeolocalizzazioneLa prima funzione a disposizione dell’utente è la geolocalizzazione, attivabile sia da device mobileche fisso. C’è sia la localizzazione automatica del dispositivo, sia la possibilità di inserire l’indirizzoo il luogo a cui si vuole arrivare. I dettagli verranno meglio spiegati nel paragrafo 4.2 alla voceLayout.2.4 Sistemi di filtraggioCome 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 propriaricerca 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 primodei tre filtri a disposizione dell’utente per effettuare una scrematura tra tutti i punti di interesseindividuabili 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 trovaredifficoltà. 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 quartiereBicocca non c’è un’utenza così particolareggiata da dover ampliare questo tipo di filtro.CATEGORIEIl secondo filtro è forse quello più importante. Abbiamo già spiegato il perché della scelta fatta percategorie di macro aree con un solo sottolivello, piuttosto che l’organizzazione dei contenuti inordine alfabetico: abbiamo optato per un sistema di tipo ambiguo, ossia evitare di moltiplicareall’infinito la suddivisione in sottocategorie delle informazioni a favore di una più semplicedivisione per macro aree, appunto. Secondo questa scelta, abbiamo pensato alle seguentietichette di categoria: servizi, risto, tempo libero e negozi. Ognuna di loro presentarispettivamente 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 suddivisionebar, 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.ORARILa terza modalità di filtraggio è stata elaborata in funzione degli orari di utilizzo del quartiereBicocca: 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 studentie un lavoratori frequenteranno il quartiere nelle prime tre fasce orarie, mentre un city userpotrebbe usufruire del quartiere nelle ore diurne se interessato al Bicocca Village o al CentroSarca, oppure nelle ore serali per il teatri, i cinema e qualche locale. I residenti spesso sono fuoriper lavoro tutto il giorno, ma vivono di più la categoria dei negozi rispetto alle altre tribù.
  • 11. 10PUNTI D’INTERESSEI punti ritenuti “d’interesse” all’interno del quartiere e i confini del quartiere Bicocca sono statiindividuati anche con l’aiuto delle mappe disegnate dai nostri intervistati. Ne è emerso undocumento di Excel (si veda l’Allegato n° 8) con l’elenco dei punti di interesse, e le voci dei filtri acui corrispondono; per di più, per agevolare il lavoro di creazione del fumetto con le informazioniinerenti al luogo, sono state compilate anche le celle con breve descrizione del servizio, indirizzo,orari e presenza del sito web.BOTTONI SOCIALNella versione definitiva di beecocca, la parte social è direttamente collegata a ciascun puntod’interesse che compare sulla mappa del quartiere. Nel fumetto con le informazioni utili alvisitatore 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’INTERFACCIAGli utenti voglionoapplicazioni e siti familiari,graficamente appagantie facili da usare.Il wireframe del concept c (si veda Allegato n°7) è stato ulteriormente modificato in corsod’opera. Vi mostriamo di seguito le due proposte grafiche e di layout intermedie da cui è nata laversione finale di beecocca.
  • 12. 113.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 alparagrafo 4.1. Il nome del sito e il pay-off esplicativo occupano uno spazio significativo nellapagina: la scelta è dovuta al fatto che questo è l’unico dettaglio grafico particolarmente incisivoall’interno di tutto il sito. Una striscia intermedia è dedicata alla geolocalizzazione e alla funzionedi richiesta delle indicazioni stradali.Il resto del sito si divide in due parti: una buona porzione è lasciata alla mappa, mentre a sinistratroviamo i filtri di tribù, categoria e orario.Sottostanti la mappa, erano stati posti i bottoni social, poi inseriti nel fumetto che descrive neldettaglio ciascun punto di interesse.Fig.9 – Interfaccia beecocca (prima versione)
  • 13. 123.2 bicoccartina – Check your choice!In questo caso, l’interfaccia è ancora più minimalista e pulita, ma il nome del sito e il pay-offoccupano ugualmente una posizione centrale e di discreta grandezza. La funzione digeolocalizzazione rimane invariata rispetto a quella di beecocca e la mappa del quartiereguadagna 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. 134.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 dibicoccartina.4.1 Il temaIl tema scelto è giocoso, presenta colori delicati e riesce ad essere minimale senza caderenell’anonimato. La scelta dell’ape come fil rouge del concept grafico ci è parsa un’ottimasoluzione per invogliare l’utente a “curiosare per il quartiere”. A partire dal gioco di parole delnome (“bee” in inglese significa “ape” e si legge “bi”) il sito, in questo modo, gode di una forteidentità senza perdere di credibilità: l’alta fruibilità del sito e l’immediatezza con cui si presentaall’utente, fa capire a quest’ultimo che non è un sito-giocattolo e che nonostante il caratterebambinesco, il concept a supporto del funzionamento arriva dritto al punto.Fig.12 – Homepage beecocca
  • 15. 144.2 Il layoutI bottoni per la geolocalizzazione presentano la classica forma a esagono della cella d’api edifferenziano in percorso dell’utente a seconda che stia usufruendo del sito tramite device mobileo fisso. Se siamo su device mobile, la geolocalizzazione avviene semplicemente schiacciando ilbottone e la posizione comparirà nella prima stringa; altrimenti è possibile fare una ricerca diluogo inserendo l’indirizzo e cliccando sulla lente d’ingrandimento. Se l’utente visita il sito da pcdovrà inserire l’indirizzo nella prima stringa e cliccare sul tasto “bzz!” per avviare la ricerca e farcomparire il marcatore di posizione sulla mappa.L’utente può anche vedere sulla mappa il percorso da fare per spostarsi da un punto A ad unpunto B, semplicemente inserendo gli indirizzi di partenza e arrivo nelle stringhe che compaionouna volta cliccato su indicazioni stradali.Fig.13 - Localizzazione da device mobile Fig.14 – Localizzazione su device fisso
  • 16. 15Nel caso in cui l’utente si geolocalizzi su mobile, ma non si trovi nel quartiere Bicocca, l’apericorderà 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 quellipresenti 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. 16La seconda funzione, quella di filtraggio, compare nello sliding che si sovrappone alla mappa delquartiere (fig.17). I filtri principali (tribù, categorie e orario) compaiono da subito, mentre lesottocategorie compaiono cliccando su ciascuna delle categorie. La scelta dell’utente è segnalatadal check che compare sul box corrispondente. Una volta che l’utente ha completato la suacombinazione di filtri, può cliccare su “Vai!” per vedere i punti di interesse che rispondono aquesti requisiti.Fig.17 – Sliding filtri scelta utente (un esempio)
  • 18. 17Il risultato è segnato sulla mappa da un marcatore; cliccando su quest’ultimo, compare unfumetto contenente le informazioni utili all’utente (nome del luogo, indirizzo, orario, brevedescrizione, stelline di valutazione per il rating, e bottoni social). Inoltre, sulla porzione di slidingche rimane visibile all’utente, compaiono i filtri scelti nell’ultima ricerca compiuta: in questo modonon è 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. 185.USABILITÀUsability is not a luxury on the Internet.It is essential to survival: it is the key technique forsuperior customer relationships…… The Internet obeys a kind ofSheer 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 puntodi forza che guida l’utente a non avere distrazioni e ha compiere il task con successo nel minortempo 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 unosguardo 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 danon 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 incontrasto da facilitare la lettura, senza essere troppo forti alla vista dell’uomo.6.SCELTE TECNOLOGICHE E D’IMPLEMENTAZIONESin dalla progettazione dei primi due concept è stato evidente che le idee partorite sarebberostate difficilmente implementabili con le conoscenze da noi apprese durante il Laboratorio diComunicazione Visiva. Non volevamo che questo fosse un limite per la nostra creazione e perquesto 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 disposizionedell’utente un menù con possibilità di scelta multipla facoltativa incrociata: questo comportainnumerevoli combinazioni, dai risultati, sulla cartina, diversi. La nostra capacità di creare paginestatiche non è appropriata. Anche l’uso di jquery ha dimostrato i suoi limiti.Abbiamo raccolto nel dettaglio le informazioni su ogni luogo, servizio, attività commercialepresente nella zona bicocca come previsto dai primi due format. Abbiamo riunito tutte questeinformazioni in un documento Excel. Alla fine però, resici conto dell’impossibilità di creare perpagine 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 ostacoloavrebbe comunque fatto emergere limiti.
  • 20. 19Essendo un sito sostanzialmente grafico e senza testo ci siamo permessi di usare per il menù el’header due font entrambi non browser-safe avvalendoci dei più oculati formati di immagini aseconda 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 immaginecomunque ha dimensioni o caratteristiche tecniche tali da rendere difficoltoso il caricamentoanche 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 tasticliccabili così evitando anche discrepanze con l’interazione tramite sistemi “touch” (il ristrettonumero di pulsanti è una delle tecniche adottate).Si può facilmente notare come ogni pagina html contenga anche un proprio foglio di stile. Questascelta non sarebbe MAI stata presa in considerazione per la creazione di un reale sito (comedimostrato 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 megliocaratterizzare 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, comegià detto, connaturata nel nostro progetto è l’esistenza di una sola pagina che si modifica nellesue componenti.6.1 Istruzioni per la navigazioneIl lavoro finale è navigabile nelle sue funzioni principali. Per una completa comprensione dellostrumento si consiglia di seguire poche semplici guide alla navigazione:Come visto prima, sin dalla pagina index è possibile scegliere se cominciare le proprie ricerchedalla localizzazione di sé o di un determinato luogo, oppure concentrarsi in prima istanza sulfiltraggio delle informazioni che si vogliono ottenere. L’interfaccia suggerisce immediatamentedue grandi tasti e la linguetta di una tendina chiusa. Il tasto di sinistra richiama con la sua icona undevice 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 quindipuò usufruire della rete ovunque ci sia il segnale del proprio operatore telefonico. Chi invece chiusa un “fisso” difficilmente possiede la tecnologia di geo-localizzazione, per altro nella fattispeciepoco 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à didigitare il nome di una via o di un posto che, come per Google-Maps deve essere registrato neldatabase. 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 barredi ricerca). Questa parte del sito è liberamente navigabile (non sarà possibile compilare i campi diricerca).
  • 21. 20Passiamo ora alla parte “guidata”.Cliccando sulla linguetta posta sopra la mappa è possibile visualizzare la tendina dei filtri. Di questisolo 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. Avendoriassunto 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 dellemacro-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 conl’indicatore della richiesta fatta: in questo caso, dal nostro database, verrà evidenziato il TEATRODEGLI ARCIMBOLDI. L’indicatore, cliccato, offre un riquadro contenente svariate informazioni elink, 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 informativoibrido: è fruibile in modalità on-line da postazione fissa, ma è altrettanto adeguato alla fruizionesu device mobili in modalità landscape e portrait.Fig.19 – beecocca su Galaxy, iPhone e iPad
  • 22. 21ALLEGATI1_concept a – mappa concettuale
  • 23. 222_concept a – wireframe homepage
  • 24. 233_concept a – wireframe pagina-tipo
  • 25. 244_concept b – mappa concettuale
  • 26. 255_concept b – wireframe pagina-tipo
  • 27. 266_concept c – mappa concettuale
  • 28. 277_concept c – wireframe pagina-tipo
  • 29. 288_Punti d’interesse (tabella dati)
  • 30. 29
  • 31. 30
  • 32. 31

×