Usabilita' dei siti web

* 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'usabilità, quindi, non si riferisce ad una caratteristica intrinseca dello strumento, ma al processo di interazione tra utente, prodotto e finalità.

L'essenza è che la progettazione delle interfacce, dei modi di interazione e dell'organizzazione dei contenuti di un sito web sia centrata sull'utente.
 
 

Gli attributi dell'Usabilità

 Questi sono i principali attributi dell'usabilità definiti nel Sun Usability Lab:

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

 

Boscarol Maurizio, Cosa sono i test di usabilità,
http://www.usabile.it/212003.htm

 

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.

 

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

 


 

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:

http://www.smartisans.com/articles/web_navigation.aspx

 

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:

Funzionalità:


Controllo dell´utente:

Linguaggio e contenuto:

Help Online e Manuali utente:

Sistema e feedback dell´utenza:


Coerenza:

Prevenzione e correzione degli errori:

Chiarezza architettonica e visuale:

 

Da "Requisiti e suggerimenti per realizzare siti ed applicazioni web accessibili per la Regione Emilia-Romagna",
http://www.regione.emilia-romagna.it/wcm/LineeGuida/sezioni/generali/usabilita.htm

 


 

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.

 

Diodati.org, Forum: Usabilità e architettura dell'informazione
 
http://forum.diodati.org/elenco.asp?f=5&id=811&ev=811

 

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