Esercitazione di Valutazione dell'usabilità per il corso di Progettazione di Interfacce e valutazione dell'Usabilità (Università di Pisa, AA 2014/2015)

1. Corso di Laurea Magistrale in Informatica Umanistica
Progettazione di interfacce e valutazione dell’usabilità
Esercitazione 6
Valutazione dell'usabilità
Regione Umbria
Francesca Pulina
e-mail: frampy.p@hotmail.it

2. 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_Rice

3. Home page
Desktop
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.

4. Home page
Mobile
Premessa
Non 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.

5. Pagina con form
Desktop
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 re 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.

6. Pagina con form
Mobile
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.

7. Pagina con indice
Desktop
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).

8. Pagina con indice
Mobile
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 lim i n azi o n e d e i co nte n u t i
s e co n d ari ) migliorerebbe la leggibilità
della pagina, e l'utente non dovrebbe
ricorrere a scroll per la visualizzazione
completa dell'elenco.

9. Pagina con contenuti
Desktop
Coerenza
Non 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.

10. 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
co nt ro l lo d a p a rte d e ll 'u tente );
anche in questo caso, l'utente deve
ingrandire le dimensioni della pagina.

11. Pagina con tabella 1
Desktop
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.

12. Pagina con tabella 2
Desktop/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 re v e n i re e r ro r i : la visualizzazione della tabella è resa
problematica dalle sue ridotte dimensioni; idem per la compilazione del
form (vedi altre pagine Mobile)

13. NUMERO
PROBLEMA
POSIZIONE PROBLEMA
PRINCIPIO
VIOLATO
POSSIBILE
SOLUZIONE
1 Homepage / Pagina con indice
Non risulta selezionato il pulsante
corrispondente alla pagina
visualizzata
1 ) visibilità dello stato del sistema
Evidenziare 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 tabella
L'utente può cliccare sull'icona della
freccia, ma non sa che effetto avrà la
sua azione
5) 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 tabella
Le 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

14. NUMERO
PROBLEMA
POSIZIONE PROBLEMA
PRINCIPIO
VIOLATO
POSSIBILE
SOLUZIONE
1
Homepage / 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