* Il concetto non deriva dal Web, ma dall'ergonomia cognitiva (che studia come l'uomo interagisce con l'ambiente sulla base dei suoi vincoli fisici e cognitivi). La prima definizione è quella data nello standard ISO 9241-11 Ergonomic requirements for office work with visual display terminals - Guidance on usability, in cui l'usabilità è "il grado in cui un prodotto può essere usato da specifici utenti per raggiungere specifici obiettivi con efficacia, efficienza e soddisfazione in uno specifico contesto d'uso". Per il significato dei termini in essa contenuti si può dire che:

• l'efficacia nell'uso del prodotto indica l'accuratezza e la completezza con la quale gli utenti raggiungono determinati risultati;
• l'efficienza nell'uso del prodotto indica le risorse spese in relazione all'accuratezza e completezza con la quale gli utenti raggiungono determinati risultati;
• la soddisfazione indica la libertà da disagi e vincoli e la disposizione favorevole degli utenti all'uso del prodotto;
• il contesto d'uso è l'insieme costituito da utente, compito da svolgere, risorse hardware e software utilizzate e ambiente fisico e sociale nel quale il prodotto è utilizzato.

L'usabilità, quindi, non si riferisce ad una caratteristica intrinseca dello strumento, ma al processo di interazione tra utente, prodotto e finalità.

Gli attributi dell'Usabilità

1.  Utilità: a cosa serve? A chi serve?

2.  Facilità di apprendimento: l'utente riesce ad interagire immediatamente con un sito che non ha mai visto?

3.  Efficienza: gli utenti possono interrogare il sistema e ricevere delle risposte sensate e veloci?

4.  Facilità di ricordo: gli utenti ricordano immediatamente come usare il sito la seconda volta che ci ritornano?

5.  Quantità di errori: i navigatori compiono errori ricorrenti nella navigazione del sito?

6.  Soddisfazione: il sistema è divertente e soddisfacente da usare?

 

Le basi dell'usabilità

Gli studi di usabilità si servono di due pratiche:

1. un gruppo di esperti analizza il sito alla ricerca di problemi, fornendo osservazioni e suggerimenti per possibili miglioramenti;
2. si costituisce un gruppo rappresentativo di utenti, che viene osservato direttamente mentre utilizza il sito.

A seconda dei compiti svolti dall'utente e delle difficoltà incontrate si traggono dei suggerimenti per la progettazione.
Nel primo tipo di studio gli esperti utilizzano metodi come l'analisi del compito (es. il calcolo dei passi necessari allo svolgimento di una procedura), la cognitive walkthrough (es. valutazione delle competenze richieste all'utente, delle conoscenze di dominio, etc.) e valutazioni euristiche (sulla base di problemi di usabilità più frequenti).
Nel lavoro con i gruppi di utenti, invece, si prediligono le tecniche empiriche, come l'analisi dei tempi di esecuzione di un'operazione, la compilazione di questionari di soddisfazione, l'osservazione diretta con annotazione degli errori, far pensare ad alta voce l'utente, registrando quello che dice.

 Linee guida sull'usabilità, il documento è del MIT:http://web.mit.edu/is/usability/usability-guidelines.html

 

 

10 Principi di usabilità definiti da Jakob Nielsen

Coerenza
L´utente che naviga fra i documenti non dovrebbe mai chiedersi se parole, immagini, pulsanti, situazioni o azioni diverse hanno lo stesso significato; "situazioni simili" debbono essere coerenti nelle azioni, nella terminologia, nei colori, nello stile, nei caratteri e così via; la coerenza va applicata alla grafica (stessa rappresentazione grafica = stessa informazione o stessa azione), agli effetti (stesso comando = stesso effetto, stessa azione conseguente), alla presentazione (stessa informazione = stessa posizione). Inoltre, ci vuole coerenza anche rispetto agli standard e alle convenzioni: l´utente naviga anche in altri siti e deve potersi aspettare di interagire con il nostro sistema come è abituato a fare negli altri (ad es. l´utente che vede una frase sottolineata si aspetta che rappresenti un link, pertanto è bene riservare questa rappresentazione per i link). La mancanza di coerenza genera confusione e porta a una perdita di credibilità.

 

Feedback
Il sistema deve sempre tenere l´utente informato su cosa sta succedendo tramite adeguati feedback che corrispondono ad ogni azione dell´utente (es.: quando si invia una form il sistema dovrebbe dare un messaggio di "Invio avvenuto" oppure quando si clicca su un link la pagina di destinazione deve avere un titolo che assomigli al titolo del link, ecc.). I feedback devono essere forniti in un tempo ragionevole: dopo un secondo l´utente avverte il ritardo nella risposta del sistema, dopo 8 secondi il 50% degli utenti abbandona il sito (per operazioni lunghe quindi è bene mostrare indicatori di "avanzamento" per far sapere all´utente che la sua transazione è in corso).

 Uscite chiaramente indicate
Il sistema non deve mai imprigionare l´utente in situazioni che non hanno vie d´uscita visibili (in alcune pagine potrebbe essere utile avere un ritorno a una pagina precedente o successiva, e in genere alla homepage), né limitare la sua libertà di movimento; l´utente deve avere la sensazione di tenere la situazione sotto controllo, deve poter prevedere gli effetti delle proprie azioni (es.: avvertire quando il link aprirà una nuova finestra, informare sulle dimensioni di un file prima di scaricarlo, ecc.).

 Prevenzione degli errori
È meglio evitare che un problema si presenti piuttosto che prevedere vari messaggi di errore (prestare molta attenzione alle pagine che prevedono il riempimento di form evidenziando ad esempio i campi obbligatori, non consentendo di digitare caratteri alfanumerici in campi numerici, indicando chiaramente il formato dei campi data o valuta, ecc.)

 

Messaggi d´errore semplici
In caso di errore, i messaggi debbono essere costruttivi, cioè orientare l´utente alla soluzione e non all´individuazione di colpe e deve essere data la possibilità di riscrivere solo la parte errata; fornire funzionalità di annullamento delle operazioni, come "undo" e "redo" o di ripristino delle condizioni di default.

 

Parlare il linguaggio dell´utente
Il linguaggio utilizzato a livello di interfaccia deve essere semplice e familiare per l´utente e rispecchiare i concetti e la terminologia a lui noti.

 

Ridurre il carico di memoria per l´utente
È più facile riconoscere una cosa vedendola direttamente piuttosto che recuperarla dalla memoria, pertanto le azioni possibili e i comandi debbono essere chiaramente indicati o facilmente ritrovabili ogni qualvolta sono necessari. Ove possibile, è bene utilizzare il percorso di navigazione, cioè l´indicazione sempre presente sulla pagina di quali pagine sono state visitate per arrivare dalla home a quella attuale (ricalcando la struttura dell´albero di navigazione).

 

Scorciatoie
Spesso le caratteristiche che rendono un sistema facile da imparare infastidiscono l´utente esperto; sarebbe utile quindi includere nel sistema anche scorciatoie, tasti o pulsanti che consentano una navigazione più rapida e riducano il numero delle interazioni necessarie (utilizzare ad esempio gli "accesskey", combinazioni di tasti che permettono di saltare direttamente in una determinata posizione della pagina particolarmente utili perché facilitano la navigazione dei non vedenti e di coloro che non usano il mouse).

 

Aspetto gradevole ed essenziale
Le interfacce non dovrebbero contenere elementi irrilevanti né ridondanti: ogni informazione superflua in più riduce la visibilità delle informazioni importanti. Limitare le possibilità di scelta offerte all´utente: se in una pagina ci sono 50 pulsanti, esiste una sola possibilità su 50 che l´utente compia l´azione giusta per raggiungere il suo scopo.

 

Fornire aiuti e manuali
Normalmente un buon prodotto non dovrebbe aver bisogno di documentazione per essere usato, però in certi casi può essere necessario fornire aiuti in linea o manuali utente: in questo caso è bene fornire informazioni essenziali, semplici e facili da ricercare.

 

 

---

 

7 passi per una navigazione più facile

 

1. usate icone standard e convenzionali
2. evitate link irrilevanti
3. evidenziate la struttura del sito
4. prevedete le briciole di pane
5. non nascondete le informazioni (no ai menu a scomparsa)
6. non siate misteriosi (indicare dove porta un link)
7. fornite degli aiuti

Seven Steps To Easier Web Navigation, Constance J. Petersen, Enterprise Development Magazine, 2000:

---

 

Gli errori

Per progettare un sito usabile la prima cosa da fare è non cadere in quelli che sono tra gli errori più comuni nella costruzione di pagine: errori "estetici", di navigazione e di "ergonomia".
Gif animate
Quando in una home page tutto si muove e lampeggia, l'effetto finale risulta veramente fastidioso. tra gli estremisti dell'usabilità c'è chi sostiene addirittura che tutte le animazioni vengono scartate automaticamente dal campo di attenzione dei visitatori perché da sempre portatrici di inutili messaggi pubblicitari. In ogni caso il danno alla credibilità diventa incalcolabile con il piazzamento di animazioni gratuite prese in qua e là sulla rete. tra le nefandezze più diffuse le animazioni dei lavori in corso e le caselle di posta animate.

 

Background
Gli sfondi psichedelici e ripetuti sono uno degli errori più antichi del web. Eppure c'erano tempi in cui qualcuno osava mettere del testo blu sullo sfondo elettrico, con un effetto devastante per i muscoli della retina e per la leggibilità del testo (testo che il più delle volte in effetti era di scarsissimo interesse). Eppure ancora c'è qualcuno che indulge sugli sfondi ripetuti. Annoiano, e regalano sempre quell'aura di impaginatori alle prime armi.

 

Bottoni
Bottoni di tutti i colori, con effetti che variano dal bevel and emboss ai lighting effects. I filtri di Photshop portati al massimo utilizzo hanno provocato le più comuni cadute di buon gusto. Così, per sembrare dei perfetti dilettanti allo sbaraglio basta solo utilizzare alcuni dei più comuni "free buttons". (Tutti di forme e colori diversi, per ottenere il peggiore dei risultati).

 

Musica
I file midi sono l'ideale per infastidire il navigatore, che magari, reduce dall'ascolto del suo heavy metal preferito ha ancora le casse al massimo e inonda la stanza con la versione "carion" di "Mission Impossible". Non solo sono di pessimo gusto, ma risultano fisicamente fastidiosi all'orecchio umano per via di quella monotonia sonora che li contraddistingue. La sensazione che se ne ricava è paragonabile a quella provocata dalle suonerie dei telefonini.

Interfacce misteriose
Esistono anche home pages prive di descrizioni esplicite che richiedono un approccio "esplorativo". In genere un javascript al passaggio del mouse rivela i contenuti dei link misteriosi. Progettate nella convinzione che un sito sia un videogioco, il più delle volte invitano a lasciare perdere la Caccia al Tesoro ai contenuti.

Caricamenti lenti
Quando dopo trenta secondi di attesa ancora permane la scritta, "Loading, please wait". O quando - peggio - non succede proprio niente, solo un visitatore masochista continuerebbe nell'attesa. La maggior parte lascia perdere, rivolgendo la sua attenzione a un altro dei tanti milioni di siti presenti sul web.

Uso smodato delle tecnologie
Flash, applet java, javascript che scorre nella barra del browser. La pagina sta caricando a fatica e ... Ops! E' saltato tutto, bisogna ricorre al vecchio e traumatico reset. Ecco un sito in cui non tornare.

Home pages per Browser specifici
"Questa pagina è visibile con Explore 5.31 se usate altri browser ecco il link per scaricarlo." A volte l'ingenuità dei progettisti è quasi disarmante: si aspettavano che qualcuno andasse sul sito della Microsoft, si sobbarcasse il riempimento un form infinito, scaricasse un software da 6 mega con un download della durata complessiva di sette ore, per poi iniziare l'installazione e riavviare il computer? E soprattuto: si aspettavano che il misero potesse ancora ricordarsi del loro sito?

ASP senza ritorno
Le Active Server Pages hanno moltissimi pregi, ma a chi è capitato di compilare un form di tre pagine scegliere "invia" e poi tornare indietro per scoprire che la pagina se n'è andata per sempre (expired), la cosa è piuttosto seccante. In altre parole occorre passare il doppio del tempo a ricompilare tutto da capo. Quando il tasto "back" non funziona i siti diventano piuttosto scomodi da usare.

Pop-up Windows
Diventa intollerabile quando la finestrella si apre per pubblicità, è a malapena sopportabile quando approfondisce il contenuto di una pagina, ma è un profondo e imperdonabile atto di maleducazione quando si apre tutte le volte che si preme un tasto back, o peggio ancora quando ne apre un'altra a sua volta.
Chi ha il diritto di occupare il PC di un navigatore con finestre non richieste? Solo i siti cracker. Eppure anche blasonate media agencies non si fanno scrupolo di infastidire i visitatori con una finestra per ogni animazione flash che la loro creatività ha voluto regalare al mondo. Se ci fosse un garante per la privacy informatica, forse vieterebbe la pratica dell'affollamento di browser nei PC altrui.

Siti leggeri
Portare i contenuti in home page e organizzarli in aree chiare e distinte è una delle soluzioni migliori nel web: toglie l'incognita dei troppi click, e punta sulla flessibilità.
Se nel sito i link vanno sempre più in profondità dando origine a più generazioni di livelli, allora è il caso di usare una struttura a briciole di pane.

I link strutturali dei siti andrebbero posizionati in questo modo:

Contenuti principali: centro pagina
Barre di navigazione primarie: orizzontalmente nella parte superiore della pagina
Barre di navigazione secondarie: verticalmente sulla sinistra
Ritorno alla home/intestazione del sito: in alto a sinistra

Per i form attenzione ai tasti "Reset". Per lo più costituiscono un problema, perché gli utenti li attivano per sbaglio al posto del "Send". In linea di massima andrebbero evitati.
Gli svantaggi dei frame sono ormai di dominio pubblico: non si possono stampare, né possono essere ricostruiti dai motori di ricerca. Confondono i visitatori che perdono facilmente l'orientamento, non distinguendo la posizione in cui si trovano rispetto all'home page. Sono per lo più sconsigliati.

 

Checklist per l'usabilità

Alcuni controlli per verificare l'usabilità di una pagina o un sito Web:
Navigazione:

•  La posizione corrente all´interno del sito è indicata chiaramente
•  Il collegamento alla pagina principale del sito è identificato chiaramente
•  Le parti più importanti del sito sono direttamente accessibili dalla pagina principale
•  La mappa del sito viene fornita (per un sito complesso e di grandi dimensioni)
•  Ove necessario, viene fornita una funzione di Ricerca facile da usare

Funzionalità:

•  Il sito risulta soddisfacente sia per il novizio che per l´utente esperto
•  Le funzioni sono identificate chiaramente
•  Le funzioni essenziali sono disponibili senza lasciare il sito
•  I Plug-in sono usati soltanto se forniscono valore aggiunto

Controllo dell´utente:

•  L´utente può annullare qualunque operazione
•  Punti d´uscita evidenti sono forniti in ogni pagina
•  La dimensione di ogni pagina è non supera i 50K, per non penalizzare i collegamenti lenti
•  Tutti i browser opportuni sono supportati

Linguaggio e contenuto:

•   Alle informazioni e funzioni importanti viene attribuita la necessaria evidenza
•   Le informazioni meno importanti o le meno usate non vengono fornite
•   Le informazioni o le funzioni collegate sono raggruppate (o nella stessa pagina o menu oppure nella stessa zona all´interno di una pagina)
•   Il linguaggio è semplice, senza termini gergali
•   I paragrafi sono brevi
•   I link sono concisi, espressivi e visibili - non sepolti nel testo
•   I concetti sono definiti

Help Online e Manuali utente:

•  Il sito è progettato per richiedere Help e istruzioni minime
•  L´Help e le istruzioni, se necessari, sono facilmente accessibili

Sistema e feedback dell´utenza:

•  E' sempre chiaro che cosa sta accadendo nel sito (suggerimenti visivi, ecc.)
•  Gli utenti possono ricevere feedback via E-mail se necessario
•  Gli utenti possono fornire dei feedback via E-mail o tramite apposito form
•  Schermate di conferma vengono fornite dopo l´invio di un form
•  Tutte le risposte del sistema sono tempestive
•  Gli utenti sono informati se è richiesto un particolare browser o plug-in
•  Ogni pagina contiene una "data di ultimo aggiornamento"

Coerenza:

•  La stessa parola o frase è usata coerentemente per descrivere una voce
•  Il link riflette il titolo della pagina a cui si riferisce
•  Il titolo della pagina del browser è significativo e riflette l´intestazione della pagina principale

Prevenzione e correzione degli errori:

•  Gli utenti possono contare sul riconoscimento, non sulla memoria, per un uso riuscito del sito
•  Il sito supporta una varietà ragionevole di azioni dell´utente
•  Il sito fornisce istruzioni concise per le azioni che deve intraprendere l´utente, compreso il formato degli eventuali campi da compilare
•  I messaggi di errore sono visibili, non nascosti
•  I messaggi di errore sono in un linguaggio familiare, normale
•  I messaggi di errore descrivono le azioni per rimediare a un problema
•  I messaggi di errore forniscono un chiaro modo per uscire
•  I messaggi di errore forniscono i dettagli su chi contattare per l´assistenza

Chiarezza architettonica e visuale:

•  Il sito è organizzato in base alla prospettiva dell´utente
•  Nel sito sono evidenti l´organizzazione dei contenuti e lo scopo generale del sito
•  Il disegno e il layout del sito sono diretti e concisi
•  Il disegno e il layout del sito sono ridondanti solo se necessario per la produttività dell´utente
•  Lo spazio bianco è sufficiente; le pagine non sono troppo dense
•  Le animazioni inutili sono evitate
•  I colori usati per i link visitati e non visitati sono evidenti e comprensibili
•  Il testo corsivo e grassetto è usato con parsimonia

 

 

---

 

Strumenti

WebSAT - http://zing.ncsl.nist.gov/webmet/sat/websat-process.html - è un tool gratuito che automaticamente analizza il codice HTML alla ricerca di errori di usabilità.

Identifica i potenziali errori riguardo a sei categorie: accessibilità, uso dei form, performance, mantenimento, navigazione e leggibilità.

Accessibilità del codice - si assicura che le pagine facciano uso di tags appropriati per tutte le fasce di utenti.
Uso dei Form - controlla la presenza dei form. Segnala la compresenza di bottoni di "Invia" e "Cancella" (sappiamo infatti che la maggior parte degli errori con i form avviene perché gli utenti cliccano per sbaglio "Cancella").
Performance - analizza le dimensioni del codice e della grafica in relazione alla velocità di caricamento delle pagine.
Mantenimento - ricerca tag e strutture che potrebbero essere automatizzate e risiedere in altre parti del server.
Navigazione - individua rami morti (ma non esegue l'analisi dei log).
Leggibilità - procura un'analisi della leggibilità basata sul rapporto tra la densità dei link e il testo che fa parte del contenuto.

 

 

Siti Web sull’usabilità

 

Usableweb

 

Più di 1000 link sull’usabilità
http://usableweb.com/

Usability.net
http://www.usabilitynet.org/tools/r_international.htm

Usabilityfirst
http://www.usabilityfirst.com/

Useit.com, Jakob Nielsen’s Website
http://www.useit.com/

www.webusabile.it
http://www.webusabile.it

 

www.iwa-italy.org
http://www.iwa-italy.org

Qualità dei contenuti e metodi di valutazione dell’usabilità (da controllare)

 

Brussels quality framework / Cadre qualité Bruxelles
Workgroup aiming at the setting up of baselines for a shared vision of criteria of quality for cultural Websites
http://www.cfwb.be/qualite-Bruxelles/pg001.asp

DESIRE Information Gateways Handbook. Guide to creating high quality portals on the Internet
http://www.desire.org/handbook/

Hom James. The Usability Methods Toolbox. 1998
http://jthom.best.vwh.net/usability/

 

Judging quality on the Web
http://www.library.ucla.edu/url/referenc/judging.htm

Quick: the Quality information checklist
http://www.quick.org.uk/menu.htm

QUIS. Questionnaire for user interaction satisfaction
http://www.lap.umd.edu/QUIS/index.html

SUMI. Standard evaluation questionnaire for assessing quality of use of software by end users.
http://www.ucc.ie/hfrg/questionnaires/sumi/index.html

Tillman Hope N. Evaluating quality on the Net. March 2003
http://www.hopetillman.com/findqual.html

 

* Parte delle risorse elettroniche e testi sono stati selezionati da Giovanna Frigimelica per il Corso di aggiornamento AIB: Progettare, costruire e migliorare il sito web della biblioteca, 2007