Seconda lezione modulo Web Usability del corso per WebMaster & WebDesigner

1. Web Usability [2]
Matteo Magni

2. Jakob Nielsen
http://it.wikipedia.org/wiki/Jakob_Nielsen
E' considerato il guru
dell'usabilità. È uno
scrittore, oratore e
consulente. Ha un
dottorato in design
dell'interfaccia utente e
informatica del
Politecnico Danese.
(wikipedia)
http://www.useit.com/jakob/

3. Norman e Nielsen
• Norman è uno psicologo mentre Nielsen è un
ingegnere. Il secondo ha un approccio che
predilige le funzionalità al design.
• Per lui l'usabilità è praticità e semplicità, quindi
ogni volta che qualcuno non trova una
informazione o non riesce a concludere un compito
si sta scontrando con problemi di usabilità.

4. • Un sito Web è usabile quando soddisfa i bisogni
informativi dell'utente finale che lo sta visitando
e interrogando, fornendogli facilità di accesso e
navigabilità e consentendo un adeguato livello
di comprensione dei contenuti. Nel caso non sia
disponibile tutta l'informazione, un buon sito
demanda ad altre fonti informative.
(Michele Visciola).

5. 10 regole di Nielsen
• Dalle sue ricerche
Nielsen fa
emergere 10
principi per puntare
ad una buona
usabilità.

6. 1 - Visibility of system status
The system should always keep users
informed about what is going on, through
appropriate feedback within reasonable
time.

7. 2 - Match between system and
the real world
The system should speak the users'
language, with words, phrases and
concepts familiar to the user, rather than
system-oriented terms. Follow real-world
conventions, making information appear in
a natural and logical order.

8. 3 - User control and freedom
Users often choose system functions by
mistake and will need a clearly marked
"emergency exit" to leave the unwanted
state without having to go through an
extended dialogue. Support undo and
redo.

9. 4 - Consistency and standards
Users should not have to wonder whether
different words, situations, or actions
mean the same thing. Follow platform
conventions.

10. 5 - Error prevention
Even better than good error messages is a
careful design which prevents a problem
from occurring in the first place. Either
eliminate error-prone conditions or check
for them and present users with a
confirmation option before they commit to
the action.

11. 6 - Recognition rather than
recall
Minimize the user's memory load by
making objects, actions, and options
visible. The user should not have to
remember information from one part of the
dialogue to another. Instructions for use of
the system should be visible or easily
retrievable whenever appropriate.

12. 7 - Flexibility and efficiency of
use
Accelerators -- unseen by the novice user
-- may often speed up the interaction for
the expert user such that the system can
cater to both inexperienced and
experienced users. Allow users to tailor
frequent actions.

13. 8 - Aesthetic and minimalist
design
Dialogues should not contain information
which is irrelevant or rarely needed. Every
extra unit of information in a dialogue
competes with the relevant units of
information and diminishes their relative
visibility.

14. 9 - Help users recognize, diagnose,
and recover from errors
Error messages should be expressed in
plain language (no codes), precisely
indicate the problem, and constructively
suggest a solution.

15. 10 - Help and documentation
• Even though it is better if the system can
be used without documentation, it may be
necessary to provide help and
documentation. Any such information
should be easy to search, focused on the
user's task, list concrete steps to be
carried out, and not be too large.

16. Quindi?
Possiamo forse raggruppare tutto in tre
aree:
• Orientamento e Navigazione
• Prevenzione e gestione di errori
• Coerenza interna, aderenza agli standard
e ai vincoli del web
http://www.usabile.it/082001.htm

17. Orientamento e Navigazione
Rendere cioè disponibili e comprensibili tutti quegli strumenti che consentono
all'utente di capire immediatamente dove si trova, da dove è venuto e dove può
andare all'interno del sito web.
E' necessario presentare in maniera chiara e con nomi comprensibili le sezioni
del sito, l'indicazione del percorso delle pagine interne, usando nomi significativi
ed evitando di usare metafore poco chiare per l'utente. Bisognerebbe inoltre
strutturare l'informazione seguendo il tipo di conoscenza dell'utente, più che il
proprio, e assegnare la massima libertà di esplorazione e movimento all'utente,
con chiare indicazioni di come tornare indietro e alla pagina principale.
http://www.usabile.it/082001.htm

18. Prevenzione e Gestione di errori
senza allarmismi e con linguaggio comune. Gli errori dovrebbero prima di tutto
essere prevenuti, ci dice Nielsen, ma se ciò non fosse possibile, sarebbe necessario
offrire all'utente la possibilità di tornare sempre indietro, e dovremmo sempre
spiegare cosa sta succedendo, con un linguaggio semplice e chiaro, evitando i
messaggi tecnici del server. Ciò diventa particolarmente cruciale in caso di link
mancanti, di inserimento di dati nei form, di procedure d'acquisto e di registrazione a
servizi online, e coinvolge in prima istanza lo staff tecnico che si occupa del sito, ma
anche il progettista: le gestioni degli errori vanno comunicate con un linguaggio il più
possibile vicino all'utente finale.
http://www.usabile.it/082001.htm

19. Coerenza interna, aderenza agli
standard e ai vincoli del web
Il che significa soprattutto definire uno stile omogenero per l'intero sito, non disorientare il lettore con
cambi di carattere tipografico, dimensioni, colori e layout senza un motivo che sia prima di tutto
semantico. Come ribadisce anche Sofia Postai nel suo libro, i cambiamenti di forma dovrebbero
sempre corrispondere a cambiamenti logici, di contenuto.
Per quanto riguarda l'aderenza agli standard, io non mi soffermerei troppo sul colore del link, quanto
sul fatto che effettivamente si capisca che quello è un link e una barra dei menu.
I vincoli sono soprattutto quelli legati alla dimensione e al formato della grafica e delle pagine html,
della loro compatibilità all'indietro e dalla possibilità di essere fruite senza grossi problemi dal maggior
numero possibile di dispositivi.
http://www.usabile.it/082001.htm

20. Test Usabilità
• Testare il proprio sito
con utenti reali serve
a valutare l'usabilità di
un sito internet in
collaborazione con
chi sta eseguendo il
test
•

21. Protagonisti
• Utenti
• Esperti di usabilità
• Progettisti/sviluppa
tori

22. Obiettivi
• Valutazione
generale
dell'applicazione
• Valutazione di
elementi specifici:
Menù, carrello,
ecc..

23. Metodo [1]
Basato sul compito: Esempio:
• Si danno all'utente dei • Ricercare un
compiti specifici per contenuto
valutare il suo grado di
soddisfazione/frustrazio • Eseguire un acquisto
ne nell'eseguirli. • Registrarsi al sito
• Inviare una mail di
contatto
• ecc...

24. Metodo [2]
Basato sullo scenario: • Permette di capire
• Si stabiliscono degli scenari
d'uso per vedere lo se ci sono
scostamento tra il layout eventuali carenze
proposto dal sito e il modello
dell'utente (la sequenza con
informative nel
cui l'utente consegue modello del layout
l'obiettivo nel minor tempo e proposto.
costo possibile).

25. Il test
• Durante lo
svolgimento dei
compiti l'utilizzatore
deve cercare di
esprimere i suoi
pensieri ad alta
voce

26. Il test [2]
• L'osservatore si
occuperà si
segnare come
evolve la situazione
dell'utente nello
svolgimento dei
vari compiti
.

27. Analisi dei dati
• I riscontri ottenuti
dal test vanno
riportati e studiati
per poi tradurli in
modifiche per
l'applicazione web.

28. Facciamo dei Test?
• sosacroniro.it
• sosacroniro.com
• ....

29. Domande
Slide:
http://www.slideshare.net/ilbonzo
Code:
https://github.com/ilbonzo/Cypher
mail:
matteo@magni.me