Corso di Laurea Magistrale in Informatica UmanisticaProgettazione di interfacce e valutazione dell’usabilità
Esercitazione 6 Valutazione dell'usabilità
Regione Umbria
Francesca Pulina e-mail: [email protected]
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
Top Related