-->

Pagine Gialle Visual: flash ed infovis protagonisti

di Daniele Galiffa
Pubblicato il 2 Settembre 2006

Introduzione

Tempo fa ci eravamo lasciati discorrendo dell’utilizzo sempre crescente della tecnologia Adobe Flash come valido supporto alla creazione di soluzioni web di Information Visualization orientate al mercato consumer.

Avevamo inoltre anche visto come l’utilizzo di Flash potesse valorizzare la User Experience all’interno di ambienti e sistemi G.I.S.

I casi studio riportati nei precendenti articoli, però, erano frutto delle capacità di professionisti europei e nordamericani.

Questa volta, invece, ci occuperemo di verificare come, anche in Italia, ci sia l’opportunità di progettare e sviluppare soluzioni di infovis basate su ActionScript.

Da oggi utilizzaremo Flickr come strumento di discussione, condivisione e gestione delle immagini a corredo degli articoli di flashability; ecco quindi dove trovate le immagini dell’articolo

Il contesto

Come si può immaginare dal titolo, il progetto rientra all’interno di quell’ambito di indagine che è la mappatura di metadati su di un territorio geografico.

In questo settore i “competitors” non mancano di certo e ciascuno di essi offre soluzioni differenti nei contenuti e, soprattutto, nella esperienza utente; mi riferisco alle funzioni Ajax utilizzate da servizi quali MSN Local, googleMaps, viaMichelin, Tuttocittà, e alle interessanti GUI basate su ActionScript utilizzabili all’interno di FlashHeart o Yahoo.Maps beta.

Se l’orizzonte internazionale dei servizi web orientati alla rappresentazione geografica di metadati si sta arricchendo ogni giorno di nuovi elementi, è anche vero che in Italia il Content Provider per eccellenza è ancora SEAT Pagine Gialle che, con il suo servizio onLine, non era ancora riuscito a fare il salto di qualità.

Parlo appositamente al passato, perchè lo scorso 23 giugno 2006 SEAT Pagine Gialle ha lanciato un nuovo servizio: Pagine Gialle Visual, di cui ci occuperemo nell’articolo di oggi con l’obiettivo di evidenziare gli aspetti di information visualization ed User Experience che si sono indagati e sviluppati anche con l’utilizzo della tecnologia Adobe ActionScript.

Il progetto

L’obiettivo del progetto, in termini di servizio digitale, è stato quello di permettere all’utente di muoversi agilmente attraverso le complesse ricerche prodotte dal sistema tradizionale.

Si è lavorato molto alla risoluzione di alcuni problemi storici che sono da sempre presenti nella versione tradizionale di pagine gialle:

• Punto1 : La necessità di fare domande precise e, quindi, la frustrazione provata dall’utente ogni qualvolta si trova di fronte a nuovi click o, peggio, di fronte a risultati nulli
• Punto2 : La necessità di rendere migliore la visualizzazione e la navigazione all’interno della mappa
• Punto3 : La necessità di rendere veloci i filtri sui risultati ottenuti

Avendo a disposizione una moltitudine di dati diversi e in quantità molto numerose, si è presentato da subito il problema dell’analisi degli stessi.

Un problema che è stato affrontato attraverso sulla base dei modelli e delle tecniche che, da ormai oltre 10 anni, la disciplina dell’information visualization ha codificato nelle diverse tassonomie.

Il progetto - punto1: le domande dell’utente

Per facilitare il compito all’utente nel porre le domande alle quali si possa dare una risposta, si è dovuti passare per la risoluzione di due gaps.

Il primo, di tipo cognitivo, è legato al fatto che l’utente sappia cosa scrivere nei campi vuoti.
In questo senso, la versione precedente del servizio aveva già indicato una buona strada, descrivendo con precisione quello che era il tipo di contenuto per ciascuno dei campi “COSA” e “DOVE”.

In PagineGialle Visual si è quindi deciso di utilizzare lo stesso approccio.

Il secondo gap, legato alla velocità di utilizzo dello strumento, è quello di poter indicare con precisione un luogo nel quale operare la ricerca.

Con la precendente versione poteva accadere che, prima di visualizzare i risultati sperati, l’utente dovesse incappare in una nuova selezione per definire meglio il luogo della ricerca.

In PagineGialle Visual, questa domanda viene posta contestualmente alla prima richiesta ( riducendo il termine di latenza percepito dall’utente ) proponendo la selezione del luogo da una combobox che appare sotto il campo di input del luogo.

In pratica si è utilizzato il modello del code hinting ( “derivato” dai software di text editing ) in un contesto diverso da quello originario.

Seguendo questo “path esperenziale”, l’utente arriva con un click ( o semplicemente digitando l’invio da tastiera ) ad avere subito una rappresentazione sul territorio di suo interesse di tutti i risultati trovati, che sono anche elencati in una lista contestuale, posta a lato della mappa.

Il progetto - punto2: La necessità di rendere migliore la visualizzazione e la navigazione all’interno della mappa

La versione tradizionale di pagine gialle presenta un sistema di gestione delle mappe che è basato sulla visualizzazione di un’immagine generata di volta in volta dal server sulla base delle richieste di spostamento da parte dell’utente.

Spostamento possibile lungo le quattro diagonali, le quattro direzioni e lungo l’asse della profondità secondo dei livelli di scala predefiniti.

Tale processo presenta i seguenti problemi:

• La generazione e restituzione delle mappe è molto lenta
• Le mappe non presentano interattività al loro interno
• Il “Pan” può avvenire solo nelle 4 direzione e le 4 diagonali
• Non si ha la percezione del contesto

In PagineGialle Visual, si è utilizzato una versione dedicata di Closer ( un prodotto di Metapictures ) che si preoccupa di offrire all’utente un avanzato strumento di visualizzazione e navigazione di mappe, rendendo piacevolissma la User Experience.

Lo strumento è basato sulla tecnologia Adobe Flash ( o meglio, ActionScript, visto che è stato realizzato completamente avvalendosi di strumenti Open Source ) e presenta le seguenti caratteristiche:

• Presenza di un “Navigator” che può essere utilizzato per comprendere il contesto o per eseguire direttamente un “Pan” in maniera più naturale
• Presenza delle transizioni tra livelli differenti di zoom che permettono di ridurre la percezione dei tempi di attesa nel caricamento delle immagini oltre che permettere all’utente di non perdere il legame con il contesto geografico.
• Presenza di un “Pan” manuale all’interno della mappa, oltre ai tradizionali 8 selettori ( Nord, Sud, Est, Ovest + 4 diagonali )
• Mappa con contenuto interattivo
• Visualizzazione della mappa Geografica, Stradale o Mista
• Possibilità di zoom per livelli
• Massimizzazione dell’area disponibile per visualizzare la mappa, con relativo controllo del resize della finestra contenitrice
• Relazione diretta tra i risultati mostrati in lista e la loro rappresentazione e collocazione geografica

Il progetto - punto3: La necessità di rendere veloci i filtri sui risultati ottenuti

Se dal punto di vista della generazione di un’adeguato sistema di mappatura territoriale si è risposto intervendo con l’ausilio di Closer e con la valorizzazione dei processi di riduzione della percezione dell’attessa da parte dell’utente ( si veda uno dei primi articoli di FlashAbility ), dal punto di vista della riduzione del gap cognitivo tra i metadati e l’utente si è dovuto percorrere un cammino progettaule leggermente diverso.

Difatti, attraverso la tecnica delle “dynamic queries” ( frutto del lavoro dei ricercatori del dipartimento HCI dell’Università del Maryland diretto da Shneiderman ) si è riusciti a relazionare la rappresentazione dei dati sul territorio con quella che è l’interesse sugli stessi espresso dall’utente.

In termini di information visualizazion con “Dynamic querying” si identifica la tecnica con la quale si mette in condizione l’utente di porre delle domande che abbiano un esito non nullo attraverso l’adozione di controlli di interfaccia che “impediscano” di commettere errori di input.

Per meglio chiarire questo aspetto ricorreremo ad un semplice esempio.

Si supponga di scegliere “pizza” a “milano”.

Chiaramente una richiesta di questo tipo produce moltissimi risultati che vanno oltre il numero di 200 unità, definito come valore massimo accettabile sulla base delle perfomances e dell’usabilità delle informazioni.

Per permettere all’utente di muoversi agevolmente tra tutti e 200 i risultati trovati, è stata progettata una “SMART LIST” che, posta a lato ( e “sopra” ) della mappa geografica, consente di definire l’intervallo dei metadati sui quali concentrarsi.

La definizione di questo intervallo è delagata all’utilizzo di uno “slider” dagli estremi editabili e dei pulsanti di avanti / indietro.

Con questa soluzione si è anche risolto l’annoso problema che affliggeva la precedente versione di pagine gialle, in cui tutti i risultati erano listati in basso e non era quindi possibile individuare facilmente gli stessi sulla mappa.

Considerazioni tecniche

Pagine Gialle Visual è stato quindi un progetto che ha dato un nuovo contributo all’evoluzione delle tecniche di infovis attraverso la tecnologia Adobe Flash.

A tal proposito è utile ricordare come la tecnologia sia stata sviluppata interamente attraverso gli strumenti di authoring OpenSource ( Eclipse, Mtasc, Ant, ASDT ) il cui utilizzo, ormai, sta diffondendosi molto tra i FlashDevelopers anche grazie al contributo di una comunità ( osflash ) che da oltre un anno supporta tutti i progetti openSource attorno alla tecnologia Flash.

L’utilizzo dei prodotti openSource dedicati allo sviluppo in ActionScript 2.0, offre la possibilità di avvalersi di pratiche e processi tipici di ambienti già consolidati ( si veda ad esempio J2SE ), garantendo una altissima qualità del prodotto finale.

Ritengo che questo aspetto, insieme alla validità dei prodotti in sè, contribuirà notevolmente ad avvicinare diversi sviluppatori ad ActionScript e aiuterà a crescere e migliorare il livello di qualità dei FlashDevelopers, soprattutto ora che il linguaggio e l’intera “Flash Platform” sta maturando ed evolvendosi ( si veda AS3, Apollo, FlashPlayer9 e Flex ).

Conclusioni

Anche stavolta ci avviamo alla conclusione dell’articolo con una consapevolezza: la crescente diffusione della “webinfovis” o “RIAinfovis” ( se così possiamo chiamarla ), cioè dell’utilizzo delle tecniche di information visualization all’interno delle webApplications rivole al mercato consumer.

A tutto ciò si accompagna, sempre più, l’utilizzo di Flash come piattaforma tecnologia per veicolare i contenuti e per mettere l’utente nella condizione di fruire agevolmente delle informzioni più vicine ai suoi bisogni, all’interno di un contesto informativo caratterizzato da un inarrestabile processo di sovraffollamento ( fenomeno conosciuto e descritto come “information pollution”).