PowerPoint Presentation - Web Usability

1
La web usability
Esempi di euristiche specifiche per il web
2
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 larchitettura informativa

3
La web usability
1. I principi di buona navigazione
4
La web usability
1. Principi di buona navigazione

1. Dove mi trovo?

5
La web usability
1. Principi di buona navigazione

1. Dove mi trovo?

6
La web usability
1. Principi di buona navigazione
2. Dove sono stato ?
7
La web usability
1. Principi di buona navigazione
2. Dove sono stato ?
8
La web usability
1. Principi di buona navigazione
3. Dove posso andare ?
9
La web usability
2. I diversi tipi di link
TOPICI
STRUTTURALI
ASSOCIATIVI
10
La web usability
2. I diversi tipi di link
11
La web usability
3. Le convenzioni più diffuse
12
La web usability
3. Le convenzioni più diffuse
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

13
La web usability
3. Le convenzioni più diffuse
14
La web usability
3. Le convenzioni più diffuse
Cosa distingue la home page dalle altre pagine
HOME
deve mettere in evidenza lidentità del sito (ID)
deve comunicare un quadro dinsieme (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 lordine
delle sezioni (consistency)
15
La web usability
3. Le convenzioni più diffuse
Cosa distingue la home page dalle altre pagine
Lidentità del sito (ID)
Il logo (ID) in evidenza, insieme ai valori e
alla storia che esso esprime
16
La web usability
3. Le convenzioni più diffuse
Cosa distingue la home page dalle altre pagine
Lidentità del sito (ID)
Il logo (ID) in evidenza, insieme ai valori e
alla storia che esso esprime
17
La web usability
3. Le convenzioni più diffuse
Cosa distingue la home page dalle altre pagine
Lidentità del sito (ID)
Il logo (ID) in evidenza, insieme ai valori e
alla storia che esso esprime
18
La web usability
3. Le convenzioni più diffuse
Cosa distingue la home page dalle altre pagine
Lidentità del sito (ID)
Il logo (ID) in evidenza, insieme ai valori e
alla storia che esso esprime
19
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)
20
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)
21
La web usability
3. Le convenzioni più diffuse
Cosa distingue la home page dalle altre pagine
La TAGLINE
poche parole (!) vicino allIDper mettere
immediatamente in relazione chi siamo (ID) e cosa
facciamo (mission)
22
La web usability
3. Le convenzioni più diffuse
Cosa distingue la home page dalle altre pagine
La TAGLINE
poche parole (!) vicino allIDper mettere
immediatamente in relazione chi siamo (ID) e cosa
facciamo (mission)
23
La web usability
3. Le convenzioni più diffuse
Cosa distingue la home page dalle altre pagine
La TAGLINE
poche parole (!) vicino allIDper mettere
immediatamente in relazione chi siamo (ID) e cosa
facciamo (mission)
24
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
25
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
26
La web usability
3. Le convenzioni più diffuse
Cosa distingue la home page dalle altre pagine
ma senza modificare i nomi e lordine delle
sezioni (consistency)
27
La web usability
4. Le leggi molto empiriche di Krug
LEGGE PRIMANon farmi pensare LEGGE SECONDANon
importa quanti click devo fare, se ogni click è
frutto di una scelta che non richiede impegno e
che non è ambigua LEGGE TERZASbarazzati della
metà delle parole di ogni pagina e poi sbarazzati
della metà di quello che resta
28
La web usability
4. Le leggi molto empiriche di Krug
29
La web usability
5. Progettare larchitettura informativa
Aiuta a capire come si utilizza il sito. Rende
accessibili e quindi più comprensibili i suoi
contenuti informativi.
30
La web usability
5. Progettare Larchitettura informativa
Tre strutture di base
1) Lineare
Una pagina dopo laltra.Struttura adatta per
costruire funzioni vincolanti se, ad esempio,
linformazione A deve essere conosciuta prima
della B, e la B prima della C, si crea un accesso
lineare da A a C.
31
La web usability
5. Progettare Larchitettura informativa
Tre strutture di base
2) Gerarchica
Più percorsi mutuamente esclusivi Adatta ad
evidenziare le relazioni insieme/sotto
insiemeConsente movimenti top-down / bottom-up.
32
La web usability
5. Progettare Larchitettura informativa
Tre strutture di base
3) A ragnatela
Pagine collegate in modo da permettere
riferimenti incrociati e salti avanti/indietro.S
truttura che esalta le potenzialità dei sistemi
interattivi.Ma più la ragnatela è complessa,
più aumentano le difficoltà di orientamento per
lutente.
33
La web usability
5. Progettare Larchitettura 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 lutente.
Ogni volta che si aggiungono nuovi contenuti
bisogna valutare la loro coerenza rispetto
allarchitettura complessiva del sito. Trovare
una collocazione adatta o riprogettare
larchitettura stessa.
34
La web usability
5. Progettare Larchitettura informativa
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
PRATO E GIARDINO
UTENSILI
CASALINGHI
Dove sono le motoseghe?
35
La web usability
5. Progettare Larchitettura 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.
36
La web usability
5. Progettare Larchitettura informativa
Lo scenario di Krug
Se la vostra scelta fosse stata PRATO E GIARDINO
sareste stati costretti a tornare indietro
PRATO E GIARDINO
UTENSILI
CASALINGHI
UTENSILI A MOTORE
UTENSILI MANUALI
SMERIGLIARE E LEVIGARE
37
La web usability
5. Progettare Larchitettura informativa
Unorganizzazione gerarchica dellinformazione
impone di visitare prima una categoria e quindi
la seconda, nel caso in cui non riusciate a
trovare lelemento desiderato.
HOME
PRATO E GIARDINO
UTENSILI
CASALINGHI
UTENSILI A MOTORE
UTENSILI MANUALI
SMERIGLIARE E LEVIGARE
38
La web usability
5. Progettare Larchitettura informativa
Unorganizzazione a ragnatela consente invece una
molteplicità di percorsi possibili. Progettando
larchitettura di un sito web si possono
sfruttare queste potenzialità, ma bisogna
mantenere un modello concettuale coerente,
evitando che lutente si smarrisca.
CASALINGHI
HOME
Utensili per cucina
UTENSILI
PRATO E GIARDINO
Smerigliare e levigare
Utensili per il giardino
Utensili a manuali

• motosega
• tagliaerba
• ecc

Utensili a motore