La web usability
Esempi di euristiche
specifiche per il web
Luca Save e Francesca Rizzo - Università degli Studi di Siena
La web usability
INDICE
1. I principi di buona navigazione (Nielsen 1999)
2. I diversi tipi di link (Nielsen 1999)
3. Le convenzioni più diffuse (Krug 2000)
4. Le “leggi” molto empiriche di Krug
5. Progettare l’architettura informativa
Luca Save e Francesca Rizzo - Università degli Studi di Siena
La web usability
1. I principi di buona navigazione
Per Jackob Nielsen la struttura di navigazione di
un sito web deve aiutare l’utente nel rispondere a tre
domande:
1. Dove mi trovo?
2. Dove sono stato?
3. Dove posso andare?
Luca Save e Francesca Rizzo - Università degli Studi di Siena
La web usability
in relazione al Web
1. Principi di buona navigazione
1. Dove mi trovo?
Luca Save e Francesca Rizzo - Università degli Studi di Siena
La web usability
1. Principi di buona navigazione
1. Dove mi trovo?
in relazione alla
struttura del sito
Luca Save e Francesca Rizzo - Università degli Studi di Siena
La web usability
1. Principi di buona navigazione
nel Web
2. Dove sono stato ?
Luca Save e Francesca Rizzo - Università degli Studi di Siena
La web usability
1. Principi di buona navigazione
2. Dove sono stato ?
all’interno del sito
I link più chiari
Luca Save e Francesca Rizzo - Università degli Studi di Siena
1. Principi di buona navigazione
La web usability
3. Dove posso andare ?
A questa domanda rispondono
tre diversi tipi di link…
link topici
link
strutturali
link
associativi
Luca Save e Francesca Rizzo - Università degli Studi di Siena
La web usability
2. I diversi tipi di link
TOPICI testo sottolineato (di solito ma non sempre!) che conduce a ulteriori
informazioni riguardo all’argomento trattato
STRUTTURALI
link usati per connettere tra di loro
livelli diversi della struttura del sito.
Usati anche per connettere una data
pagina con altre allo stesso livello
gerarchico
ASSOCIATIVI link usati per indicare altre pagine dal contenuto
simile o correlato a quella attuale che l’utente
potrebbe perciò trovare interessanti
Luca Save e Francesca Rizzo - Università degli Studi di Siena
2. I diversi tipi di link
La web usability
Link strutturali
Link topici
Link associativi
Luca Save e Francesca Rizzo - Università degli Studi di Siena
La web usability
3. Le convenzioni più diffuse
La navigazione persistente
ID del sito
5 elementi che dovrebbero
sempre apparire in ogni pagina
Una via alla Home Page
Utilities
Una via per la ricerca
Le sezioni
Luca Save e Francesca Rizzo - Università degli Studi di Siena
3. Le convenzioni più diffuse
La web usability
Il “test del portabagagli”
Messi improvvisamente davanti ad una pagina nuova (non la home page!)
dobbiamo saper “rispondere” rapidamente a 6 domande:
1)
In che sito mi trovo? ID
2)
In che pagina sono? Nome della Pagina
3)
Quali sono le sezioni principali del sito? Sezioni del sito o navigazione primaria
4)
Quali opzioni ho a disposizione a questo livello? Navigazione locale
5)
Dove mi trovo nella struttura generale del sito? Indicazioni “voi siete qui”
6)
Come posso effettuare una ricerca? Campo ricerca
Luca Save e Francesca Rizzo - Università degli Studi di Siena
3. Le convenzioni più diffuse
La web usability
Il “test del portabagagli”
Sezioni
Voi siete qui
ID
Ricerca
Nome della pagina
Navigazione locale
Luca Save e Francesca Rizzo - Università degli Studi di Siena
La web usability
3. Le convenzioni più diffuse
Cosa distingue la home page dalle altre pagine:
HOME
deve mettere in evidenza l’identità del sito (ID)
deve comunicare un quadro d’insieme (facendo dei compromessi!)
ed esporre la mission del sito in modo chiaro e sintetico
(WELCOME BLURB)
dovrebbe avere una TAGLINE ben progettata (solo i
più famosi possono farne a meno!)
può avere un diverso orientamento delle sezioni e del testo,
ma senza modificare i nomi e l’ordine delle sezioni (consistency)
Luca Save e Francesca Rizzo - Università degli Studi di Siena
La web usability
3. Le convenzioni più diffuse
Cosa distingue la home page dalle altre pagine:
L’identità del sito (ID)
…Il logo (ID) in
evidenza, insieme ai
valori e alla storia che
esso esprime
Luca Save e Francesca Rizzo - Università degli Studi di Siena
La web usability
3. Le convenzioni più diffuse
Cosa distingue la home page dalle altre pagine:
L’identità del sito (ID)
…Il logo (ID) in
evidenza, insieme ai
valori e alla storia che
esso esprime
Luca Save e Francesca Rizzo - Università degli Studi di Siena
La web usability
3. Le convenzioni più diffuse
Cosa distingue la home page dalle altre pagine:
L’identità del sito (ID)
…Il logo (ID) in
evidenza, insieme ai
valori e alla storia che
esso esprime
Luca Save e Francesca Rizzo - Università degli Studi di Siena
La web usability
3. Le convenzioni più diffuse
Cosa distingue la home page dalle altre pagine:
L’identità del sito (ID)
…Il logo (ID) in
evidenza, insieme ai
valori e alla storia che
esso esprime
Luca Save e Francesca Rizzo - Università degli Studi di Siena
La web usability
3. Le convenzioni più diffuse
Cosa distingue la home page dalle altre pagine:
IL WELCOM BLURB
…poche righe per
spiegare chi siamo,
cosa facciamo, che
obiettivi abbiamo
(mission)
Luca Save e Francesca Rizzo - Università degli Studi di Siena
La web usability
3. Le convenzioni più diffuse
Cosa distingue la home page dalle altre pagine:
IL WELCOM BLURB
…poche righe per
spiegare chi siamo,
cosa facciamo, che
obiettivi abbiamo
(mission)
Luca Save e Francesca Rizzo - Università degli Studi di Siena
La web usability
3. Le convenzioni più diffuse
Cosa distingue la home page dalle altre pagine:
La TAGLINE
…poche parole (!) vicino all’ID
per mettere immediatamente in relazione chi siamo (ID) e cosa facciamo (mission)
Luca Save e Francesca Rizzo - Università degli Studi di Siena
La web usability
3. Le convenzioni più diffuse
Cosa distingue la home page dalle altre pagine:
La TAGLINE
…poche parole (!) vicino all’ID
per mettere immediatamente in relazione chi siamo (ID) e cosa facciamo (mission)
Luca Save e Francesca Rizzo - Università degli Studi di Siena
La web usability
3. Le convenzioni più diffuse
Cosa distingue la home page dalle altre pagine:
La TAGLINE
…poche parole (!) vicino all’ID
per mettere immediatamente in relazione chi siamo (ID) e cosa facciamo (mission)
Luca Save e Francesca Rizzo - Università degli Studi di Siena
La web usability
3. Le convenzioni più diffuse
Cosa distingue la home page dalle altre pagine:
Nella home page i link strutturali (sezioni) possono essere disposti in
modo diverso rispetto a tutte le altre pagine (navigazione persistente)…
Home
page
Luca Save e Francesca Rizzo - Università degli Studi di Siena
La web usability
3. Le convenzioni più diffuse
Cosa distingue la home page dalle altre pagine:
Nella home page i link strutturali (sezioni) possono essere disposti in
modo diverso rispetto a tutte le altre pagine (navigazione persistente)…
Pagina
interna
Luca Save e Francesca Rizzo - Università degli Studi di Siena
La web usability
3. Le convenzioni più diffuse
Cosa distingue la home page dalle altre pagine:
…ma senza modificare i
nomi e l’ordine delle
sezioni (consistency)
Luca Save e Francesca Rizzo - Università degli Studi di Siena
La web usability
4. Le “leggi” molto empiriche di Krug
LEGGE PRIMA
Non farmi pensare…
LEGGE SECONDA
Non importa quanti click devo fare, se ogni click è frutto di
una scelta che non richiede impegno e che non è
ambigua…
LEGGE TERZA
Sbarazzati della metà delle parole di ogni pagina e poi
sbarazzati della metà di quello che resta…
Luca Save e Francesca Rizzo - Università degli Studi di Siena
La web usability
4. Le “leggi” molto empiriche di Krug
Luca Save e Francesca Rizzo - Università degli Studi di Siena
La web usability
5. Progettare l’architettura informativa
L’architettura informativa “comunica” la relazione tra i
contenuti di un sito web e il modo in cui questi sono
espressi.
Aiuta a capire come si
utilizza il sito.
Rende accessibili e quindi
più comprensibili i suoi
contenuti informativi.
Luca Save e Francesca Rizzo - Università degli Studi di Siena
La web usability
5. Progettare L’architettura informativa
Tre strutture di base
1) Lineare
Una pagina dopo l’altra.
Struttura adatta per costruire funzioni
vincolanti: se, ad esempio, l’informazione
A deve essere conosciuta prima della B,
e la B prima della C, si crea un accesso
lineare da A a C.
Luca Save e Francesca Rizzo - Università degli Studi di Siena
La web usability
5. Progettare L’architettura informativa
Tre strutture di base
2) Gerarchica
Più percorsi mutuamente esclusivi
Adatta ad evidenziare le relazioni
insieme/sotto insieme
Consente movimenti top-down /
bottom-up.
Luca Save e Francesca Rizzo - Università degli Studi di Siena
La web usability
5. Progettare L’architettura informativa
Tre strutture di base
3) A ragnatela
Pagine collegate in modo da permettere
riferimenti incrociati e salti avanti/indietro.
Struttura che esalta le potenzialità dei
sistemi interattivi.
Ma più la ragnatela è complessa, più
aumentano le difficoltà di orientamento
per l’utente.
Luca Save e Francesca Rizzo - Università degli Studi di Siena
La web usability
5. Progettare L’architettura informativa
Tre strutture di base
Molte altre strutture possibili: parallela, a matrice, a
sovrapposizione, a zoom, ecc. I siti web si basano di solito su una
combinazione di varie strutture.
Quello che conta è che la struttura sia progettata deliberatamente,
tenendo conto del tipo di fruizione dei contenuti che si ritiene più
adatto per l’utente.
Ogni volta che si aggiungono nuovi contenuti bisogna valutare la loro
coerenza rispetto all’architettura complessiva del sito. Trovare una
collocazione adatta o riprogettare l’architettura stessa.
Luca Save e Francesca Rizzo - Università degli Studi di Siena
5. Progettare L’architettura informativa
La web usability
Lo scenario di Krug:
E’ Sabato pomeriggio e state entrando in un centro commerciale per
comprare una motosega:
Vi trovate di fronte a tre reparti…
UTENSILI
CASALINGHI
PRATO E
GIARDINO
Dove sono le motoseghe?
Luca Save e Francesca Rizzo - Università degli Studi di Siena
La web usability
5. Progettare L’architettura informativa
Lo scenario di Krug:
Seguendo il vostro intuito provate a vedere se la motosega si trova
sotto UTENSILI…
…nel reparto utensili guardate i cartelli alla fine di ogni corsia…
UTENSILI
A MOTORE
UTENSILI
MANUALI
SMERIGLIARE
E LEVIGARE
…nella corsia UTENSILI A MOTORE cercate la
motosega e la trovate.
Luca Save e Francesca Rizzo - Università degli Studi di Siena
5. Progettare L’architettura informativa
La web usability
Lo scenario di Krug:
Se la vostra scelta fosse stata PRATO E GIARDINO sareste stati
costretti a tornare indietro…
UTENSILI
UTENSILI
A MOTORE
UTENSILI
MANUALI
CASALINGHI
PRATO E
GIARDINO
SMERIGLIARE
E LEVIGARE
Luca Save e Francesca Rizzo - Università degli Studi di Siena
La web usability
5. Progettare L’architettura informativa
Un’organizzazione gerarchica dell’informazione impone di visitare
prima una categoria e quindi la seconda, nel caso in cui non riusciate
a trovare l’elemento desiderato.
HOME
UTENSILI
UTENSILI
A MOTORE
UTENSILI
MANUALI
CASALINGHI
PRATO E
GIARDINO
SMERIGLIARE
E LEVIGARE
Luca Save e Francesca Rizzo - Università degli Studi di Siena
5. Progettare L’architettura informativa
La web usability
Un’organizzazione a ragnatela consente invece una molteplicità di percorsi
possibili. Progettando l’architettura di un sito web si possono sfruttare queste
potenzialità, ma bisogna mantenere un modello concettuale coerente,
evitando che l’utente si smarrisca.
CASALINGHI
HOME
Utensili per cucina
Smerigliare e levigare
Utensili a manuali
Utensili a motore
UTENSILI
PRATO E
GIARDINO
Utensili per il giardino
•motosega
•tagliaerba
• ecc…
Luca Save e Francesca Rizzo - Università degli Studi di Siena