La web usability Esempi di euristiche specifiche per il web

La web usability INDICE I principi di buona navigazione (Nielsen 1999) I diversi tipi di link (Nielsen 1999) Le convenzioni più diffuse (Krug 2000) Le “leggi” molto empiriche di Krug Progettare l’architettura informativa

1. I principi di buona navigazione La web usability 1. I principi di buona navigazione Dove mi trovo? Dove sono stato? Dove posso andare? Per Jackob Nielsen la struttura di navigazione di un sito web deve aiutare l’utente nel rispondere a tre domande:

Dove mi trovo? La web usability 1. Principi di buona navigazione in relazione al Web

Dove mi trovo? La web usability 1. Principi di buona navigazione in relazione alla struttura del sito

2. Dove sono stato ? La web usability 1. Principi di buona navigazione nel Web

2. Dove sono stato ? La web usability 1. Principi di buona navigazione all’interno del sito I link più chiari

3. Dove posso andare ? La web usability 1. Principi di buona navigazione 3. Dove posso andare ? A questa domanda rispondono tre diversi tipi di link… link topici link strutturali link associativi

La web usability 2. I diversi tipi di link STRUTTURALI 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 link usati per indicare altre pagine dal contenuto simile o correlato a quella attuale che l’utente potrebbe perciò trovare interessanti ASSOCIATIVI

La web usability 2. I diversi tipi di link Link strutturali Link topici Link associativi

3. Le convenzioni più diffuse 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 Utilities Una via per la ricerca Le sezioni

Il “test del portabagagli” La web usability 3. Le convenzioni più diffuse Il “test del portabagagli” Messi improvvisamente davanti ad una pagina nuova (non la home page!) dobbiamo saper “rispondere” rapidamente a 6 domande: In che sito mi trovo? ID In che pagina sono? Nome della Pagina Quali sono le sezioni principali del sito? Sezioni del sito o navigazione primaria Quali opzioni ho a disposizione a questo livello? Navigazione locale Dove mi trovo nella struttura generale del sito? Indicazioni “voi siete qui” Come posso effettuare una ricerca? Campo ricerca

Il “test del portabagagli” La web usability 3. Le convenzioni più diffuse Il “test del portabagagli” ID Voi siete qui Sezioni Ricerca Nome della pagina Navigazione locale

Cosa distingue la home page dalle altre pagine: 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)

Cosa distingue la home page dalle altre pagine: 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

Cosa distingue la home page dalle altre pagine: 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

Cosa distingue la home page dalle altre pagine: 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

Cosa distingue la home page dalle altre pagine: 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

Cosa distingue la home page dalle altre pagine: 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)

Cosa distingue la home page dalle altre pagine: 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)

Cosa distingue la home page dalle altre pagine: 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)

Cosa distingue la home page dalle altre pagine: 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)

Cosa distingue la home page dalle altre pagine: 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)

Cosa distingue la home page dalle altre pagine: 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

Cosa distingue la home page dalle altre pagine: 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

Cosa distingue la home page dalle altre pagine: 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)

4. Le “leggi” molto empiriche di Krug 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…

La web usability 4. Le “leggi” molto empiriche di Krug

5. Progettare l’architettura informativa 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.

1) Lineare 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.

2) Gerarchica 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.

3) A ragnatela 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.

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.

Lo scenario di Krug: Dove sono le motoseghe? La web usability 5. Progettare L’architettura 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?

SMERIGLIARE E LEVIGARE 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.

SMERIGLIARE E LEVIGARE La web usability 5. Progettare L’architettura 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

SMERIGLIARE E LEVIGARE 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 PRATO E GIARDINO UTENSILI CASALINGHI UTENSILI A MOTORE UTENSILI MANUALI SMERIGLIARE E LEVIGARE

La web usability HOME 5. Progettare L’architettura informativa 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 UTENSILI PRATO E GIARDINO Smerigliare e levigare Utensili per il giardino Utensili a manuali motosega tagliaerba ecc… Utensili a motore