Da pochissimi anni si è cominciato a parlare compiutamente di usabilità di Internet. Quando il Web era ancor più intricato di adesso e quando il singolo sito non riusciva a fornire un'interfaccia intuitiva a chi vi approdasse, qualcuno ha cominciato a volgere l'attenzione a un punto di vista tanto scontato quanto ignorato: l'utente!

Prendendo in prestito la definizione di Web Usability data da Uplink Web Agency: l'usabilità di un sito web è l'insieme delle proprietà del sito stesso che favoriscono l'utente nel raggiungimento del proprio obiettivo.

Secondo questa definizione risulta che tutto quello che si interpone tra l'utente e ciò che egli si aspetta di poter fare sul sito rappresenta una frontiera critica di usabilità, vale a dire un potenziale ostacolo a proseguire.

Un buon approccio al problema porta a suddividere le frontiere critiche di usabilità in due gruppi:

• bloccanti
• non bloccanti

Entrambe rappresentano fattori di rischio per l'usabilità e quindi potenziali ostacoli presenti sul percorso dell'utente. La differenza tra i due concetti è rappresentata in Figura 1: mentre il mancato superamento delle prime comporta il blocco dell'attività del visitatore (Figura 1.a, esempio ne è l'inaccessibilità che vedremo più avanti in questo articolo), le seconde rappresentano ostacoli che possono essere aggirati (Figura 1.b, molti problemi di navigazione rientrano in questo caso: una pulsantiera che sparisce, per esempio, impone all'utente di tornare alla homepage per poterla riutilizzare, alcuni utenti aggirano il problema mentre altri escono dal sito).

Tutti i fattori critici di usabilità, che siano bloccanti o meno, devono essere affrontati in fase di progetto in modo tale da trasformali da ostacoli a porte di accesso, inviti all'utilizzo, segni di confidenza per l'utente.

In questo articolo vogliamo presentarvi un modello messo a punto da un nostro studio e tenuto a riferimento ad ogni nuovo progetto: si tratta di quello che abbiamo denominato ciclo di usabilità.

Nell'illustrare questo approccio al problema coglieremo l'occasione per fare esempi pratici di immediata applicazione.

Il concetto di ciclo di usabilità si fonda sul seguente principio: il massimo risultato dell'usabilità è consentire all'utente di raggiungere il proprio obiettivo quando questo coincida con l'obiettivo di vita del sito (per esempio fare acquisti su un sito di commercio elettronico, consultare gli articoli su un sito di informazione, avere assistenza su un sito di customer care, ecc.).

Il concetto è molto semplice: come è mostrato in Figura 2, il committente (un'azienda per esempio) decide di creare un sito web per raggiungere un obiettivo definito da uno studio di fattibilità che ha condotto (ad esempio fornire servizi di assistenza on line). Il sito sarà progettato da una web agency con i criteri di usabilità che consentiranno all'utente di arrivare effettivamente ad usufruire dei servizi per il quali il sito stesso esisterà.

Come si vede, dunque, l'usabilità manifesta il suo massimo effetto quando l'utente raggiunge il proprio obiettivo (quello di ricevere assistenza per esempio) che coincide proprio con quello del sito (dare assistenza).

È chiaro che l'usabilità deve essere misurata sul bacino di utenti appartenenti al target di riferimento del progetto (per esempio i clienti dell'azienda). Visto, infatti, che il comportamento degli utenti su un sito dipende in prima analisi dalle aspettative di questi stessi, è molto importante focalizzare l'attenzione su coloro che possono essere realmente interessati ai servizi offerti. Il problema di far conoscere tali servizi agli utenti “giusti” non rientra nell'usabilità ma nelle azioni di marketing (on line e off line) e nel CRM (Customer Relationship Management: la gestione dei rapporti con i clienti). I criteri di usabilità presuppongono che l'utente sia quello desiderato e concorrono a far sì che questo raggiunga il massimo livello di interazione e di soddisfazione.

Come si vede, quindi, è molto importante affrontare la questione non solo in termini di strutture di navigazione, colori, ecc., ma anche del linguaggio, del messaggio che dovrà trasparire cioè di comunicazione.

Torniamo alla Figura 2. Come appare evidente dalla diversa colorazione (rosso per il committente, ad esempio l'azienda, blu per l'utente, ad esempio il cliente), abbiamo suddiviso il ciclo di usabilità in due processi:

• la produzione di usabilità (a sinistra, in rosso)
• il consumo di usabilità (a destra, in blu)

Nel primo rientrano tutte le fasi di studio, progettazione e sviluppo (comprese le fasi di test). Nel secondo rientra invece la reale attività dell'utente. Da una parte, dunque, si studia e si progetta l'usabilità, dall'altra si consuma, se ne usufruisce.

Come si vede dalla freccia grigia di sfondo: il ciclo si chiude (ovvero i due obiettivi si incontrano) se tutte le fasi hanno successo.

Un altro processo (non indicato in Figura 2) è quello di analisi dei comportamenti dell'utente, che rappresenta oggi uno degli aspetti più importanti del web. Di fatto rientra nelle attività di CRM sopra citate e consente l'ottimizzazione di entrambi i flussi di usabilità (quello di produzione e quello di consumo) aumentando dunque la probabilità di successo dell'intero progetto. Queste osservazioni sono condotte sia sull'insieme dei visitatori che sul singolo utente e grazie ad esse è possibile migliorare, snellire e favorire i percorsi di interazione.

Si comprende dunque che il ciclo di usabilità non si esaurisce in una sola volta ma si ripete: produzione, consumo, osservazione, di nuovo produzione.

Andiamo adesso a vedere più in dettaglio quali sono le fasi nelle quali si sviluppa il nostro modello.

Il progetto di usabilità inizia dallo studio del messaggio che deve essere dato e che dovrà apparire evidente.

Molti siti, per quanto tecnicamente usabili secondo i criteri che vedremo nei paragrafi successivi, non hanno successo o addirittura hanno fallito per non aver focalizzato l'attenzione sugli aspetti comunicativi.

In un sito di commercio elettronico, per esempio, deve essere trasparente il fatto che l'obiettivo è vendere. È necessario anzi valorizzare tale obiettivo, specializzare il sito sui processi di acquisto e depurarlo di tutto ciò che può essere forviante e ambiguo.

La tendenza attuale ci aiuta in questo. L'utente infatti preferisce sempre più i siti specializzati: poche attività, molto definite e servizi ottimizzati allo scopo.

È dunque fondamentale dare priorità a quelle domande che l'utente presumibilmente si pone per prime e che nel caso del commercio elettronico possono essere: cosa fa questo sito? Mi interessano gli articoli in vendita? Chi c'è dietro? È destinato all'ingrosso o al dettaglio? Ci sono quantitativi minimi da acquistare? Come pagherò? Come riceverò il materiale? Quali sono le garanzie e le condizioni di recesso? Mi posso dunque fidare?

Raggiungere questo livello di usabilità non è assolutamente facile. Parlando di comunicazione è necessario avere una conoscenza profonda dell'interlocutore (target di utenti o singolo utente), di cosa si vuol trasmettere e di come lo si può fare. Le regole da seguire ci vengono offerte dai risultati degli studi sul linguaggio e dalla semiotica.

Di vitale importanza dunque che la homepage sia focalizzata a far capire immediatamente l'obiettivo del sito. Visti i tempi medi di permanenza sulle pagine, in genere molto brevi, se l'utente non intuisce subito le finalità del sito, lo abbandonerà senza pensarci troppo (sarebbe un errore di usabilità della comunicazione). Per questo i contenuti più importanti dovranno essere subito visibili e intercettabili a colpo d'occhio senza obbligare l'utente all'uso delle scroolbar verticali.

In questo senso sarebbe un grave errore progettare un'interfaccia adatta solo per la risoluzione monitor 1024x768, non troppo diffusa tra gli utenti: attualmente lo standard è 800x600 e a volte è necessario pensare anche a risoluzioni minori.

Andiamo adesso a vedere alcuni criteri che guidano la progettazione dell'architettura.

Compito del web designer è anche quello di progettare il lavoro per il grafico. La grafica ha lo scopo di dare credibilità al sito attraverso lo studio di elementi che manifestino all'utente cura e attenzione verso l'argomento trattato.

Immagini, icone, banner, sfondi e colori hanno la funzione di accompagnare l'utente attraverso percorsi di fruizione dei contenuti e dei servizi progettati precedentemente.

Al contrario di quanto avviene sviluppando grafica per supporti cartacei, sul web c'è un “nemico” in più: le dimensioni in KB delle creazioni. Nella fase di definizione del layout delle pagine si dovrà pensare sempre a come il lavoro dovrà essere “tradotto” in html, così da evitare scelte difficilmente compatibili con l'usabilità.

I colori dovranno essere studiati per dar risalto alle diverse aree tematiche e permettere all'utente di individuare a colpo d'occhio contenuti di suo interesse, così come lo studio delle icone avrà lo scopo di semplificare la navigazione.

La creatività del grafico può essere esaltata inoltre dal possibile uso di standard vettoriali, come Macromedia Flash, che contribuiscono a rendere emozionale l'esperienza dell'utente, sempre a patto che questo non infici l'usabilità dell'insieme.

Quando si parla di contenuti non si intendono solo i testi bensì l'insieme di tutti gli elementi che concorrono a formare, appunto, il contenuto informativo del sito (testi, foto, filmati, ecc.).

La progettazione dei contenuti è uno degli aspetti più critici. Rappresenta infatti il legame tra gli obiettivi del sito e la sua reale organizzazione. È in questa fase infatti che si definisce la suddivisione in sezioni, l'organizzazione di un catalogo, la realizzazione di elementi, ecc.

È comprensibile dunque come l'usabilità ricopra l'intera fase di progettazione, perché è da questa che dipenderà la fruibilità dei contenuti stessi.

La capacità di offrire servizi e la loro reale usabilità può fare la differenza. Nel nostro ipotetico sito di commercio elettronico infatti, una volta conquistata la fiducia dell'utente e datagli la possibilità di accedere ai contenuti (nella fattispecie il catalogo), l'ultimo “scoglio” si trova nell'utilizzo dei servizi.

Riempimento e salvataggio del carrello, gestione degli acquisti effettuati, cache personale, preferiti, aggiornamento del catalogo e/o dei prezzi, assistenza on line, comunicazioni personali, interscambi, sono servizi alcuni necessari, altri progettati esclusivamente per aiutare l'utente o consentirgli di velocizzare alcune procedure (quindi aumentare l'usabilità). Tutti devono essere facilmente intuibili.

Vi sono alcuni canoni fondamentali che devono essere rispettati a priori nella fase di progettazione della navigazione di un sito. Il rispetto di questi parametri garantirà livelli di accessibilità e di usabilità basilari, senza i quali il progetto rischia fortemente di perdere efficienza e credibilità.

Primo fra tutti: l'utente dovrà essere in grado di raggiungere il proprio scopo nel minor tempo possibile. A tale fine è necessario ridurre al minimo la dimensione in KB delle pagine, evitare introduzioni animate, bloccanti e non, ridurre in genere il numero di click necessari a raggiungere l'obiettivo organizzando flussi di utilizzo facilmente individuabili.

In questo senso ci vengono in aiuto le barre di navigazione, in primis la pulsantiera principale del sito che le regole fondamentali dell'usabilità delle interfacce vogliono orizzontale e in alto, come le barre dei menù presenti nei programmi desktop. Queste devono mantenere sempre la stessa posizione nelle diverse pagine del sito in maniera tale che l'utente possa sentirsi a suo agio ritrovando nelle varie sezioni punti fissi di riferimento. La ripetizione delle voci principali nella parte inferiore della pagina garantirà inoltre una maggiore navigabilità.

Assolutamente da evitare ogni elemento che possa disorientare l'utente. Ad esempio evitate che il link (o pulsante) "Contatti" presente nella barra di navigazione apra direttamente il gestore di posta (mailto) invece di rimandare a una pagina dedicata. All'interno di questa pagina potrà esservi sia il mailto (che consente di utilizzare il proprio programma di posta) sia un modulo diretto di contatto (che offre all'utente la possibilità di inviare messaggi direttamente dal sito). Da circa un paio d'anni si è intuita l'opportunità di togliere il pulsante “Reimposta” lasciando soltanto quello di “Invio” (molti utenti infatti non ne comprendono l'utilizzo, altri lo premono per sbaglio perdendo tutto il contenuto del modulo).

Voci accessorie possono trovare collocamento in barre verticali, che la tendenza attuale sta spostando sulla destra dello schermo così che i contenuti della parte sinistra risultino sempre completamente stampabili e siano la prima cosa che l'utente legge.

Circa la stampabilità dei contenuti è da evitare l'utilizzo dei frame (che hanno peraltro controindicazioni per l'indicizzazione sui motori di ricerca). Talvolta è opportuno fornire una "versione stampabile".

Molto importante è evidenziare differentemente le diverse aree tematiche del sito, con l'uso di colori o icone dedicate come pure usare link “esplicativi” contenenti parole chiave focalizzate all'argomento trattato nella relativa pagina e raccolti in menù laterali. Importante è inoltre non affidarsi alle animazioni come unici link ad una pagina dando invece un metodo alternativo: sempre più spesso le animazioni sono associate a pubblicità e quindi tendenzialmente ignorate.

L'obiettivo è quello di dare il massimo controllo all'utente:

• non obbligandolo a scaricare grossi file grafici (come pesanti foto, ma fornendo delle miniature da ingrandire on demand: su richiesta)
• evitando quanto possibile di aprire finestre pop-up, sempre meno usate persino nell'advertising
• rendendo chiaro dove si trovi ad ogni istante sia che stia navigando sia, a maggior ragione, nel caso approdi ad una pagina a seguito di una ricerca su un motore senza passare dalla homepage.

L'accessibilità rappresenta una frontiera critica bloccante. Si tratta infatti di quelle proprietà dell'intero sistema che consentono o impediscono all'utente di accedere al contenuto.

Qui non si parla dunque di facilità di navigazione o di comunicazione, bensì di essere arrivati o meno a poter navigare o a poter interpretare. In prima battuta è legata alla possibilità di arrivare sul sito, in seconda di poter accedere alle informazioni in esso contenute e ai servizi da esso offerti.

Le varie problematiche dell'accessibilità vengono trattate in maniera esauriente dal W3C, che stabilisce delle linee guida da rispettare al fine di garantire a tutti gli utenti la fruizione delle varie tipologie di contenuto.

Ignorando queste linee, alcune categorie di utenti potrebbero risultare molto penalizzate: utenti che usano dispositivi di navigazione testuali o con funzionalità disattivate, connessioni lente, differenze di browser, plug in, sistemi operativi, ecc.

Tutte le linee guida del W3C sono dotate di “punti di controllo”, con diverse priorità, che hanno lo scopo di permettere la revisione della pagina al fine di validarla (garantirla quindi come accessibile) o meno.

I principi guida generici dell'accessibilità sono:

1. Assicurare una "trasformazione elegante" delle pagine: con il termine trasformazione si fa riferimento a quella che la pagina subisce cambiando l'interprete del codice (browser diversi, solo testuali, dispositivi di sintesi vocale, display breille ecc.); per elegante si intende che salvaguarda la fruibilità del contenuto.
2. Rendere il contenuto sempre comprensibile e navigabile.

Fondamentale è garantire l'accessibilità di base alle informazioni cercando di slegare la fruizione dei contenuti e dei servizi dallo strumento utilizzato per la navigazione e dalla piattaforma hardware e software lato client ("indipendenza da dispositivo").

Il principio base è quello di separare la struttura di un documento (organizzazione logica: capitoli, paragrafi ecc.) dalla sua presentazione (come il documento viene reso: testo, sintesi vocale ecc.). Usare i corretti elementi html per separare i due aspetti permette agli “interpreti” di distinguere in maniera ottimale quelli legati al contenuto da quelli legati alla sua organizzazione logica.

Particolare attenzione deve essere dedicata agli utenti che hanno deficit di vario tipo, vuoi visivi, uditivi, motori o di comprensione lessicale. Sviluppare siti fruibili anche da queste categorie di utenti porta notevoli benefici all'intera Comunità Web.

È necessario fornire in genere forme alternative di fruizione delle informazioni, sia grafiche che testuali, in modo da non penalizzare utenti con handicap: progettando equivalenti testuali per le immagini, non affidandosi soltanto al colore per l'evidenziazione di aree tematiche ma utilizzando "marcatori html" interpretabili da dispositivi di sintesi vocale utilizzati dai non vedenti, oppure realizzando una descrizione sonora o iconografica del contenuto.

Dobbiamo inoltre permettere la navigazione attraverso la tastiera ottimizzando la tabulazione.

Progettata l'architettura del sito compresi i vincoli di accessibilità, agli sviluppatori spetta il compito di realizzare e ottimizzare la grafica, il codice e i contenuti.

L'ottimizzazione del codice html (essenzialmente togliendo tutto ciò che non è necessario) permetterà un tempo minore di scaricamento della pagina: a questo scopo sono utili i fogli di stile (CSS: Cascade Style Sheet) per la formattazione del testo e l'uso di file .JS (JavaScript) esterni. Per lo stesso obiettivo è necessario ottimizzare le immagini con i diversi tipi di file grafici (.jpg o .gif).

L'utilizzo di template o di include lato server permette una maggiore usabilità del codice da parte dello sviluppatore, aspetto non banale in quanto gli consentirà di aggiornare più velocemente strutture e contenuti a vantaggio di una più veloce fruizione anche da parte dell'utente.

Una riduzione del peso della pagina è ottenibile anche attraverso un uso sapiente di contenuti vettoriali (Flash), a patto che questi non precludano l'accessibilità.

Rimandiamo all'articolo seguente i particolari legati allo sviluppo usabile. Vediamo nel prossimo paragrafo solamente le regole base per la stesura dei testi.

Dopo la progettazione dei contenuti effettuata dal content designer, il web writer ha il compito di scrivere i testi in modo che risultino usabili per il navigatore.

Sul web la lettura è molto più faticosa che su carta, quindi l'obiettivo primario è quello di sintetizzare quanto più possibile i concetti, facendo in modo che le informazioni più importanti siano riassunte nella parte iniziale della pagina, allo scopo di veicolare il messaggio in maniera veloce minimizzando la probabilità che l'utente abbandoni la lettura senza aver trovato quello che cerca.

A questo proposito risulta fondamentale il carattere esplicativo dei titoli, che devono essere focalizzati e brevi.

Particolare attenzione deve essere prestata alla correzione di eventuali errori di ortografia e grammatica, indice generale di trascuratezza: correttezza e aggiornamento dei contenuti sono alla base della credibilità di un sito web.

I contenuti devono essere divisi in brevi paragrafi separati gli uni dagli altri da spazi orizzontali bianchi. Il testo deve essere organizzato in righe brevi, con “a capo” frequenti e allineato a sinistra (il testo giustificato o centrato risulta più faticoso da leggere).

Un'attenta e parsimoniosa formattazione con grassetti e corsivi che mettano in risalto parole e concetti chiave permetterà all'utente di scorrere velocemente con lo sguardo i vari paragrafi, individuando a colpo d'occhio ciò che gli interessa.

Il testo nero su sfondo bianco assicurerà la maggiore leggibilità, mentre il carattere più leggibile a schermo risulta essere il verdana.

Volendo riassumere: sintesi, chiarezza, leggibilità e credibilità sono le regole generali alle quali attenersi per far sì che i vostri contenuti risultino accessibili e usabili.

Completate le fasi di sviluppo e i test di usabilità, il sito viene pubblicato e attraverso il web diventa accessibile all'utente. Le fasi 5,6,7 della Figura 2 sono le fasi, come abbiamo detto, di consumo dell'usabilità e trovano un parallelismo con le relative fasi di progetto (notare le frecce che uniscono logicamente i livelli). Il consumo parte ovviamente dall'accessibilità, segue con la navigazione e arriva all'effettivo utilizzo dei servizi, quindi al raggiungimento dell'obiettivo con la chiusura del ciclo.
In questo articolo abbiamo affrontato di sicuro in modo troppo rapido l'argomento della Web Usability. Per farlo abbiamo voluto presentarvi il Ciclo di Usabilità, un modello operativo che speriamo abbia aggiunto chiarezza e non ulteriore rumore al frastuono di discussioni che oggi si fanno sul tema.

Google: molte qualità e pochi difetti per il motore di ricerca più in crescita del momento

Sviluppato all'università di Stanford, ha debuttato in rete nel settembre del 1999: oggi fornisce i propri servizi di ricerca e database a molti dei principali portali, i quali lo utilizzano come base di dati per ottenere risultati non presenti nei propri archivi (Yahoo!!, AOL, Ask Jeeves, ecc.)

A che cosa è dovuta questa grande fortuna di Google? Sicuramente all'usabilità.

Le caratteristiche dell'interfaccia, spartana ed essenziale ma al contempo gradevole, completamente libera da pubblicità, permettono all'utente di raggiungere in maniera estremamente veloce e mirata il proprio obiettivo: il risultato della ricerca!

L'utente che accede all'homepage della versione internazionale o a una delle versioni nazionali del motore attende molto poco il caricamento della pagina: l'insieme dei file grafici (le quattro .gif che compongono il logo) pesa appena 11 KB e l'html è stato oggetto di un processo di ottimizzazione molto spinto (sono stati tolti tutti gli spazi inutili e la formattazione è stata fatta con fogli di stile): circa 5 KB di codice. Ne risulta un tempo di accesso molto basso, ottimo quindi anche per modem a 28,8 Kbps.

Lo sfondo bianco conferisce estrema leggibilità all'insieme, le aree semantiche sono intervallate orizzontalmente da spazi bianchi e liberi da grafiche. Questo permette una lettura veloce, focalizzata e non affaticante.

L'interfaccia mette in evidenza tutti gli elementi fondamentali (per prima la funzionalità di ricerca) indipendentemente dalle diverse risoluzioni video. Per quanto riguarda la navigazione tra le tipologie di ricerca effettuabili risulta inoltre ottima la disposizione orizzontale in alto.

L'inserimento delle parole da ricercare è facilitata dall'autofocus del campo di testo e i due grossi pulsanti situati sotto di esso tolgono pressoché all'utente la possibilità di sbagliare. Passando inoltre da una categoria di ricerca all'altra il contenuto del campo non varia, questo da' un grande senso di stabilità.

Frasi brevi e mirate, link semanticamente ineccepibili e ben in vista, che cambiano colore quando risultano visitati, conducono velocemente l'utente all'interno delle varie sezioni informative e di utility, mettendolo completamente a suo agio.

I principali aspetti "usabili" di Google, che conferiscono estrema credibilità al progetto, restano comunque i risultati generati delle ricerche, mirati e molto veloci: tempo medio dichiarato per ricerca di circa 0.29 secondi su un database tra i più vasti della Rete. L'aggiornamento dei contenuti è garantito inoltre dall'aggiunta di circa 1.5 milioni di nuove pagine e immagini al giorno. Da non trascurare la completa stampabilità delle pagine, caratteristica questa non scontata.

Un altro aspetto che contribuisce alla chiarezza è il fatto che i link a pagamento sono bene evidenziati in alto a destra nei risultati e indicati come "Collegamenti sponsorizzati".

NON USABILE (Figura 3.b)

Poche sono le critiche che si possono sollevare:

• google dance: il meccanismo di aggiornamento del motore prevede un'attività degli spider distribuita all'interno del mese che comporta il passaggio dei data base da vari stadi transitori. Questo implica una instabilità sulle ricerche che si manifesta all'utente con sostanziali differenze sui risultati ottenuti alle varie ore del giorno o tra giorni consecutivi per una stessa ricerca
• visualizzazione dei risultati: impossibilità da parte dell'utente di scegliere il numero di occorrenze di risultati da visualizzare in una pagina
• navigazione dei risultati: cliccando su "successive" ci aspetteremmo di passare al successivo gruppo di pagine mentre il link porta alla visualizzazione della pagina "successiva".

Peccati veniali che non inficiano l'usabilità del motore più importante del web.

www.w3.org/WAI/, W3C Web Accessibility Initiative, 1997-2002

Diego Orzalesi è web designer di Uplink Web Agency. È contattabile via e-mail all'indirizzo: d.orzalesi@uplink.it
Simone Genovesi è responsabile dei progetti di Uplink Web Agency. È contattabile via e-mail all'indirizzo: s.genovesi@uplink.it