Relazione Progettazione Siti Web

Valutazione Euristica guidata dalle euristiche di Nielsen http://www.infohandicap.org

schermata sito

(schermata estratta il 06/07/2007)

Realizzato da: Federico Vitiello

Valid XHTML 1.0 Strict Valid CSS!

Introduzione

La valutazione euristica da me svolta si basa sulle 10 euristiche di Jacob Nielsen modificate da Giorgio Brajnik, consultabili all'indirizzo www.dimi.uniud.it/giorgio/dida/psw/euristiche.html.

Il sito viene valutato da un singolo sperimentatore seguendo la traccia data dalle domande poste nelle euristiche. Con questo metodo si spera di evidenziare difetti e punti di forza del sito che sono riassunti nel sommario. Se necessario la valutazione viene eseguita da più punti di vista corrispondenti a scenari d'uso e profili d'utente.

Ho scelto di valutare l'architettura del sito.

[Inizio]

Perimetro dell'indagine

Categorie di Utenti e Scenari d'uso

Dopo un'attenta analisi e del sito e delle euristiche rispetto alle quali valutarlo, ho deciso di considerare la categoria di utenti più a rischio con questo specifico sito: Utenti non vedenti.

Lo scenario scelto è un sistema casalingo senza disturbi esterni con lettore di schermo.

L'analisi tiene però anche conto di chi usa un browser visuale.

[Inizio]

Livelli di Gravità

Nella valutazione della gravità di un problema di usabilità, ho seguito le indicazioni fornite a lezione prendendo in considerazione due parametri: l'impatto e la frequenza.

  • Impatto:

    l'impatto che un problema può avere sull'efficacia, produttività e sicurezza di un utente che sta svolgendo un compito in una determinata situazione operativa.

  • Frequenza:

    la frequenza con cui il problema si presenta all'utente durante lo svolgimento del compito.

Scala di valutazione dell'impatto

  1. La presenza del problema viene notata dall'utente considerato, ma ci sono facili modi per aggirarla od evitarla.

    Esso non incide significativamente sulle capacità dell'utente di raggiungere con successo il termine del compito. Può invece incidere sull'efficienza con cui l'utente svolge il compito e/o sulla sua soddisfazione.

  2. La presenza del problema è notata ed incide significativamente sull'efficacia e/o sicurezza.

    L'utente non riesce ad aggirarlo facilmente, o ad evitarlo. Per uscire dalla situazione problematica l'utente può necessitare di notevole tempo, vari tentativi e ingegno. Il problema rende difficile, faticoso e/o rischioso il proseguimento del compito, ed è facile che l'utente compia degli errori. Il problema incide sicuramente e marcatamente su efficacia e/o sicurezza.

  3. Si tratta di una barriera che porta molto spesso a rinunciare al raggiungimento dello scopo.

    Gli errori possono essere molti e con gravi conseguenze; vie alternative non esistono. L'impatto negativo su efficacia e sicurezza è elevato.

Scala di valutazione della frequenza

  1. Il problema si manifesta raramente e non sempre durante lo svolgimento del compito; in pochi e marginali casi esso si manifesta. Dunque esso incide in maniera molto limitata sulla produttività e sulla soddisfazione.

  2. Il problema si verifica ogni volta che si svolge quel compito. Può incidere significativamente su produttività e su soddisfazione.

  3. Il problema di verifica più volte durante lo svolgimento del compito. Sicuramente incide sulla produttività, facendola calare marcatamente; e altrettanto di sicuro incide sulla soddisfazione.

Tabella per il calcolo della gravità delle barriere

Per concludere vi è la tabella per il calcolo della gravità delle barriere; gravità che viene dedotta dall' impatto e dalla frequenza con cui tale problema si presenta:

Impatto Frequenza Gravità
1 1 minore
1 2 minore
1 3 serio
2 1 serio
2 2 serio
2 3 critico
3 1 critico
3 2 critico
3 3 critico

[Perimetro dell'indagine]

[Inizio]

Pagine Analizzate

Le pagine del sito sono molto simili tra di loro. Ho scelto quelle che potevano presentare maggiori problemi selezionandone, per esempio, di contenenti immagini tra le notizie.

Ho analizzato ovviamente l' Homepage ed inoltre:

[Perimetro dell'indagine]

[Inizio]

Sommario risultati

La valutazione euristica del sito Infohandicap dal punto di vista dell'architettura ha rivelato molti punti di forza nell'usabilità oltre ad alcune violazioni delle euristiche. Anche se è evidente l'intento dei progettisti di rendere il sito accessibile si deve purtroppo constatare che non lo è al 100%. Tirando le conclusioni il sito sarebbe a buon punto se non avesse come target specifico proprio l'utenza che i requisiti di accessibilità tutelano. A mio parere il webmaster dovrebbe lavorare ancora fino ad ottenere una completa aderenza agli standard di accessibilità.

Il sito fornisce buoni strumenti per la navigazione. Particolarmente apprezzate sono le briciole di pane, peraltro rese molto evidenti. L'implementazione di scorciatoie da tastiera con annessa spiegazione d'uso e legenda è un'altra scelta che migliora l'accessibilità e l'uabilità del sito.

Purtroppo la mancanza di titoli informativi delle pagine e gli url interni al sito non intuitivi riducono la produttività poichè un utente non vedente può faticare a capire di essere in una nuova pagina e deve appena ascoltare (con lettore di schermo) il contenuto. Inoltre la mancanza dei tag h1, h2, h3..., che suddividirebbero logicamente il documento in sezioni tramite titoli e sottitoli via via più specifici, rende la navigazione del contenuto tramite lettore di schermo più lenta poichè non è possibile passare direttamente alla sezione d'interesse ma si deve ascoltare tutti i contenuti. I link in calce ad ogni aritcolo che rimandano alla versione estesa dello stesso sono ambigui in quanto tutti identici ("dettaglio") e non distinguibili da chi naviga con lettore di schermo. Per questa categoria di utenti quindi è impossibile cercare scorciatoie ascoltando i link uno dopo l'altro e scegliendo quello corrispondente all'informazione d'interesse.

D'altro canto il sito si presenta con una struttura semplice e comunque fornisce supporto completo e velocemente accessibile tramite le pagine "Mappa del sito" e "Guida al sito". La gestione degli errori usa un linguaggio umano evitando messaggi d'errore da "addetti ai lavori". Infine nell'unica form del sito è prevista una prevenzione degli errori.

 

Violazione Impatto Frequenza Gravità
Suddivisione in sezioni 2 3 Critico
URL interni complessi 1 3 Serio
Pagine senza titoli 1 3 Serio
Link ambigui 1 3 Serio
Segnalibri ambigui 1 2 Minore

 

[Inizio]

Dettaglio risultati

  1. Visibilità dello stato del sistema
  2. Allineamento tra il mondo del sistema e quello reale
  3. Controllo da parte dell'utente e sua libertà
  4. Coerenza e standard
  5. Prevenzione di errori
  6. Riconoscimento piuttosto di memorizzazione
  7. Flessibilità e efficienza d'uso
  8. Design estetico e minimalista
  9. Aiutare l'utente nel riconoscere, diagnosticare e rimediare dagli errori
  10. Aiuto e documentazione

Visibilità dello stato del sistema

il sistema deve costantemente informare l'utente su ciò che sta succedendo, fornendo appropriato feedback in tempi ragionevoli.

  • dove mi trovo?
  • la pagina ha un titolo informativo?
  • dove posso andare?
  • ci sono link e pulsanti importanti che sono visibili senza dover fare scrolling?

I realizzatori del sito hanno scelto di orientare l'utente attraverso delle breadcrumbs (briciole di pane) esplicite.

Per esempio la pagina "Invalidità civile" sottosezione di "Certificazioni e accertamenti" ha all'inizio del corpo centrale del testo il titolo: "Area: Certificazioni e accertamenti" e subito sotto: "Categoria: Invalidità civile", ancora sotto: "Pagina 1 di 1  -  Pag. 01"

Schermata della pagina Invalidità Civile

É evidente lo sforzo di orientare l'utente ma purtroppo il tentativo di rispondere alla domanda "dove mi trovo" in parte fallisce a causa della mancanza dei tag che dividano il documento in sezioni. Quelli che visivamente sono rappresentati come titoletti, ad un lettore di schermo appariranno come normale testo e non sarà possibile skippare la pagina alla ricerca dell'informazione d'interesse.

D'altro canto il sito si presenta con una struttura semplice e l'albero gerarchico delle pagine non ha più di due livelli di profondità.

mappa del sito, mostra come non ci siano più di due livelli di profondità

Il titolo delle pagine non aiuta ad orientarsi in quanto è sempre lo stesso per tutte le pagine.

Punto positivo è che i link importanti sono ben visibili e posti verso l'inizio del documento resumibilmente per facilitare gli utenti di lettori di schermo. Esempio: il link "Stampa l'articolo".

schermata raffigurante il link stampa l'articolo

[Dettaglio risultati]

[Inizio]

Allineamento tra il mondo del sistema e quello reale

Il sistema dovrebbe usare lo stesso linguaggio dell'utente, con parole, frasi e concetti familiari all'utente, puttosto di termini che sono orientati al sistema. Seguire le convenzioni del mondo reale, facendo sí che le informazioni appaiano in ordine naturale e logico.

  • i link, pulsanti, controlli delle form hanno etichette appropriate?
  • le categorie e i raggruppamenti (di informazioni, di link, di pulsanti, di controlli) hanno etichette appropriate?

Generalmente i controlli del sito hanno un linguaggio che corrisponde a quello del mondo reale, ci sono ovviamente alcune convenzioni come "News" e "Newsletter", ma sono da considerare ormai consolidate e di conoscenza comune.

Anche la divisione del menu in due sezioni è logica e chiaramente visibile.

schermata che mostra il menu con uno spazio tra contatti e il resto

Da notare che a livello di codice tale divisione non esiste,(ci sono due tag <br>) si tratta a mio parere di una decisione poco ortodossa ma efficace. Mentre visivamente rende più fruibile percepire due menu logicamente separati, per chi utilizza un lettore di schermo sarebbe risultato più complesso dover gestire due elenchi differenti (ovvero due menu).

[Dettaglio risultati]

[Inizio]

Controllo da parte dell'utente e sua libertà

Gli utenti spesso invocano delle funzioni del sistema per errore e abbisognano delle uscite di emergenza chiaramente indicate in modo da abbandonare degli stati del sistema indesiderati senza dover passare attraverso un lungo dialogo. Si supportino azioni di undo/redo.

  • viene evitata una introduzione in Flash? la si può facilmente saltare?
  • la pagina ha un pulsante "indietro"? oppure le briciole di pane?
  • la pagina ha un link alla home?
  • questi link/pulsanti funzionano correttamente anche all'interno di pagine basate su frame?
  • le briciole di pane sono chiaramente indicate?
  • se lo scaricamento della pagina richiede tempi lunghi, qualche porzione preliminare dei dati viene resa percepibile?

Il sito risponde affernativamente a tutte le domende sopraelencate. Il controllo dell'utente è ben supportato.

[Dettaglio risultati]

[Inizio]

Coerenza e standard

Gli utenti non devono chiedersi se parole, situazioni o azioni diverse fanno riferimento alle stesse cose. Si seguano le convenzioni determinate dagli standard ufficiali o di fatto.

  • l'etichetta di un link o pulsante è coerente con il titolo della pagina destinazione?
  • il titolo di una pagina è coerente con il contenuto della pagina?

Le pagine del sito hanno tutte titolo "Infohadicap"

schermata con titolo della pagina Infohandicap

Quindi non sono minimamente informative e non aiutano l'utente ad orientarsi. Ciò porta ad una riduzione della produttività perchè l'utente potrebbe non accorgersi del cambiamento di pagina.

[Dettaglio risultati]

[Inizio]

Prevenzione di errori

Ancora meglio che dei buoni messaggi di errore è un attento progetto che previene gli errori.

  • errori di navigazione (vicoli a fondo cieco, cicli, link non definiti, smarrirsi) vengono evitati?
  • le etichette dei link e pulsanti sono non-ambigui?
  • informazioni sull'attraversamento di un link vengono forniti in anticipo (dimensione della pagina, formati particolari, tipo di informazione - souno, animazione, video, PDF, ...)?
  • gli URL usano caratteri semplici (si evitano caratteri che non siano lettere, o nomi lunghi e complessi)?
  • i frame sono evitati?
  • vengono fornite chiare ed esaurienti istruzioni su come compilare le form? sono adiacenti ai controlli delle form?

Da ogni pagina è possibile raggiungere il resto del sito in quanto resta sempre presente e ben visibile il menu. Inoltre nelle pagine da me visitate non si arriva a fondi ciachi con link nonfunzionanti.

Da notare è che i link al dettaglio delle notizie sono ambigui

link ambigui

Nella pagina per scaricare l'archivio delle Newsletter in pdf sono stati inseriti l'estensione del file "pdf" e il suo peso.

schermata che mostra le informazioni relative ai pdf da scaricare

Il fatto che manchino dei titoli informativi alle pagine è peggiorato dall'incomprensibilità degli URL interni.

es: http://www.infohandicap.org/index.php?pDataSet=f2e8fee3cEFyZWE9MSZwQWN0PX
NodzAxJnBTY2F0PTEyOCZwQXJlUGFyW2RhdF9jb2RdPTg3OA

Non ci sono frame e l'unica form da compilare, per iscirversi alla Newsletter è semplice e prevede un controllo della validità formale dell' indirizzo email inserito.

[Dettaglio risultati]

[Inizio]

Riconoscimento piuttosto di memorizzazione

Rendere visibili gli oggetti, le azioni e le opzioni. L'utente non dovrebbe dover ricordarsi le informazioni relative ad una parte del dialogo nelle successive. Le istruzioni su come usare il sistema dovrebbero essere visibili o reperibili con facilità ogni volta che è appropriato.

  • i link sono troppi? sono presentati in maniera pesante?
  • i tooltip con delle descrizioni più ricche sono disponibili?

È presente un'intera pagina "guida al sito" che spiega le scelte architetturali e gli accorgimenti adottati per renderlo accessibile.

Fornisce, inoltre, una legenda delle scorciatoie da tastiera per navigare il sito.

link alla guida al sito

[Dettaglio risultati]

[Inizio]

Flessibilità e efficienza d'uso

Gli acceleratori da tastiera - non visibili da utenti principianti - spesso possono velocizzare l'interazione per utenti esperti, facendo sí che il sistema sia allo stesso tempo adatto agli uni e agli altri. Si permetta agli utenti di personalizzare le azioni più frequenti.

  • le pagine possono essere incluse nei favoriti/segnalibri (bookmark) in maniera non ambigua?
  • vengono offerti dei meccanismi di ricerca?

A causa della mancanza di titoli informativi le pagine non possono essere inserite nei segnalibri in modo non ambiguo.

Il motore di ricerca interno funziona ed è possibile cercare in una particolare sezione del sito.

schermata con motore di ricerca

[Dettaglio risultati]

[Inizio]

Design estetico e minimalista

I dialoghi non dovrebbero contenere informazioni che sono irrilevanti o raramente usate. Ogni componente informativo in un dialogo compete con gli altri, e diminuisce la loro visibilità relativa.

  • i pulsanti e i link sono raggruppati in base alla loro funzione?
  • le cose meno importanti (paragrafi, link, pulsanti) sono minimizzati?
  • i termini che sono legati al web vengono evitati (es. "segui questo link", "clicca qui")?

Il sito è organizzato logicamente senza elementi ridondanti, è presente solo ciò che è utile alla fruizione del servizio.

Il menu è ordinato logicamente e le notizie sono chiaramente divise. Manca, però la suddivisione in sezioni tramite i tag h1, h2, h3...

[Dettaglio risultati]

[Inizio]

Aiutare l'utente nel riconoscere, diagnosticare e rimediare dagli errori

I messaggi di errore devono essere espressi in un linguaggio semplice (non codici di errore), devono indicare con precisione l'errore, e suggerire in maniera costruttiva una soluzione.

  • per gli errori di navigazione vengono dati dei suggerimenti costruttivi (es. link iniziali nel caso di nessun risultato da un motore di ricerca)?
  • vengono offerte delle spiegazioni naturali di ciò che è successo e perché?

Il motore di ricerca in caso di fallimento fornisce una spiegazione esauriente della situazione corrente.

Schermata con messaggio di errore del motore di ricerca

Anche il form di iscrizione alla Newsletter fornisce un messaggio d'errore in linguaggio semplice in caso di immissione di un indirizzo email non formalmente valido.

Schermata con messaggio di errore in caso di immissione di indirizzo email non valido

 

[Dettaglio risultati]

[Inizio]

Aiuto e documentazione

Anche se è meglio se il sistema può venir usato senza documentazione, può essere necessario fornire degli aiuti e documentazione di riferimento. Questo tipo di informazione deve essere semplice da ricercare, focalizzata sui compiti degli utenti, elencare i passi concreti da eseguire, e non essere troppo grande come dimensione.

  • quanto lontano è il materiale di aiuto? quanto bene esso è integrato nelle pagine?
  • è disponibile una mappa del sito?
  • viene data una descrizione delle caratteristiche di accessibilità del sito?

I primi collegamenti in alto a sinistra (ed i primi ad essere letti da lettori di schermo) presenti su tutte le pagine del sito sono "Mappa del sito" e "Guida al sito".

link alla guida al sito

La pagina corrispondente a "Guida al sito" chiarisce le caratteristiche di accessibilità del sito e fornisce una legenda delle scorciatoie da tastiera utilizzabili.

legenda di scorciatoie del sito

[Dettaglio risultati]

[Inizio]

Relazione elaborata nell'arco dei mesi di maggio e giugno 2007 - Copyleft - Federico Vitiello