Lezione 8 (stampa)

Lezione 8
Richiamo progettazione
Fasi della progettazione
Specifica dei requisiti
Progettazione di siti web
a.a. 2015/16
Usabilità
Maria Simi
Aprile, 2016
Web design
- Progetto della struttura di navigazione
- Progetto della struttura delle pagine
Progetto grafico
Usabilità uno dei criteri di qualità (quello centrale)
Progettare per l’usabilità
Progettare per l’utente
[Veen, Krug, Nielsen]
Nielsen]
Che cos’è l’usabilità?
L' usabilità è l' "efficacia, efficienza e grado di soddisfazione
con cui uno specifico insieme di utenti possono svolgere un
insieme di compiti in un certo contesto" (ISO).
L'usabilità riguarda l'esperienza dell'utente con il sito (UX
- User eXperience)
Progettare per l'usabilità vuol dire progettare siti Web
che sono semplici, funzionali e facili da usare.
La prima legge dell'usabilità secondo Steve Krug [Krug] è
Don't make me think!
Altri aspetti (coerenza dell'interfaccia, navigabilità,
trovabilità, concisione ...) sono visti come modi per
raggiungere questo obiettivo.
Progetto “centrato sull’utente”
Gli utenti sono coinvolti dall’inizio e in tutte le fasi
Gli obiettivi del committente devono essere bilanciati
con le esigenze degli utenti
Domande da porsi
Chi sono gli utenti del sito web e quali sono il loro obiettivi?
Quali sono le informazioni e le funzioni di cui gli utenti hanno bisogno?
in quale forma?
Come gli utenti pensano che il sito dovrebbe funzionare e qual è la loro
esperienza d’uso del web?
Che hardware e software possiede la maggioranza degli utenti per
accedere al sito?
1 di 8
Perché è importante
Gli utenti del Web sono in gran parte utenti occasionali,
non esperti
In Internet la concorrenza è sempre soltanto a un clic di
distanza (On
(On the Internet the competition is always just one
click away):
away): è talmente facile navigare e la scelta così
ampia, che se gli utenti sono confusi o frustrati se ne
vanno a navigare da un'altra parte
Una delle risorse più preziose nell'economia di Internet
è l'attenzione dell'utente
Il pulsante più usato è ...
il pulsante BACK!
Aspetti dell' usabilità
Efficacia:: il successo dell’utente nel trovare informazione
Efficacia
e svolgere compiti
Efficienza:: velocità dell’utente nel raggiungere i suoi
Efficienza
obiettivi
Soddisfazione:: grado di soddisfazione, confort nell’uso
Soddisfazione
Tolleranza agli errori:
errori: frequenza e gravità degli errori
Apprendimento:: l’uso del sito da parte di un utente
Apprendimento
migliora col tempo?
Lezione 8
Strategie per l’usabilità
Esempi di regole euristiche
Regole euristiche ricavate dagli studi degli esperti
Coerenza dell’ interfaccia
Ricerca sugli utenti: identificare e conoscere gli utenti
Reattività (feedback): ad ogni azione deve corrispondere
una reazione
Interviste (on site, surveys, individuali)
Focus group
Analisi dei task: Cosa faranno? Come?
Personaggi (personas): personaggio fittizio che rappresenta un
gruppo di utenti
Scenari d’uso da parte di utenti con obiettivi specifici
Obiettivi di usabilità misurabili
Coerenza dell’interfaccia
Principio cardine dell’usabilità, dal Mackintosh in poi
Uno stesso comando, una stessa icona, una stessa voce
di menù ha la stessa funzione in tutti i contesti.
Si impara una volta e si usa dovunque.
Quando si impara a guidare si impara a guidare ogni
macchina ...
Specifiche del web: navigabilità e trovabilità
navigabilità:: la facilità in cui si reperiscono informazioni navigando in
navigabilità
un sito
trovabilità:: la capacità di un'informazione, risorsa od oggetto di
trovabilità
essere localizzabile o fruibile.
Usabilità dei contenuti web
Il contesto del web
Il mondo dell’editoria ha regole molto solide. Il Web è
giovane ma ha già un suo “contesto” e le sue regole.
Coerenza esterna:
esterna: le aspettative che l’utente deriva dalla
conoscenza del Web
Coerenza interna:
interna: consistenza nella grafica e nella
navigazione
Un vantaggio per l'utente ma anche per il progettista,
che
può fare affidamento su soluzioni collaudate
può concentrarsi su aspetti più creativi o sui contenuti
Esempi di convenzioni e aspettative
Stile dei collegamenti
testo in azzurro sottolineato, manina “on-mouse-over”
viola o rossastro per i link visitati
il colore può essere cambiato, la sottolineatura può essere tolta
Importante: non sottolineare testo che non è un link
Uso di frecce per la navigazione
freccia a destra: "continua", "successivo", "avanti"
freccia a sinistra: "indietro"
freccia in alto: "sopra"
freccia in basso: "sotto" in una qualche gerarchia
Metafore efficaci: carrelli nel commercio elettronico
2 di 8
Modelli mentali, mappe mentali
Il sito ha successo se si adegua al modello mentale
dell’utente
Il modello mentale può essere esteso, ma con cautela e
coerenza
Rompere le convenzioni disorienta, demolisce la fiducia:
bisogna avere un buon motivo per farlo
Mappe mentali:
mentali: modello della struttura del sito come
risultato della navigazione
I link interni alla pagina possono disorientare
Lezione 8
Esempi di euristiche di usabilità
Un test di usabilità euristico consiste nel rispondere alle
seguenti tre domande:
Pagina a tre pannelli
I tre pannelli servono a
rispondere alle tre domande
Dove sono?:
sono?: possibilità di localizzazione anche entrando "da porte
secondarie".
identità
Che cosa c'è qui?:
qui?: comprensione del contenuto.
contenuto
navigazione
Dove posso andare?:
andare?: capire la struttura di navigazione.
Schemi di progetto
Percorsi di briciole
Design pattern:
pattern: soluzioni generali a problemi molto
diffusi che possono essere riutilizzate e adattate
Ispirati da Christopher Alexander, un architetto
Pattern:: una regola con tre parti che esprime una relazione tra un
Pattern
contesto,
contesto, un problema e una soluzione
Problemi ricorrenti. Soluzione astratta e riutilizzabile.
Un processo di progettazione guidato da un linguaggio
di “pattern” si può adattare anche al Web
Ian Graham, “Web patterns for usability”
Interfaccia di ricerca
Check box?
Bottone radio?
Menù a discesa?
3 di 8
Esempi
Elettronica > Foto > macchine digitali
Ristoranti > Etnici > Cinesi > Cantonesi
Contesto: siti con cataloghi gerarchici
Dove collocarli?
Che simbolo usare?
Ultime tendenze per le form
Gli ingredienti: una text-box, delle opzioni, un bottone
Quanto grande la text-box?
Dove scrivo 'cerca'?
Il bottone vai è necessario?
I percorsi di argomenti (percorsi di briciole) sono
strumenti di navigazione molto efficaci per siti con una
strutturazione gerarchica degli argomenti.
Lezione 8
Uso dei tab
Copiare o creare?
I tab sono molto efficaci nel suddividere il sito in
prospettive.
Giusto compromesso tra usare schemi che già
funzionano e a cui gli utenti sono abituati e innovazione
Analogia con gli schedari di una volta
Per rompere le regole bisogna conoscerle
Alcuni esempi:
Non essere troppo rigidi con l’applicazione delle regole
di usabilità
Amazon
Sloan
Usabilità secondo Jacob Nielsen
Jacob Nielsen è considerato il guru dell’usabilità
Tensione tra Jacob Nielsen e i creativi.
Usabilità delle pagine
La cosa più importante sono i contenuti
Nielsen Norman Group
no allo spazio sprecato
Nel suo libro [Nielsen]:
no alle cose inutili
no ad un utilizzo non ottimale della finestra del browser
- lo spazio 'above
'above the folder'
folder' è prezioso
Usabilità delle pagine
Usabilità dei contenuti
Usabilità della navigazione
Differenza con le interfacce grafiche tradizionali
la sfida è fare pagine che si adattino ai diversi media
che occupino al meglio lo spazio disponibile sullo schermo
misure percentuali migliori di misure fisse
la frase "ottimizzato per uno schermo 800x600" (best viewed with ...)
è da evitare
Tempi di risposta
Il caricamento lento è uno dei peccati mortali del Web
secondo Siegel
Tempi di risposta
< 1 sec; pagine di 30-40 KB (comprese immagini)
tempi prevedibili: uniformi e annunciati
uso cauto della grafica e della multimedialità
caricamento parziale (ALT, WIDTH, HEIGHT su immagini e tabelle)
Dimensione pagina: somma delle dimensioni di tutti i file
coinvolti
HTTP 1.1 connessioni keep-alive (viene mantenuta aperta la
connessione)
4 di 8
Link
Tipi di link
Link strutturali (di navigazione)
Link associativi (approfondimento di contenuti)
Link ad altri siti
Suggerimenti
testo del link non troppo lungo (< 80 caratteri)
testo significativo (evitare “clicca qui”)
testo supplementare che spiega cosa si troverà
usare TITLE
- per nome del sito di destinazione
- sezione diversa del sito
- avvertimenti (se necessaria registrazione, lingua ...)
Lezione 8
Ancora sui link
Il colore dei link
colore azzurro per link non visitati
colore violetto o rossastro per i link già visitati
colore diverso per link in uscita dal sito? hover diverso?
Link in ingresso
sono un valore
le pagine devono essere permanenti
le pagine devono avere contenuti specifici e approfondimenti
Usabilità dei contenuti
Lo stile dei testi è importante
Un titolo o link scadente può costare a una azienda 10
milioni
5 secondi in più per interpretarlo
10% cliccano anche se non interessati
30 secondi per capire che la cosa non interessa
10.000 dipendenti a 100.000 lire l’ora
Può servire capire come la gente usa il Web ...
richieste di abbonamento e registrazioni sono ostacoli ai link in
ingresso
Come gli utenti usano il Web [Krug]
Come gli utenti usano il Web (eye
(eye
tracking))
tracking
Scrivere per il Web
Scrivere per il Web
Bisogna essere estremamente succinti e diretti
25% più lento leggere
50% più succinto
Vietate le lunghe spiegazioni
Limitare l’uso della barra di scorrimento
Titoli significativi
Usati dai motori di ricerca
Vanno nei “favoriti”
devono essere ancora significativi se decontestualizzati
5 di 8
Un paragrafo un’idea
Principio della piramide capovolta
il contenuto più importante all’inizio della pagina
i link importanti nella prima schermata
Ipertesti, non testi lineari suddivisi su più pagine
Pagine brevi, uso limitato della barra di scorrimento
Linee brevi
Flusso principale
Approfondimenti
cose che interessano solo alcuni utenti
Lezione 8
Un esempio
Prima della cura
Il seguente questionario è stato realizzato con lo
scopo di fornirci informazioni che ci aiuteranno a
migliorare il sito e renderlo più rispondente alle
nostre esigenze.
Per favore, selezionate le vostre risposte dai
menù a discesa o spuntando le apposite caselle
mostrate sotto.
Saranno necessari solo 2-3 minuti per
completare il questionario.
In fondo al modulo potete scegliere di lasciare il
vostro nome, indirizzo e numero di telefono. Se
lasciate il vostro nome e numero potrete essere
contattati in futuro per partecipare ad un
sondaggio per aiutarci a migliorare il sito.
Se avete commenti o dubbi che richiedono una
risposta per favore contattate il servizio clienti.
Leggibilità
Dopo la cura
Per favore, aiutaci a migliorare il
sito rispondendo a queste
domande. Dovrebbero essere
sufficienti 2-3 minuti per
completare il questionario.
Se hai commenti o dubbi che
richiedono una risposta, per
favore contatta il servizio clienti.
clienti.
Usabilità della navigazione
Le domande a cui rispondere sono tre:
Dove mi trovo?
- Logo in ogni pagina, struttura di navigazione ripetuta, percorso di
briciole
Grafica di sfondo non invasiva
Caratteri non troppo piccoli
EVITARE TUTTO MAIUSCOLO: PIÙ LENTO DA LEGGERE
Per approfondimenti vedi il sito Il mestiere di scrivere di
Luisa Carrada
Strumenti per la navigazione
Strumenti offerti dai browser
Link visitati di recente
Back
Segnalibri
Dove sono stato?
- bottone back e link rossastri
Mappa del sito
Dove posso andare?
- link topici: ulteriori informazioni
- link strutturali: un livello sopra, pagina successiva ...
- link associativi: contenuti simili
Motori di ricerca
La struttura del sito deve essere progettata per la semplicità di
navigazione e non caotica
Architettura dell’informazione
Il progetto della struttura di un sito è il dominio
dell’Architettura dell'informazione (AI)
L’architetto dell’informazione è colui che
organizza i contenuti ossrvando le strutture ricorrenti presenti nei
dati, mette ordine nel caos, rende semplice trovare le informazioni
sono richiesti metodi efficaci e intuitivi di classificazione
analizza i contenuti e le esigenze degli utenti e trovare una
corrispondenza
Diversi paradigmi
Classificazioni gerarchiche enumerative
Classificazioni a faccette
Folksonomie
6 di 8
Colori di sfondo in contrasto
Navigazione contrapposta a ricerca
raggiungibile da ogni pagina del sito
presentazione dei risultati
… ne parleremo a proposito di promozione
Gerarchie
Quando l’informazione è complessa bisogna costruire
un sistema di classificazione (tassonomia): categorie di
oggetti, sezioni di un sito web ...
Una gerarchia è un modo comune di organizzare una
tassonomia; bisogna dare nomi intuitivi alle categorie
(etichette)
Un unico schema può non essere soddisfacente nel
web:
Al "catalogo" possono sovrapporsi criteri geografici, distinzioni
sull'utenza, esigenze di popolarità, di freschezza dell'informazione ...
Gli schemi di classificazione studiati negli anni in ambito
bibliotecario sono inadeguati: pensati per i libri, chiusi, non
estendibili
Lezione 8
Alternative
Classificazione a faccette
Metodo introdotto da Ranganathan (1933)
Descrizione degli oggetti attraverso loro caratteristiche (faccette)
Ogni faccetta è indipendente dalle altre
Folksonomy
Tagging collaborativo o sociale
Tag clouds per mettere in evidenza i tag più popolari
Card sorting
Un metodo empirico che prevede di coinvolgere gli utenti nell’organizzare
l’informazione in un sito web, in modo per loro chiaro
Si chiede di raggruppare i contenuti per somiglianza in gruppi o categorie
Card sorting chiuso:
chiuso: le categorie sono fissate (classificazione)
Card sorting aperto:
aperto: oltre a raggruppare si chiede anche di dare un nome alle categorie
(clustering)
Come procedere
Predisporre le carte, una carta per ogni tipo di contenuto (50)
In una sessione di card sorting ciascun utente raggruppa le carte in gruppi e poi dà loro un nome
[motivando le scelte ad alta voce]
Analisi dei dati
Esistono strumenti in rete
Per saperne di più Donna Spencer
Valutazione di usabilità
Valutazione euristica
Test di usabilità con gli utenti
Test early. Test often.
compiuta da esperti, senza utenti, sulla base di principii e
dell’esperienza
Gli utenti devono essere rappresentanti tipici delle
categorie a cui è rivolto il sito
Linee guida e liste di controllo
Avranno dei compiti da svolgere
Simulazione cognitive (cognitive walk-throughs)
test con gli utenti
Think aloud:
aloud: mentre interagiscono con il sito
commentano e vengono registrati
gli utenti svolgono compiti specifici
Test di compito e test di scenario
gli esperti osservano, registrano
I problemi individuati dagli esperti non coincidono
normalmente con i problemi degli utenti
Esempi di test di compito (task)
Agenzia di viaggio
Registrati sul sito
Ricerca nel catalogo un viaggio a Cuba di una settimana, con
partenza il 24 dicembre
Scegli l’albergo più economico e richiedi disponibilità posti e
preventivo per 2 persone
Accedi alla tua scheda personale e modifica indirizzo
7 di 8
Esempio di test di scenario
I task elementari non vengono esplicitamente indicati,
ma si descrive un obiettivo più generale
Agenzia di viaggio
Organizza una settimana al mare per te e tua moglie, in una località
tropicale, durante le vacanze di Natale. Pertenza dopo il 22
dicembre, ritorno entro il 10 gennaio. Spesa complessiva non
eccessiva: entro i 2500 euro tutto compreso. Siete entrambi
appassionati di pesca subacquea e preferireste un villaggio vacanze
vicino al mare ma non troppo lontano da un centro abitato per fare
shopping. Trovate nel sito una soluzione soddisfacente, con
disponibilità di posti liberi.
Lezione 8
Test con gli utenti costosi?
Conclusioni
La conduzione richiede un po’ di esperienza
Progettare per l'usabilità
Gli utenti dove li trovo? Vanno pagati? Quanti ne
servono? Nielsen ci dice che …
Pensare agli utenti tipici e a come questi usano il sito
Design pattern efficaci
Una serie di regole euristiche scaturite dagli studi di
usabilità
Test con utenti reali
Per saperne di più ...
Libro di Nielsen "Web Usability", Apogeo 2000.
Guide di Luca Rosati
www.usabile.it
8 di 8