-->

TOP STORY: Flashability redesign

di Matteo Penzo
Pubblicato il 12 Febbraio 2005

Il redesign è un momento importantissimo per ogni sito: si ha infatti la possibilità di mettere a frutto le esperienze accumulate dal lancio iniziale (costuite sia dai successi che - soprattutto - dagli errori) per migliorare la user experience e i comportamenti di tutta la struttura: ottimizzazione del codice, labeling, architettura delle informazioni, usability delle interfacce, fruizione su device alernativi, …

La versione originale di Flashability - risalente ai primi mesi del 2003 - risentiva della limitazione di competenze insita nella riduzione del team di sviluppo ad una sola persona e a circoscrivere i momenti di produzione alle pause caffè in ufficio. Se a questo si aggiunge una superficiale conoscenza dell’infrastruttura informatica scelta (MovableType) e una gran voglia di divulgare un’idea che aveva preso inconsciamente forma nel tempo (forse già al momento della scrittura di "Flash 99%… boh!" a fine 2002) ma che è sfociata come pensiero ufficiale una fredda mattina di Gennaio una ventina di metri sotto Piazza del Duomo a Milano.

La tempesta di avvenimenti e cambiamenti sia professionali che privati che mi ha colpito dopo quel lancio e l’inaspettata attenzione che Flashability è riuscito a magnetizzare (i contenuti del sito sono stati trasposti nel tempo in forma di speech per l’Università Bicocca, Macromedia e Webb.it - per non parlare dei workshop presso le singole aziende) mi hanno impedito di rinverdire un sito che ormai sapeva (nell’interfaccia più che nei contenuti) di stantio.

L’occasione si è finalmente presentata verso il finire dello scorso anno e le esperienze e le conoscenze maturate nel frattempo hanno dato nuovo impulso e motivazione per la creazione di un nuovo Flashability.

Paper prototyping

Sono da sempre uno sponsor della creazione di prototipi su carta per la creazione di interfacce: una soluzione veloce e cost-effective che pone delle ottime fondamenta a tutto il progetto. L’unico problema è dato - per l’appunto - dalla carta stessa: difficile da conservare e reperire, assolutamente non interattiva (avete mai avuto modo di vedere il DVD della Norman-Nielsen sull’argomento?) in una parola statica… troppo statica.

Ma con l’avvento dei Tablet PC si è finalmente realizzata la possibilità di produrre documenti digitali con la stessa facilità degli equivalenti cartacei ma con in più l’indubbio vantaggio di essere facilmente condivisibili, trasferibili, integrabili e - soprattutto - interattivi.

Ho poi dotato il tablet fornitomi da Consultechnology con due software che ritengo fondamentali per ogni progettista di interazioni:

• Denim (gratuito, sviluppato da quei pazzodi di della Berkeley University utilissimo per un fast prototyping e per i primi test sulle interazioni - datevi un occhio a questo Real Video)
• Alias Sketchbook Pro (ottimo per una prima caratterizzazione dell’interfaccia da passare all’UI Developer)

La produzione di prototipi digitali con le stesse caratteristiche di quelli cartacei ha inoltre l’indubbio vantaggio di poter essere velocemente sottoposti ad un test preliminare di eye-tracking (anche in questo caso lo strumento e le professionalità sono state messe a disposizione da Consultechnology) per rilevare le prime macro-criticità e iniziare a porvi rimedio prima ancora di scrivere una riga di codice.

Interazioni

Vista la relativa eterogeneità di contenuti che trovano posto su Flashability una delle richieste fondanti era la creazione di un sistema di reperimento di contenuti a scelta multipla immediatamente comprensibile e utilizzabile dall’utente. Questo ci ha portato alla decisione di modificare radicalmente la navigazione del sito abbandonando come navigazione principale quella delle macrocategorie contenutistiche e optando piuttosto per una serie di categorizzazioni parallele e alternative una all’altra rendendole tutte contemporaneamente a disposizione degli utenti del sito:

• Ricercare un articolo per data di pubblicazione
  Utile soprattutto ai nuovi utenti del sito che preferiscono accedere primariamente ai contenuti più freschi esplorando poi mano a mano il resto del sito.
• Ricercare un’articolo in base al suo autore
  Dedicato agli aficionados o ai profondi conoscitori dell’argomento che preferiscono decidere le proprie letture in base al loro creatore o alle tematiche trattate da determinati professionisti.
• Ricercare un’articolo in base alla sua categoria contenutistica
  Questa è forse l’opzione che più ricorda il precedente sistema di navigazione, con la differenza che tutte le categorie sono immediatamente disponibili (con relativa descrizione sommaria dei contenuti interni) all’utente.

Il principale strumento di navigazione del sito necessitava di un’adeguato risalto su tutte le pagine del sito, e abbiamo ritenuto il sistema adottato dal magazine Digital-Web talmente buono da adottarlo in maniera pedissequa (scelta verificata in fase successive dai test di eye-tracking sugli utenti)

User Interfaces

Terminata la fase di progettazione ho coinvolto per la realizzazione del design e della costruzione delle interfacce Giovanni Bellocchio - professionista mantovano di Webzilla.it - che ritengo essere oggi uno dei migliori designer standard compliant a livello nazionale. Massima libertà (anzi: con una certa spinta all’innovazione) gli à stata lasciata da parte mia dopo la consegna dei paper prototypes su cui basarsi e il primo mock-up da lui prodotto ha colpito subito nel segno: fresco, usabile, estensibile e integrabile al punto giusto.

Ci si è accorti quasi subito della necessità di poter sfruttare un’area di schermo superiore per la corretta experience su tutti i differenti contenuti e si è quindi fissato come risoluzione di riferimento la 1024x768 (che è all’oggi la più diffusa sul web con una penetrazione del 85%).
Il posizionamento di tutti i contenuti fondamentali (navigazione, articoli, elenchi) all’interno dei primi 700px consente una ottimale fruizione del sito anche agli utenti dotati di risoluzioni inferiori.

Eye tracking tests

L’eye tracker è uno strumento che permette di registrare in maniera assolutamente ecologica (vale a dire senza interferenze di alcun tipo con l’attività dell’utente) i movimenti oculari durante l’attività di browsing del sito. Permette insomma ai progettisti di poter vedere con gli occhi dell’utente e quindi misurare in maniera oggettiva e misurabile l’effettiva usabilità di un’interfaccia.

I test effettuati sui prototipi e sulle interfacce di flashability (di cui vedete un esempio nella figura qui a fianco) ci hanno permesso di valutare i seguenti task:

• reperibilità degli articoli in homepage
• posizionamento dell’area search/contatti/RSS
• percezione delle comunicazioni pubblicitarie
• percezione dei tasti navigazione articoli (per data/argomento/autore)
• disturbo dell’area news in homepage

I risultati di questi test ci hanno permesso di confermare le ipotesi progettuali o di poterle modificare in funzione dei comportamenti del panel di utenti di test che avevamo selezionato. La comodità di uno strumento come l’eye tracker è anche quella di poter verificare ipotesi che inizialmente sembrano poco coerenti con gli standard de facto e che ad una expert evaluation potrebbero risultare come errori di progettazione.

Un caso particolarmente eclatante è quello dell’area del motore di ricerca. Così lontana dalla zona "calda" dei contenuti da poter sembrare piuttosto inusabile. L’immagine che riporto qui a fianco evidenzia invece come gli spazi liberi dai contenuti sotto e a sinistra dell’area in questione fungano da catalizzatore di sguardo. Rendendola al contempo immediatamente reperibile in caso di necessità senza che infici sulla fruizione del resto dei contenuti della pagina.

Movable Type personalizations

Come già segnalato Flashability si poggia sul sistema di content management di Movable Type; la versione attualmente utilizzata è piuttosto vecchiotta (risale al 2002) ma viste le limitate necessità del sito e la profonda duttilita del CMS abbiamo preferito non cambiare. Si è reso naturalmente necessario un approfondito studio dei vari tag di personalizzazione dei template di Movable Type, l’accettazione di qualche limite e la stesura di un po’ di righe di codice PHP per qualche personalizzazione irriproducibile col solo Movable Type.

A tutto questo ci ha pensato Simone Lippolis, che è la mente programmatrice che si nasconde dietro tutta la piattaforma di publishing adottata dal network di HOTMC.COM. In particolare il codice da lui sviluppato ci ha permesso di

• Inserire l’abstract di ogni autore in fondo ad ogni articolo pescandolo direttamente dalla pagina del profilo dell’autore stesso
• Ottenere l’elenco degli articoli per ogni autore
• gestire le related categories di ogni articolo (esiste in effetti una estensione di Movable Type che serve allo scopo. Ma ci è sembrata piuttosto limitata e malfunzionante)

sIFR Replacement Technique

Avrete probabilmente notato che tutti i titoli principali del sito sono in un bellissimo font che molto probabilmente non avete istallato sul vostro computer; che sono tutti provvisti di anti-alias e che… non sono immagini (il testo è infatti selezionabile, copiabile, etc. etc.)!

Si tratta di sIFR una tecnica che permette un utilizzo di Flash che abbiamo trovato estremamente usabile: rimpiazzare dinamicamente titoli testuali con un equivalente Flash che fosse piacevole alla vista dell’utente ma che al tempo stesso mantenesse le doti di scalabilità e trasportabilità su device differenti tipica di XHTML grazie a Flash, CSS2 e un po’ di magia Javascript dietro le quinte.

Non mi dilungo oltre visto che la tecnica e’ descritta nei dettagli nell’articolo “sIFR: un nuovo approccio alla tipografia sul web” di Giovanni Bellocchio.

Conclusioni

Flashability è un sito completamente nuovo. L’inserimento di sezioni dedicate a News ed Eventi ci permetteranno di fornire ai nostri utenti contenuti sempre più freschi. Ma il gusto e la filosofia di fondo rimangono le stesse: Flash è a nostro avviso uno dei migliori strumenti per la realizzazione di interfacce usabili e di ottimi user experiences per i vostri siti/applicazioni. Ma solo un’utilizzo accurato dello strumento vi permetterà di raggiungere questi obiettivi.