-->

Consultechnology: sperimentazione di una nuova user experience

di Matteo Penzo
Pubblicato il 15 Febbraio 2004

Uno dei beta tester che – connesso con un modem analogico – si è sorpreso della velocita’ della sua connessione durante i test sul sito CT

Mi sarebbe piaciuto scrivere un articolo simile in occasione del primo compleanno di Flashability (il 15 Marzo) ma il caso ha voluto che uscisse insieme al numero odierno del magazine. Si tratta di una case history, ma potrebbe essere benissimo il riassunto di un anno di ricerche e sperimentazione (e da qui il mio desiderio di collocarlo in uno spazio temporale differente).

Il 10 Gennaio di quest’anno e’ andato in linea il sito – di cui ho curato tutto l’interaction design - di Consultechnology, una societa’ milanese di Consulenza ICT. Fatto alquanto strano per un’azienda di questo tipo, il sito e’ totalmente Flash based.

Il sito e’ stato sviluppato tra Milano e Londra, dove Christian Giordano – che si e’ occupato di tutta la parte di programmazione – ha risieduto per qualche mese. Questo e’ stato forse il maggior collo di bottiglia del progetto: doversi affidare in maniera quasi esclusiva (hanno fatto eccezione un paio di telefonate internazionali e un paio di incontri in ufficio) all’utilizzo del Messenger di Microsoft per tutta quella che era la gestione day by day del carico di lavoro.

Una serie di aspetti (alcuni dei quali con un buon grado di innovazione) ne fanno a mio avviso un ottimo esempio per un caso di studio su una corretta Flash User Experience.

Download "a cascata" ©

La migliore medicina per l’ego offertami da questo progetto si e’ rivelato un commento di uno dei beta tester che – connesso con un modem analogico – si sorprendeva della velocita’ della sua connessione durante i test sul sito CT.

Non era il modem ad essere particolarmente veloce, ma stavo assistendo al risultato dell’illusione data dal download sequenziale dei contenuti.

L’intro (che viene visualizzata solo nel caso del primo accesso al sito) funge da buffer. Necessitando solo di un minimo preload questa viene infatti scaricata in streaming gia’ in presenza di connessioni molto lente (33.6 Kbps). Nel frattempo inizia a scaricarsi il resto del sito: la UI, il menu di navigazione, i testi e le immagini.

Basta una breve sosta di lettura su una sola delle pagine che compongono il sito per dare modo a tutte le rimanenti di scaricarsi in background, fornendo cosi’ all’utente contenuti gia’ "pronti all’uso" in qualsiasi momento della navigazione.

Utilizzo massiccio di XML

I contenuti, le proprieta’ dell’interfaccia, il menu di navigazione hanno come base dati dei file XML.

Questo permette – da un lato - al personale di CT addetto agli aggiornamenti di essere operativo immediatamente dopo un breve training sui tag utilizzati come metalinguaggio; dall’altro ci svincola dall’obbligo di accedere al sorgente Flash per la modifica della grafica delle singole pagine come anche per la loro creazione.

Tutti vantaggi derivanti da una netta separazione interfaccia-contenuto.

"Eliminazione del nulla binario"

L’efficacia di Flash come strumento per il miglioramento dell’interazione Uomo-Macchina ha una delle sue punte di diamante nelle transizioni (come diceva Leandro Agro’ proprio in queste pagine): accompagnare per mano l’utente da una pagina all’altra; nessuno stacco brusco ma passaggi graduali di pagina in pagina.

In fase di progettazione si e’ deciso di creare un sito che non richiedesse troppa potenza di processore (cd anche PC vs Mac). Si e’ percio’ deciso di delegare la transizione alle sole parti grafiche che – ovunque nel sito – hanno il compito di trasportare l’utente da una pagina all’altra.

Legge di Fitt nel menu’ principale

Fitt ha dimostrato come le maggiori dimensioni del nostro bersaglio e la minore distanza dal puntatore diminuiscano il nostro lo sforzo per centrarlo (ne abbiamo parlato – in ambiti differenti - anche su Idearium e Warp9). Flash ci permette di facilitare enormemente l’interazione dell’utente senza impattare in maniera invasiva sull’interfaccia.

Il menu’ del sito CT – la cui costruzione e’ basata interamente come dicevamo su di un file XML – e’ stato progettato seguendo proprio questa legge: minore e’ la distanza del puntatore dal bersaglio, maggiori le dimensioni di quest’ultimo.

La voce menu’ che "ci viene incontro" e’ inoltre dotata di un’area sensibile superiore alle sue dimensioni, caratteristica che accelera ulteriormente l’interazione dell’utente col menu’.

Bouncing Homepage ©

L’homepage di un sito e’ – per definizione – la sua pagina d’entrata principale. Corretto? Un tempo – forse. Sicuramente viene visitata la prima volta, poi diventa fastidiosa in quanto allunga di un click le interazioni necessarie per raggiungere il contenuto di nostro interesse.

Abbiamo quindi messo in pratica una delle teorie di Jef Raskin (l’inventore del Macintosh): presentare come homepage all’utente – nel caso di visite reiterate – l’ultima pagina della sua precedente navigazione, col vantaggio di proporgli – in un colpo solo – sia contenuti di sicuro interesse che un reminder dei suoi pattern navigazionali. La possibilita’ di accedere qualunque parte del sito utilizzando la barra di navigazione posta a sinistra ci ha naturalmente facilitato il compito.

L’utente – vero punto di riferimento di tutta la progettazione - si sente "coccolato": l’applicazione si e’ presa cura di ricordare le sue precedenti azioni.

Pulsante "back" del browser funzionante

Negli ultimi tempi abbiamo analizzato proprio in queste pagine l’importanza del pulsante back. Un operazione elementare per gli sviluppatori HTML diventa qualcosa di insormontabile quando entriamo nel mondo Flash (vd anche " BACK: muoversi indietro usando FLASH!").

Christian Giordano – utilizzando un metodo basato principalmente sulle local connection – ha creato un sistema che

• Permette al pulsante back di funzionare in maniera corretta (differentemente da quanto avviene con le ancore di Flash MX)
• Non necessita di adattamenti particolari a seconda del browser/piattaforma
• Non ci obbliga ad utilizzare pagine container singole (eliminando cosi’ le transizioni)
• Limita al massimo l’utilizzo di Javascript

Bookmark e accesso diretto alle pagine interne

Spesso non e’ possibile inserire tra i bookmark una singola pagina flash perche’ questa e’ – a tutti gli effetti – facente parte del sistema inscindibile dell’SWF. Per lo stesso motivo e’ impossibile accedere direttamente una pagina all’interno di un sito flash: l’url della singola pagine e’ identica a quella del sito (vd. un esempio Windows Media Video dal sito Flash 99% Good).

La soluzione piu’ semplice parrebbe ancora una volta quella di inserire ogni singola pagina flash all’interno di singoli container HTML, accettando per contro di eliminare completamente le transizioni dalla User Experience.

Abbiamo quindi optato per un passaggio di parametri che simuli a tutti gli effetti l’esistenza di URI univoche per ogni pagina del sito; con qualche semplice impostazione sul server abbiamo ottenuto che l’indirizzo http://consultechnology.com/web punti alla pagina http://consultechnology.com/index.htm?p=web ; il parametro viene intercettato dal motore Flash che – finalmente – presenta all’utente la sottopagina richiesta.

Esistendo un URI univoco e standard per ogni singola pagina e’ altresì possibile bookmarkare le stesse ed accedervi in un secondo momento proprio come se fossero normalissime pagine HTML .

Nuove modalita’ di interazione con i form

Ho una personale avversione nei confronti del classico "alert" di Javascript (quella finestrella che ci comunica un messaggio a cui non possiamo che rispondere con "OK"): un messaggio con una sola possibilita’ di interazione e’ palesemente inutile (se non posso decidere cosa fare, perche’ dovrei prendermi la briga di interagire?).

Nella pagina di contatto del sito ha preso quindi forma un’altra delle teorie di Raskin: l’odiatissima finestrella e’ stata sostituita da un alert semi-trasparente attraverso il quale e’ possibile sia intravedere i campi form sottostanti sia "trapassarlo" per andare a modificare i campi errati.

L’errore viene comunicato all’utente con l’utilizzo di una modifica cromatica dei campi da verificare, il cui colore passa dal nero al rosso (i campi corretti sono segnalati dalla presenza del colore verde).

Capisco che questo modo di operare vada contro gli standard de facto attualmente accettati. Per questo motivo, nel caso l’utente – non sapendo cosa fare in mancanza di un tasto "ok", "chiudi" o similare – non interagisca col form entro un limite di tempo prefissato (3 secondi) la finestra di avviso scompare automaticamente, lasciando una traccia cromatica degli errori di compilazione ancora da correggere.

Conclusioni

Parlando di Flash User Experience sono convinto che il sito CT non sia un punto di arrivo, ma un punto di partenza. Molte sono le cose migliorabili o che non ci convincono ancora pienamente, ma abbiamo fissato una serie di paletti che smentiscono in maniera chiara molte delle critiche che nel tempo sono state mosse all’utilizzo di Flash come strumento per lo sviluppo di interfacce. Abbiamo realizzato delle interazioni che – con l’uso del solo HTML – non sarebbero state possibili.

Il riscontro – in termini di contatti business in arrivo dal sito – e’ notevole. E questa deve essere la chiave propulsiva nello sviluppo di nuove soluzioni user-centred.