Upload
fulvia-massaro
View
226
Download
0
Embed Size (px)
Citation preview
Luca Save e Francesca Rizzo - Università degli Studi di Siena
La web usability
Esempi di euristiche specifiche per il web
Luca Save e Francesca Rizzo - Università degli Studi di Siena
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
La web usability
Luca Save e Francesca Rizzo - Università degli Studi di Siena
La web usability
1. I principi di buona navigazione
1. Dove mi trovo?
2. Dove sono stato?
3. Dove posso andare?
Per Jackob Nielsen la struttura di navigazione di un sito web deve aiutare l’utente nel rispondere a tre domande:
Luca Save e Francesca Rizzo - Università degli Studi di Siena
La web usability 1. Principi di buona navigazione
1. Dove mi trovo?in relazione al Web
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
2. Dove sono stato ?nel Web
Luca Save e Francesca Rizzo - Università degli Studi di Siena
all’interno del sito
La web usability 1. Principi di buona navigazione
2. Dove sono stato ?
I link più chiari
Luca Save e Francesca Rizzo - Università degli Studi di Siena
La web usability 1. Principi di buona navigazione
3. Dove posso andare ?A questa domanda rispondono tre diversi tipi di link…
link topici
link associativi
link strutturali
Luca Save e Francesca Rizzo - Università degli Studi di Siena
La web usability
2. I diversi tipi di link
TOPICI
STRUTTURALI
ASSOCIATIVI link usati per indicare altre pagine dal contenuto simile o correlato a quella attuale che l’utente potrebbe perciò trovare interessanti
testo sottolineato (di solito ma non sempre!) che conduce a ulteriori
informazioni riguardo all’argomento trattato
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
Luca Save e Francesca Rizzo - Università degli Studi di Siena
2. I diversi tipi di linkLa web usability
Link associativi
Link strutturali
Link topici
Luca Save e Francesca Rizzo - Università degli Studi di Siena
La web usability
3. Le convenzioni più diffuse
5 elementi che dovrebbero sempre apparire in ogni pagina
La navigazione persistente
ID del sito Una via alla Home Page
Le sezioni
Utilities
Una via per la ricerca
Luca Save e Francesca Rizzo - Università degli Studi di Siena
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
3. Le convenzioni più diffuseLa web usability
Il “test del portabagagli”
Luca Save e Francesca Rizzo - Università degli Studi di Siena
ID Sezioni
Nome della pagina
Navigazione locale
Voi siete qui
Ricerca
3. Le convenzioni più diffuseLa web usability
Il “test del portabagagli”
Luca Save e Francesca Rizzo - Università degli Studi di Siena
3. Le convenzioni più diffuse
Cosa distingue la home page dalle altre pagine:
La web usability
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)
HOME
Luca Save e Francesca Rizzo - Università degli Studi di Siena
3. Le convenzioni più diffuse
Cosa distingue la home page dalle altre pagine:
La web usability
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
3. Le convenzioni più diffuse
Cosa distingue la home page dalle altre pagine:
La web usability
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
3. Le convenzioni più diffuse
Cosa distingue la home page dalle altre pagine:
La web usability
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
3. Le convenzioni più diffuse
Cosa distingue la home page dalle altre pagine:
La web usability
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
3. Le convenzioni più diffuseLa web usability
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
3. Le convenzioni più diffuseLa web usability
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
3. Le convenzioni più diffuseLa web usability
Cosa distingue la home page dalle altre pagine:
La TAGLINE
…poche parole (!) vicino all’IDper mettere immediatamente in relazione chi siamo (ID) e cosa facciamo (mission)
Luca Save e Francesca Rizzo - Università degli Studi di Siena
3. Le convenzioni più diffuseLa web usability
Cosa distingue la home page dalle altre pagine:
La TAGLINE
…poche parole (!) vicino all’IDper mettere immediatamente in relazione chi siamo (ID) e cosa facciamo (mission)
Luca Save e Francesca Rizzo - Università degli Studi di Siena
3. Le convenzioni più diffuseLa web usability
Cosa distingue la home page dalle altre pagine:
La TAGLINE
…poche parole (!) vicino all’IDper mettere immediatamente in relazione chi siamo (ID) e cosa facciamo (mission)
Luca Save e Francesca Rizzo - Università degli Studi di Siena
3. Le convenzioni più diffuseLa web usability
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
3. Le convenzioni più diffuseLa web usability
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
3. Le convenzioni più diffuseLa web usability
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
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…
La web usability
4. Le “leggi” molto empiriche di Krug
Luca Save e Francesca Rizzo - Università degli Studi di Siena
4. Le “leggi” molto empiriche di KrugLa web usability
Luca Save e Francesca Rizzo - Università degli Studi di Siena
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.
La web usability
Luca Save e Francesca Rizzo - Università degli Studi di Siena
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.
La web usability 5. Progettare L’architettura informativa
Luca Save e Francesca Rizzo - Università degli Studi di Siena
2) Gerarchica
Più percorsi mutuamente esclusivi
Adatta ad evidenziare le relazioni insieme/sotto insieme
Consente movimenti top-down / bottom-up.
La web usability 5. Progettare L’architettura informativa
Tre strutture di base
Luca Save e Francesca Rizzo - Università degli Studi di Siena
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.
La web usability 5. Progettare L’architettura informativa
Tre strutture di base
Luca Save e Francesca Rizzo - Università degli Studi di Siena
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.
La web usability 5. Progettare L’architettura informativa
Tre strutture di base
Luca Save e Francesca Rizzo - Università degli Studi di Siena
E’ Sabato pomeriggio e state entrando in un centro commerciale per comprare una motosega:
La web usability 5. Progettare L’architettura informativa
Lo scenario di Krug:
UTENSILI
Dove sono le motoseghe?
Vi trovate di fronte a tre reparti…
CASALINGHIPRATO E
GIARDINO
Luca Save e Francesca Rizzo - Università degli Studi di Siena
Seguendo il vostro intuito provate a vedere se la motosega si trova sotto UTENSILI…
La web usability 5. Progettare L’architettura informativa
Lo scenario di Krug:
UTENSILI A MOTORE
UTENSILI A MOTORE
…nella corsia UTENSILI A MOTORE cercate la motosega e la trovate.
…nel reparto utensili guardate i cartelli alla fine di ogni corsia…
UTENSILI MANUALIUTENSILI MANUALI
SMERIGLIARE E LEVIGARE
SMERIGLIARE E LEVIGARE
Luca Save e Francesca Rizzo - Università degli Studi di Siena
Se la vostra scelta fosse stata PRATO E GIARDINO sareste stati costretti a tornare indietro…
La web usability 5. Progettare L’architettura informativa
Lo scenario di Krug:
UTENSILIPRATO E
GIARDINO
UTENSILI A MOTORE
UTENSILI A MOTORE
UTENSILI MANUALIUTENSILI MANUALI
SMERIGLIARE E LEVIGARE
SMERIGLIARE E LEVIGARE
CASALINGHI
Luca Save e Francesca Rizzo - Università degli Studi di Siena
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.
UTENSILI CASALINGHIPRATO E
GIARDINO
UTENSILI A MOTORE
UTENSILI A MOTORE
UTENSILI MANUALIUTENSILI MANUALI
SMERIGLIARE E LEVIGARE
SMERIGLIARE E LEVIGARE
La web usability 5. Progettare L’architettura informativa
HOME
Luca Save e Francesca Rizzo - Università degli Studi di Siena
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.
La web usability 5. Progettare L’architettura informativa
UTENSILI PRATO E GIARDINO
Utensili per il giardino
Utensili per cucina
CASALINGHI
Utensili a motore
HOME
Smerigliare e levigare
Utensili a manuali
•motosega•tagliaerba• ecc…