Dott. Simone Lazzini Università di Pisa Web Usability Dott. Simone Lazzini Università di Pisa

Come si persegue la usability Come si persegue la usability? (Realizzazione e gestione di un sito web) Strategia e fattibilità Management, Consulenti 1 Web designer 2 Web design & user experience Visual design Visual designer 3 Sviluppo del software System integrator 4 5 Content editor Gestione dei contenuti Esercizio del sito Web master 6 Gestione dei server Web farm 7 Connettività internet Internet Service Provider 8

Quali elementi di valutazione è possibile analizzare Gestione Usabilità Accessibilità Obiettivi Architettura Comunicazione Funzionalità Contenuto Strategia e fattibilità Management, Consulenti 1 Web designer 2 Web design & user experience Visual design Visual designer 3 Sviluppo del software System integrator 4 5 Content editor Gestione dei contenuti Esercizio del sito Web master 6 Gestione dei server Web farm 7 Connettività internet Internet Service Provider 8

Un primo modello di analisi Architettura La struttura e la navigazione del sito sono adeguate? Accessibilità Comunicazione Il sito è di facile accesso per tutti? Il sito raggiunge i suoi obiettivi di comunicazione? Usabilità Il sito è facile da usare? Funzionalità Gestione L’operatività del sito è ben gestita ? Le funzioni del sito sono adeguate e corrette? Contenuto Il contenuto informativo è corretto, e adeguato agli scopi del sito?

Quindi un sito è usabile quando è : Identificare i BISOGNI degli utenti UTILE Progettare e valutare prodotti FACILI DA USARE FRUIBILE Identificare i FATTORI CHE MOTIVANO gli utenti DESIDERABILE

QUALI SONO LE DIMENSIONI DA CONSIDERARE Efficacia Efficienza Soddisfazione Utilità Velocità Facilità d’uso Affidabilità Appropriatezza Piacevolezza Scalabilità Semplicità Il sito deve essere strutturato in modo da richiedere il minimo numero di passi per accedere all’informazione voluta tenendo presente il numero di elementi che l'utente riesce a mantenere contemporaneamente in memoria (tipicamente un numero variabile da 4 a 7) e garantendo comunque il minor tempo di accesso possibile.

Usability e Architettura dell’informazione Struttura Mappatura Navigazione

L’analisi della Struttura del sito La rappresentazione avviene, di solito, mediante un diagramma ad albero, allo scopo di valutarne la adeguatezza B C D E A HOME D1 D2 D3 A2 A1 A2.2 A2.3 A2.1 1° livello 2° livello 3° livello

L’analisi della Struttura del sito – Gli scopi L’architettura strutturale “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.

Tre strutture di base 1) Lineare 2) Gerarchica 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 Più percorsi mutuamente esclusivi Adatta ad evidenziare le relazioni insieme/sotto insieme Consente movimenti top-down / bottom-up.

3) A ragnatela I livello I livello I livello HOME II Livello 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. 3) A ragnatela II Livello I livello HOME II Livello I livello II Livello I livello II Livello II Livello II Livello

Le possibili strutture possono essere moltissime ed avere i caratteri di ciascuna ma… 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: v Navigando cerco un sito per valutare la possibilità di comprare una motosega: La struttura del sito presenta tre reparti… PRATO E GIARDINO UTENSILI CASALINGHI Dove sono le motoseghe?

SMERIGLIARE E LEVIGARE SMERIGLIARE E LEVIGARE Seguendo il vostro intuito provate a vedere se la motosega si trova sotto UTENSILI… il livello successivo è? …nella corsia UTENSILI A MOTORE cercate la motosega ma??? UTENSILI A MOTORE UTENSILI MANUALI SMERIGLIARE E LEVIGARE HOME PRATO E GIARDINO UTENSILI CASALINGHI UTENSILI A MOTORE UTENSILI MANUALI SMERIGLIARE E LEVIGARE

Una struttura a ragnatela consente 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

La mappatura Esplicita le relazioni tra l’aspetto strutturale a quello funzionale In alcuni casi può risultare molto complesso in relazione alla gamma dei servizi offerti

La mappatura (2) Definire la gerarchia dell’informazione Sequenza lineare Network La griglia

Correlare la mappatura alla struttura

La mappa del sito IKEA

La mappa del sito IKEA

I criteri per l’analisi Secondo l’approccio proposto da Jackob Nielsen la struttura di navigazione di un sito web deve aiutare l’utente nel rispondere a tre domande: Dove mi trovo ? Dove sono stato ? Dove posso andare ?

Le tipologie di navigazione B C D E A HOME D1 D2 D3 A2 A1 A2.2 A2.3 A2.1 navigazione orizzontale navigazione trasversale navigazione verticale

Dove mi trovo? in relazione al Web

Dove mi trovo? in relazione alla struttura del sito

2. Dove sono stato ? nel Web

2. Dove sono stato ? all’interno del sito

3. Dove posso andare ? A questa domanda rispondono tre diversi tipi di link… link topici link strutturali link associativi

I Link testo sottolineato (di solito ma non sempre!) che conduce a ulteriori informazioni riguardo all’argomento trattato TOPICI 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

Link strutturali Link topici Link associativi

Il “test del portabagagli” ID del sito Una via alla Home Page Utilities Una via per la ricerca Le sezioni 1 4 6 2 3 5 Il “test del portabagagli” 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

ID Sezioni Nome della pagina Navigazione locale Voi siete qui Ricerca

contenuti della pagina Una struttura di navigazione tipica B C D E A HOME D1 D2 D3 A2 A1 A2.2 A2.3 A2.1 A B C D E D1 D2 D3 pagina D1 contenuti della pagina navigazione globale navigazione locale

Un’altra variante: navigazione globale (metafora dello schedario) pagina D1 A B C D E

Una variante: navigazione locale in orizzontale <contenuti Linea Cash> Strutturalmente, è la stessa cosa Un’altra variante: navigazione locale in menu a tendina

Cosa distingue la home page dalle altre pagine: 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 (2) : 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 (3) : IL WELCOM BLURB …poche righe per spiegare chi siamo, cosa facciamo, che obiettivi abbiamo (mission)

Cosa distingue la home page dalle altre pagine (4) : 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 (5) : Nella home page i link strutturali (sezioni) possono essere disposti in modo diverso rispetto a tutte le altre pagine (navigazione persistente)… Home page Pagina interna

Un difetto tipico: duplicazione degli accessi a una stessa pagina

Il modello più in dettaglio

Valutare le caratteristiche a partire dalle sottocaratteristiche Un possibile sistema di misurazione Valutare le caratteristiche a partire dalle sottocaratteristiche

Una visione globale Usabilità Architettura Comunicazione Funzionalità Contenuto Gestione Accessibilità

Confronto di due siti Usabilità Accessibilità Architettura Gestione 4 3,5 Accessibilità 3 Architettura 2,5 2 1,5 1 0,5 Gestione Comunicazione Contenuto Funzionalità

Un profilo di qualità più analitico

Best site web award

Best site web award

Il circuito del controllo DESTINATARI ESTERNI DETERMINAZIONE DEL FABBISOGNO INFORMATIVO Analisi operativa e “strategica” dei risultati OBIETTIVI DEL PORTALE IL PORTALE REPORT CON PARAMETRI E-GOV REALIZZAZIONE/ REVISIONE ESPLICITAZIONE DEI PARAMETRI DEL PORTALE COMMISURAZIONE DEI PARAMETRI

Qualche riferimento Bibliografia Consultata Documenti consultati Web Usability – Francesca Rizzo Informatica per l’e-Government Come cambia la Pubblica Amministrazione italiana - Prof. Valter Baldassi. Linee Guida per la Qualità delle Forniture ICT: evoluzione ed applicazione – Marco Gentili Analisi siti web Pa –Paolo Atzeni, Paolo Merialdo Progettazione di un sito Web – Roberto Pirrone Bibliografia Consultata Designing Web Usability, Nielsen, J., tr. it. di Vanini, W., Apogeo,Milano, 2000. Information Architecture for the World Wide Web, Rosenfeld, L.,Morville, P., O’Reilly, Sebastapol CA, 1998. Usability Inspection Methods, Nielsen, J., and Mack, R. L., JohnWiley & Sons, New York, NY, 1994.