Corso di Laurea Magistrale in Informatica UmanisticaProgettazione di interfacce e valutazione dell’usabilità

Esercitazione 6 Valutazione dell'usabilità

Regione Umbria

Francesca Pulina e-mail: frampy.p@hotmail.it

Link alle pagine

● Homepage: http://www.regione.umbria.it/home

● Pagina con form: http://www.urp.regione.umbria.it/Mediacenter/FE/CategoriaMedia.aspx?idc=15&explicit=SI

● Pagina con indice: http://www.regione.umbria.it/servizi-online

● Pagina con contenuti: http://www.attivitaculturali.regione.umbria.it/Mediacenter/FE/CategoriaMedia.aspx?idc=9&explicit=SI

● Pagina con tabella dati: http://www.regione.umbria.it/amministrazione-trasparente/ricerca-dati-legge33?p_p_id=RicercaDati_WAR_RicercaDatiArticolo18portlet&p_p_lifecycle=1&p_p_state=normal&p_p_mode=view&p_p_col_id=column-4&p_p_col_count=1&_RicercaDati_WAR_RicercaDatiArticolo18portlet_javax.portlet.action=getData

Home pageDesktop

Visibilità dello stato di sistema

Fornire help e documentazione

L'utente si trova nella Homepage, ma il bottone Home della barra in alto non risulta selezionato, quindi non risulta totalmente chiaro quale sia lo stato del sistema.

Design estetico e minimalista

I pulsanti e i link sono raggruppati in base alla loro funzione; non sono presenti immagini o animazioni inutili.

La documentazione viene fornita nel link nel caso del riquadro animato; inoltre con un mouse-over sul titolo del link compare un riquadro con un riassunto die contenuti ai quali rimandano.

Home pageMobile

PremessaNon esiste una versione mobile del sito, perciò tutte le pagine viste nella versione desktop sono identiche se visualizzate da dispositivo mobile.I problemi riscontrati nell'analisi dell'usabilità desktop valgono anche per la versione mobile; evidenzierò solo ulteriori problematiche specifiche della visualizzazione su dispositivo mobile. (vale per tutte le pagine m o b i l e )

Prevenire errori /Non richiedere eccessivi sforzi di memoria

Per poter visualizzare bene i contenuti della pagina, l'utente deve continuamente ricorrere a zoom in e zoom out, soprattutto per leggere i contenuti secondari della sezione notizie; inoltre, volendo selezionare un determinato link, è molto alta la probabilità di sbagliare, data in alcuni casi la loro estrema vicinanza.

Pagina con formDesktop

Coerenza

Non viene rispettata: pulsanti e link che nella Home hanno la stessa funzione, in questa pagina si trovano in una differente collocazione e hanno anche proprietà grafiche diverse.

Controllo da parte dell'utente

L'utilizzo della tecnica delle briciole di pane offre all'utente supporto per la navigazione della pagina; anche il messaggio di errore (scritto in un l i n g u a g g i o c o m p r e n s i b i l e p e r l ' u t e n t e ) è significativo in questo senso, perché suggerisce in modo chiaro come continuare (a i u t a r e g l i u t e n t i n e l l a g e s t i o n e d i s i t u a z i o n i e r r o n e e ).

Flessibilità ed efficienza

L'utente può cambiare le dimensioni dei caratteri oppure visualizzare la

pagina in modalità Versione solo testo.

Pagina con formMobile

Prevenire errori

Per il problema delle ridotte dimensioni del testo, è facile che l'utente sbagli nella compilazione della form relativa al codice di sicurezza. Stessa considerazione può essere valida per la compilazione di tutti i campi.

Design estetico e minimalista

Tanto spazio della pagina è sprecato, a discapito del riquadro con i form da compilare, che l'utente deve ingrandire per una migliore leggibilità e per evitare errori.

Pagina con indiceDesktop

Coerenza

Rispettata in relazione alla homepage: pulsanti e link che hanno la stessa funzione si trovano nella medesima posizione.

Visibilità dello stato di sistema

L'utente si trova nella sezione Servizi Online dopo aver cliccato sul bottone apposito, che però non viene evidenziato, pregiudicando la comprensione dello stato del sistema da parte dell'utente.

Design estetico e minimalista

Euristica in generale rispettata: i link sono raggruppati in modo ordinato e la loro leggibilità è buona; i dettagli secondari però sarebbero potuti essere ulteriormente snelliti (dato che lo stesso testo compare con un mouseover sul titolo del link).

Pagina con indiceMobile

Design estetico e minimalista

Le didascalie esplicative dei contenuti cui i link rimandano vengono mantenute nella versione mobile; sebbene il design sia essenziale, un elenco con soli titoli (con e l i m i n a z i o n e d e i c o n t e n u t i s e c o n d a r i ) migliorerebbe la leggibilità della pagina, e l'utente non dovrebbe ricorrere a scroll per la visualizzazione completa dell'elenco.

Pagina con contenuti

Desktop

CoerenzaNon rispettata rispetto alla

homepage, rispettata invece rispetto alla pagina con form

(vedi slide di riferimento).

Flessibilità ed efficienza

L'utente può cambiare le dimensioni dei caratteri oppure visualizzare la

pagina in modalità Versione solo testo.

Visibilità dello stato di sistema

È indicata la data dell'ultimo

aggiornamento della pagina.

Fornire aiuto e documentazione

Vengono forniti indirizzi email e link a siti da consultare in caso di

necessità di ulteriori informazioni.

Controllo da parte dell'utente

Grazie all'utilizzo della tecnica delle briciole di pane l'utente può tornare

immediatamente alla Home. In realtà il percorso è f u o r v i a n t e

perché alla homepage si arriva cliccando su Regione Umbria,

mentre Home rimanda alla pagina iniziale della sezione Cultura.

Pagina con contenuti

Mobile

Design estetico e minimalista

Il testo, di per sè lungo, non si adatta alle dimensioni della pagina; l'utente deve ricorrere al zoom in per una lettura ottimale.

Prevenire errori

I link sono troppo vicini ed è alta la possibilità di errore (anche nelle briciole di pane: viene parzialmente meno la facoltà di c o n t r o l l o d a p a r t e d e l l ' u t e n t e ); anche in questo caso, l'utente deve ingrandire le dimensioni della pagina.

Pagina con tabella 1Desktop

Controllo da parte dell'utente / Visibilità dello stato del sistema

Flessibilità ed efficienza

L'utente può intervenire sulla visualizzazione della

tabella non solo inserendo criteri di ricerca (io ho inserito il n dell'anno:

2013), ma anche scegliendo quanti articoli per pagina e quale pagina

visualizzare.

L'utente può tornare indietro alla homepage e capire in quale stato si trovi il sistema grazie all'utilizzo della tecnica delle briciole di pane.

Pagina con tabella 2Desktop/Mobile

Prevenire errori / Fornire aiuto e documentazione

Non richiedere eccessivi sforzi di memoria / Linguaggio dell'applicazione riflette quello reale

Non è chiaro all'utente cosa andrà a visualizzare cliccando sull'icona della freccia, perché non gli viene fornita nessuna informazione a riguardo.

Per necessità di spazio le sigle degli atti e dei documenti ufficiali non vengono sciolte, e ciò può essere problematico per un utente che non abbia dimestichezza in materia.I testi contenuti nelle celle della colonna Oggetto Atto sono eccessivamente lunghi.Per la visualizzazione mobile, l'euristica violata è essenzialmente 5 )

p r e v e n i r e e r r o r i : la visualizzazione della tabella è resa problematica dalle sue ridotte dimensioni; idem per la compilazione del form (vedi altre pagine Mobile)

NUMERO PROBLEMA POSIZIONE PROBLEMA

PRINCIPIO VIOLATO

POSSIBILE SOLUZIONE

1 Homepage / Pagina con indiceNon risulta selezionato il pulsante

corrispondente alla pagina visualizzata

1 ) visibilità dello stato del sistemaEvidenziare il pulsante

corrispondente alla pagina visualizzata

2 Tutte le pagine Il layout della pagina cambia (ci sono più stili differenti) 4) coerenza Uniformare i diversi tipi di layout

3 Pagina con tabellaL'utente può cliccare sull'icona della freccia, ma non sa che effetto avrà la

sua azione5) prevenire errori Inserire un titolo anche per l'ultima

colonna

4 Pagina con tabella L'utente non capisce a cosa rimandi il link azionato dall'icona della freccia

10) fornire aiuto e documentazione

Associare all'evento mouseover la comparsa di una finestra esplicativa

5 Pagina con tabella Testi troppo lunghi nella seconda colonna

6 ) non richiedere eccessivi sforzi di memoria

Elimiare le informazioni secondarie

6 Pagina con tabellaLe sigle associate ai documenti

allegati possono essere di difficile interpretazione

2) il linguaggio dell'applicazione deve riflettere quello reale

Sciogliere le sigle / associare all'evento mouseover una finestra col nome

completo del documento

Rapporto Usabilità - Desktop

NUMERO PROBLEMA POSIZIONE PROBLEMA PRINCIPIO

VIOLATOPOSSIBILE

SOLUZIONE

1Homepage / Pagina con form /

Pagina con contenuti / Pagina con tabella

I link sono troppo vicini e i bottoni troppo piccoli 5) prevenire errori Aumentare distanza tra link e

dimensione bottoni

2 Homepage

Sono presenti informazioni secondarie che appesantiscono

uleriormente la visualizzazione della pagina

6) non richiedere eccessivi sforzi di memoria Eliminare contenuti secondari

3 Pagina con form / pagina con indice / pagina con contenuti

I comtenuti e i campi principali non sono valorizzati perché gran parte

dello spazio è sprecato o dedicato a box con elenchi

8) design estetico e minimalista Riorganizzare lo spazio delle pagine (es dividere i contenuti in più colonne)

4 Tutte Assenza di adattamento delle pagine al dispositivo mobile 7) flessibilità ed efficienza Creare un sito con responsive design

Rapporto Usabilità - Mobile