Metodi di valutazione dell’usabilità Di Francesca Rizzo Francesca Rizzo L’usabilità UTILE USABILE DESIDERABILE Identificare i BISOGNI degli utenti Progettare e valutare prodotti FACILI DA USARE Identificare i FATTORI CHE MOTIVANO gli utenti Francesca Rizzo L’usabilità soddisfazione efficacia Utilità Appropriatezza Scopi efficienza Velocità Numero errori Affidabilità Scalabilità “il modo in cui gli utenti si sentono in relazione al sistema”. Facilità d’uso piacevolezza motivazione interesse apprendimento Francesca Rizzo Metodi per la valutazione di usabilità 1) Regole empiriche 2) Usability testing 3) Heuristic evaluation 4) Metodi di valutazione automatica (web usage analysis) Francesca Rizzo La web usability Esempi di euristiche specifiche per il web Francesca Rizzo 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 Francesca Rizzo 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? Francesca Rizzo La web usability in relazione al Web 1. Principi di buona navigazione 1. Dove mi trovo? Francesca Rizzo La web usability 1. Principi di buona navigazione 1. Dove mi trovo? in relazione alla struttura del sito Francesca Rizzo La web usability 1. Principi di buona navigazione nel Web 2. Dove sono stato ? Francesca Rizzo La web usability 1. Principi di buona navigazione 2. Dove sono stato ? all’interno del sito Francesca Rizzo 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 Francesca Rizzo 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 Francesca Rizzo 2. I diversi tipi di link La web usability Link strutturali Link topici Link associativi Francesca Rizzo 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 Francesca Rizzo 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: 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 Francesca Rizzo 3. Le convenzioni più diffuse La web usability Il “test del portabagagli” Sezioni Voi siete qui ID Ricerca Nome della pagina Navigazione locale Francesca Rizzo 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) Francesca Rizzo 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 Francesca Rizzo 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 Francesca Rizzo 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 Francesca Rizzo 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 Francesca Rizzo 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) Francesca Rizzo 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) Francesca Rizzo 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) Francesca Rizzo 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) Francesca Rizzo 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) Francesca Rizzo 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 Francesca Rizzo 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 Francesca Rizzo 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) Francesca Rizzo 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… Francesca Rizzo La web usability 4. Le “leggi” molto empiriche di Krug Francesca Rizzo 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. Francesca Rizzo 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. Francesca Rizzo 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. Francesca Rizzo 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. Francesca Rizzo 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. Francesca Rizzo 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? Francesca Rizzo 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. Francesca Rizzo 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 Francesca Rizzo 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 Francesca Rizzo 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… Francesca Rizzo