-->

Rich Internet Applications e User Experience

di Filippo Gregoretti
Pubblicato il 15 Giugno 2004

Premessa

Quando Matteo mi ha chiesto di scrivere un articolo riguardante i vantaggi delle RIA rispetto alle tecniche tradizionali, ho accettato subito con entusiasmo. Poi mi sono chiesto se sarei stato obiettivo… in effetti, essendo io un fautore dell’utilizzo di Flash per la realizzazione di GUI, chiedermi di parlare dei vantaggi delle RIA è come chiedere a un vegetariano se la verdura fa bene! ma poi ho pensato che, lavorando sul web da 12 anni, più che dare un termine di paragone obiettivo, o "a punti", tra l’utilizzo di Flash e delle tecniche tradizionali, avrei potuto condividere il percorso che mi ha portato a prediligere l’uso delle RIA, senza pretendere di essere un arbitro imparziale…

In quest’articolo parlerò in generale di quali sono i (miei) parametri per scegliere se suggerire lo sviluppo di un sistema basato su RIA, oppure mantenersi su canoni tradozionali. Nel fare questo naturalmente affronterò i temi da tenere in considerazione quando si compie una scelta del genere, tra i quali i costi e i tempi di sviluppo, le tecnologie e vari altri parametri.

Per quanto possibile cercherò di affrontare questi argomenti partendo da problematiche reali, basate su esigenze di clienti o interne all’agenzia.

Vantaggi di una RIA, per l’utente e per lo sviluppatore, dal punto di vista della User Experience

Parlando di RIA, viene subito in mente l’interfaccia del sito web della Macromedia, oppure uno degli esempi presentati sullo stesso sito, basati molto sulle Components preinstallate in Flash. Quest’immagine così "colorata" e idilliaca potrebbe portare un pò fuori strada se non si osservano con attenzione i reali cambiamenti rispetto le interfaccie tradizionali.

Una barra di scorrimento in 3D con riflessi colorati, anche se molto piacevole da vedere, non è ciò che arricchisce la user-experience. Una RIA ben fatta deve mantenere i parametri standard cui siamo oramai abituati (concetti come i menu, i bottoni, le scrollbar, le finestre, ecc.) "arricchendo" l’interfaccia utente di elementi che facilitino alla stessa il compito di fare da tramite tra la nostra coscienza e i dati su computer.

In fin dei conti, un bottone con scritto "salva", deve comunicare immediatamente al nostro cervello la sua funzione, dandoci la possibilità di esprimere la volontà di "salvare" dei dati su cui stiamo lavorando.

Allo stesso modo, quando lavoRIAmo su strutture dati complesse, un’interfaccia ben disegnata e ben "arricchita" ci potrà guidare in modo intuitivo, e soprattuto rapido, al raggiungimento dei nostri obiettivi.

Osservando con attenzione una RIA, alcuni aspetti più evidenti saltano facilmente agli occhi. Per prima cosa si nota una maggiore attenzione ai dettagli, e la possibilità di dare all’interfaccia un’estetica più gradevole e più facilmente integrabile in progetti estesi. Altro vantaggio evidente risiede nella facilità con cui l’interfaccia può adattarsi alle diverse esigenze di interazione, guidando la volontà dell’utente, passo dopo passo, nel compiere le scelte in modo più chiaro e intuitivo. Il mio interesse inoltre, in quanto sviluppatore, è indirizzato a quei vantaggi che non saltano all’occhio dell’utente, ma che in fase di progettazione e sviluppo portano a una maggiore razionalità e produttività.

Vantaggi di uno RIA dal punto di vista dell’utente

• Gradevolezza estetica e maggiore integrazione grafica
• Possibilità di utilizzare interazioni complesse e con più strumenti rispetto a quelli tradizionalmente offerti dai browser
• Tempi di attesa e caricamento tra i vari passi dell’interazione ridotti al minimo
• Facilità di utilizzo e maggiore intuitività

Vantaggi di una RIA per lo sviluppatore

• Separazione netta e reale tra la logica delle applicazioni server-side e client-side
• Maggiore libertà nella progettazione dell’interazione con l’utente
• Con l’avvento di ActionScript 2.0, ancora maggiore possibilità di riutilizzare il codice sviluppato
• Liberare le risorse dal debugging di JavaScript e DHTML e concentrarle nello sviluppo di migliori logiche di interazione
• Alleggerire i server da tutte quelle operazioni che possono essere delegate alla RIA su client

Ho sicuramente dimenticato qualcosa, attendo quindi numerosi commenti per arricchire questa piccola lista.

Quando una RIA non migliora la user experience

Naturalmente, sviluppare un RIA, non è la scelta migliore in tutte le situazioni. Vi sono molti casi nei quali è preferibile mantenere lo standard attuale. Per rendere veramente efficace l’uso di una RIA, partiamo da quei parametri che ci aiutano a determinare quando è preferibile rimanere nei canoni di sviluppo tradizionali.

Complessità dell’interazione.

Quando le azioni che l’utente dovrà intraprendere sono molto semplici, come ad esempio l’iscrizione a una newsletter, la scelta di pochi parametri o una semplice form per richiesta di informazioni, è ovviamente più razionale ed economico attenersi agli standard.

Storicità dell’interfaccia utente.

Ci sono dei sistemi ai quali l’utente è talmente abituato che non gioverebbero di una RIA. Mi riferisco, ad esempio, a sistemi di webmail come yahoo, hotmal o molti altri. Oppure a motori di ricerca, strumenti di e-commerce, reti intranet storicizzate, ecc.

Tipologia di azioni e di informazioni.

La lettura di lunghi documenti o la consultazione di siti informativi, di news, di weblog o webzine, è più indicata attraverso strumenti tradizionali. Prendiamo l’esempio di Flashability. L’utente, anche quello esperto, passa molto tempo sul web ad analizzare e leggere pagine di testo. La maggior parte dell’interazione viene svolta attraverso il browser, che offre gli strumenti per amministrare la "conoscenza" cui si accede sul web. Le azioni che compiamo più frequentemente sono l’aggiunta ai bookmarks, il salvataggio di pagine o documenti, e la stampa.

Flashability è destinato a un pubblico di esperti, pertanto noi utenti non dovremmo avere alcun problema nell’adattarci a una nuova interfaccia in RIA. Però, nonostante la preparazione tecnica, non possiamo negare che da sempre leggiamo, stampiamo e manipoliamo testo direttamente nel browser. Risulta quindi più efficace e rapido consultare i contenuti di Flashability come siamo abituati a fare, cioè in pagine web tradizionali.

Se Flashability fosse stato realizzato interamente in RIA, ci saremmo dovuti abituare a un’interfaccia diversa e probabilmente, poichè avrebbe dovuto manipolare grandi quantità di testo, poco performante su computer non recenti.

Quando una RIA migliora la user experience

Vediamo quali parametri ci possono suggerire quando è auspicabile sviluppare una RIA.

Complessità dell’interazione.

Quando l’interazione con l’utente è molto complessa naturalmente l’uso di una RIA è risolutivo. In un sistema di scelte complesse una soluzione, ad esempio, di tipo "drag and drop", potrebbe rendere l’interfaccia molto più intuitiva.

Ipotizziamo un sistema nel quale gli utenti debbano disegnare delle tavole o delle tabelle complesse. Immaginiamo di doverlo realizzare in JavaScript e DHTML e immaginiamo addirittura di riuscire a farlo compatibile con diversi browser. Ammesso che un cliente sia disposto a retribuire tutto il tempo perso per il debugging, l’utente si troverebbe a dover lavorare su un’interfaccia assurda. In questo caso, una RIA risolverebbe i problemi.

Una volta caricato il filmato flash, l’utente potrà semplicemente usare gli strumenti grafici messi a disposizione, e una volta completata la sua tabella salvarla sul server. Inoltre l’interazione è delegata al filmato flash e il lavoro viene interamente svolto dal plugin che, essendo lo stesso per tutti i browser, non incorre in problemi di compatibilità.

Divisione della logica tra client e server.

Quasi tutti i sistemi online delegano il calcolo e la logica completamente al server. Utilizzando una RIA, molta logica può essere delegata al client, liberando le risorse del server.

Prendiamo come esempio un sistema di e-commerce per libri sullo stile di Amazon.com. Una volta effettuate le scelte, arriviamo nella pagina di riepilogo, che ci mostra tutti i libri nel carrello, e il costo totale. Ogni libro acquistato ha accanto il campo "quantità", che possiamo modificare se desideRIAmo piùcopie dello stesso libro. Una volta cambiate le quantità, dobbiamo premere "aggiorna quantità", e il server, ricevendo i dati sulle nostre scelte, calcolerà i nuovi parametri e ci manderà una nuova pagina realizzata ad hoc.

 

Cambiando semplicemente il numero di copie di un libro, scateneremo 4 eventi: il server riceve i dati delle nostre scelte; calcola i nuovi importi; costruisce una nuova pagina web; invia al browser la nuova pagina. Il tutto, solo per aver scelto una copia in più.

Immaginiamo, per assurdo, lo stesso sistema realizzato con una piccola RIA. I dati di riepilogo verranno ricevuti da un filmato flash residente nella pagina del nostro browser, che già contiene tutta la logica per calcolare i cambi di quantità e i calcoli di importo. Una volta arrivati alla pagina di riepilogo potremo, in tempo reale, modificare tutte le quantità e osservare i cambiamenti direttamente nel nostro browser senza nessun tempo di attesa.

Immaginiamo un sistema di interazione più complesso, e moltiplichiamolo per migliaia di utenti, ed è facile prevedere quanto il server viene alleggerito in termini di calcolo e banda. Non bisogna dimenticare inoltre che moltissimi utenti utilizzano il modem, e ogni comunicazione col server comporta preziosi secondi di attesa.

Riusabilità degli strumenti sviluppati.

Per quasi tutte le strutture che producono web, è più semplice affrontare i problemi con metodi traidizonali piuttosto che con RIA. Bisogna però tenere presente che spesso, intere parti, se non la logica completa di una RIA, possono essere riutilizzate in modo molto semplice.

ActionScript 2.0, implementato da Flash MX 2004, è un potente linguaggio OOP compatiblie ECMAScript, ed è stato progettato per una massima riusabilità.

Una RIA realizzata bene, può essere implementata in innumerevoli progetti; percui, nel momento di affrontare un progetto, bisogna chiedersi se parti dello stesso potranno essere riutilizzate e se conviene un investimento iniziale maggiore, a fronte di un ritorno nei progetti futuri.

Esempi di RIA

Quando spiego un mio punto di vista, amo prendere come esempio dei concetti semplici, in quanto fanno arrivare più facilmente al fulcro del ragionamento. Ho scelto come esempi per sottolineare i concetti, due semplici RIA sviluppate ultimamente.

News a Scorrimento

Spesso i clienti desiderano ardentemente quelle piccole applet, o javascript, che presentano le ultime novità in una barra orizzontale, o in un box, che scorrono lentamente. Personalmente non amo questa forma di presentazione dei contenuti che, pur arricchendo la pagina con movimento, in realtà l’effetto che produce è di "nascondere" tutte le news che in quel momento non sono visibili… ma quando il cliente insiste…

Abbiamo molte volte implementato queste animazioni in JavaScript, incorrendo in quei problemi di compatibilità tra browser che tutti tristemente conosciamo. Con l’uscita di versioni nuove dei browser, l’impressione che abbiamo avuto è che le magagne di compatibilità aumentassero, anzichè diminuire, e quindi bisognava correre ai ripari ritoccando le snippet per renderle ancora più compatibili.

La soluzione che abbiamo trovato, è stata la realizzazione di una piccola RIA in flash, che leggesse da un file XML i contenuti delle news, e le informazioni inerenti l’aspetto, i colori, l’animazione e il comportamento (ad esempio, se far scorrere le news in verticale o orizzontale; se le news hanno dei link; se aggiungere la data, con che font, se aggiungere un’icona, ecc.).

Un’esempio può essere visto sull’home page di www.siandrologia.org.

In questo modo abbiamo risolto i problemi di compatibilità, facilmente collegato i contenuti al content manager, e in ogni momento possiamo velocemente aggiungere questa funzionalità in qualsiasi pagina. D’altronde, come abbiamo già detto, il plugin è uguale per tutti, e con ciò: funziona.

Non solo, un editor HTML, senza conoscenze di JavaScript o di programmazione in genere, può implementare news a scorrimento in pochi minuti senza pesare sul lavoro degli sviluppatori.

Picture Gallery

Il nostro cliente aveva le seguenti necessità:

• Mostrare una serie di immagini
• Permettere il download delle immagini in alta risoluzione
• Cambiare la galleRIA di immagini periodicamente
• Realizzare la galleRIA sia su web che su Cd-Rom

Vediamo il ragionamento che ci ha spinto a realizzare una RIA.

• Una picture gallery con thumbnail e click a download in alta risoluzione è facilmente realizzabile in HTML, però, questa operazione andrà effettuata spesso, e andrà aggiornata periodicamente.
• La Gallery dovrà essere trasposta anche su Cd-Rom percui, se realizzata in HTML, ci vedremo costretti a mettere pagine HTML su un Cd-Rom, offrendo un prodotto poco professionale.
• Molti altri clienti potrebbero chiederci una picture gallery con Cd-Rom allegato, soprattutto a fronte di una nostra offerta vantaggiosa.
• Trattandosi di una gallery, l’aggiunta di movimento e piccoli eye-candy potrà rendere l’interazione più coinvolgente.
• Una logica in grado di navigare tra immagini sarà utile anche ad altri nostri progetti che prevedono la scelta di immagini o file.

Le opzioni che ci siamo trovati di fronte erano due:

1 - Realizzare la gallery in HTML.

• 3 giorni di lavoro di un bravo Web Designer per realizzare un bell’HTML, controllare i bug, ed effettuare l’upload. Per poi rifare tutto da capo ogni volta che sarebbe stata aggiunta una sezione.
• 2 giorni di sviluppatore multimediale per realizzare la gallery off-line.

2 - Realizzare la gallery in RIA.

• 5 giorni di lavoro di uno sviluppatore ActionScript per realizzare una RIA in grado di ricevere alcuni parametri dalla pagina HTML che la ospita, e di leggere un file XML che ne definisce i contenuti, l’aspetto e il comportamento.

Ovviamente abbiamo scelto l’opzione 2….

In questo modo, ogni volta che va aggiunta una gallery, un operatore non dovrà fare altro che inserire il filmato flash in una nuova pagina, e dargli in pasto un diverso file XML. Stessa cosa nella realizzazione del Cd-Rom.

Un’implementazione della Picture Gallery è visibile cliccando su "SIU Photo Gallery" nella apposita pagina del sito:

 

Come può essere customizzata la Picture Gallery?

Anche se si tratta di un sistema molto semplice, i parametri sono molti e tutti definibili nel file XML di configurazione.

E’ possibile definire le convenzioni di file naming; decidere se esiste una versione in alta risoluzione; customizzare tutto l’aspetto estetico, il numero e la dimensione dei thumbnail, se inserire una didascalia, con quale tipo di animazione e transizione mostrare le immaigni, se precaricare subito tutti i thumbnail oppure caricarli nel momento in cui vengono visualizzati, scegliere i colori, le dimensioni, gli spazi tra le immagini, quante immagini per ogni pagina e cambiare, mantenendole esterne, le immagini di sfondo…

In questo modo un solo filmato flash, inserito nel giusto contesto, può diventare innumerevoli cose alleggerendo di molto le risorse dell’agenzia.

Conclusioni

E’ indubbio, come abbiamo specificato prima, che in molti casi la user experience viene decisamente migliorate grazie all’uso di Flash. Soprattuto ai giorni nostri, quando oramai è assodato che flash non ha nulla a che vedere con le noiose intro animate cui è stato sempre, ingiustamente, associato.

Trovare un teorema che possa definire con precisione come cambia l’approccio allo sviluppo e alla user experience in ambito RIA, è praticamente impossibile, visto la quantità di fattori e parametri in gioco.

Per ogni nuovo progetto bisogna affrontare le problematiche da tutti i punti di vista per decidere se è il caso o meno di realizzare una RIA.

Rimane nostra responsabilità, con fantasia e inventiva, trovare il modo di migliorare le interfaccie utente; e spingere sempre di più i limiti delle RIA, che ancora non si riescono a vedere, per migliorare l’esperienza di chi, alla fine, è il destinatario ultimo dei nostri sforzi: l’utente.