Progettazione di siti web
a.a. 2021/22

Usabilità

Maria Simi
Maggio, 2022

[Veen, Krug, Nielsen]

Richiamo progettazione

• Fasi della progettazione
  
  • Specifica dei requisiti
  • Web design
    - Progetto della struttura di navigazione (mappa del sito)
    - Progetto della struttura delle pagine (wireframe)
    
  • Progetto grafico (mockup)
• Usabilità uno dei criteri di qualità (quello centrale)
  
  • Progettare per l’usabilità
  • Progettare per l’utente

Che cos’è l’usabilità?

• L' usabilità è l' "efficacia, efficienza e grado di soddisfazione con cui uno specifico insieme di utenti possono svolgere un insieme di compiti in un certo contesto" (ISO).
• L'usabilità riguarda l'esperienza dell'utente con il sito
  (UX - User eXperience)
• Progettare per l'usabilità vuol dire progettare siti Web che sono semplici, funzionali e facili da usare.
  
  • La prima legge dell'usabilità secondo Steve Krug [Krug] è
    Don't make me think!
• Altri aspetti (coerenza dell'interfaccia, navigabilità, trovabilità, concisione ...) sono visti come modi per raggiungere questo obiettivo.

Perché è importante

• Gli utenti del Web sono in gran parte utenti occasionali, non esperti
• In Internet la concorrenza è sempre soltanto a un clic di distanza / On the Internet the competition is always just one click away:
  • è talmente facile navigare e la scelta così ampia, che se gli utenti sono confusi o frustrati se ne vanno a navigare da un'altra parte
• Una delle risorse più preziose nell'economia di Internet è l'attenzione dell'utente
• Il pulsante più usato è ...
  il pulsante BACK!

Progetto “centrato sull’utente”

• Gli utenti sono coinvolti dall’inizio e in tutte le fasi
• Gli obiettivi del committente devono essere bilanciati con le esigenze degli utenti
• Domande da porsi
  
  • Chi sono gli utenti del sito web e quali sono il loro obiettivi?
  • Quali sono le informazioni e le funzioni di cui gli utenti hanno bisogno? in quale forma?
  • Come gli utenti pensano che il sito dovrebbe funzionare e qual è la loro esperienza d’uso del web?
  • Che hardware e software possiede la maggioranza degli utenti per accedere al sito?

Aspetti dell' usabilità

• Efficacia: il successo dell’utente nel trovare informazione e svolgere compiti
• Efficienza: velocità dell’utente nel raggiungere i suoi obiettivi
• Soddisfazione: grado di soddisfazione, confort nell’uso
• Tolleranza agli errori: frequenza e gravità degli errori
• Apprendimento: l’uso del sito da parte di un utente migliora col tempo?

Usabilità e UX (User eXperience)

• I due termini sono spesso usati in modo intercambiabile
• UX fa riferimento al coinvolgimento emotivo
  
  • molto più della soddisfazione che viene dal riuscire a portare a termine un compito
• Metafora del cavallo
  
  • Le zampe sono la funzionalità
  • Le briglie sono l'usabilità
  • La sella è l'esperienza utente

Strategie per l’usabilità

• Regole euristiche ricavate dagli studi degli esperti
• Ricerca sugli utenti: identificare e conoscere gli utenti
  
  • Interviste (on site, surveys, individuali)
  • Focus group
  • Analisi dei task: Cosa faranno? Come?
  • Personaggi (personas): personaggio fittizio che rappresenta un gruppo di utenti
  • Scenari d’uso da parte di utenti con obiettivi specifici
• Obiettivi di usabilità misurabili

Esempi di regole euristiche

• Valgono per una qualunque interfaccia uomo-macchina
  
  • Coerenza dell’interfaccia
  • Reattività: ad ogni azione deve corrispondere una reazione (feedback)
• Specifiche del web: navigabilità e trovabilità
  
  • navigabilità: la facilità con cui ci si orienta nel sito navigando
  • trovabilità: la capacità di un'informazione, risorsa od oggetto di essere localizzabile o fruibile.
• Usabilità dei contenuti (dei testi, delle immagini) web

Coerenza dell’interfaccia

• Principio cardine dell’usabilità, dal Mackintosh in poi
• Uno stesso comando, una stessa icona, una stessa voce di menù ha la stessa funzione in tutti i contesti.
• Si impara una volta e si usa dovunque.
• Quando si impara a guidare si impara a guidare ogni macchina ...
• Un vantaggio per l'utente ma anche per il progettista, che
  
  • può fare affidamento su soluzioni collaudate
  • può concentrarsi su aspetti più creativi o sui contenuti

Il contesto del web

• Il mondo dell’editoria ha regole molto solide. Il Web è giovane ma ha già un suo “contesto” e le sue regole.
• Coerenza esterna: le aspettative che l’utente deriva dalla conoscenza del Web
• Coerenza interna: consistenza nella grafica e nella navigazione

Esempi di convenzioni e aspettative

• Stile dei collegamenti
  
  • testo in azzurro sottolineato, manina “on-mouse-over”
  • viola o rossastro per i link visitati
  • il colore può essere cambiato, la sottolineatura può essere tolta
    Importante: non sottolineare testo che non è un link
• Uso di frecce per la navigazione
  
  • freccia a destra: "continua", "successivo", "avanti"
  • freccia a sinistra: "indietro"
  • freccia in alto: "sopra"
  • freccia in basso: "sotto" in una qualche gerarchia
• Metafore efficaci: carrelli nel commercio elettronico

Modelli mentali, mappe mentali

• Il sito ha successo se si adegua al modello mentale dell’utente
• Il modello mentale può essere esteso, ma con cautela e coerenza
• Rompere le convenzioni disorienta, demolisce la fiducia: bisogna avere un buon motivo per farlo
• Mappe mentali: modello della struttura del sito come risultato della navigazione
  
  • I link interni alla pagina possono disorientare

Esempi di euristiche di usabilità

• Un test di usabilità euristico consiste nel rispondere alle seguenti tre domande:
  
  • Dove sono?: possibilità di capire di cosa si tratta e localizzazione anche entrando "da porte secondarie".
  • Che cosa c'è qui?: comprensione del contenuto.
  • Dove posso andare?: capire la struttura di navigazione.

Pagina a tre pannelli

• I tre pannelli servono a rispondere alle tre domande
  
  • identità
  • navigazione
  • contenuto

Schemi di progetto

• Design pattern: soluzioni generali a problemi molto diffusi che possono essere riutilizzate e adattate
• Ispirati da Christopher Alexander, un architetto
  
  • Pattern: una regola con tre parti che esprime una relazione tra un contesto, un problema e una soluzione
  • Problemi ricorrenti. Soluzione astratta e riutilizzabile.
• Un processo di progettazione guidato da un linguaggio di “pattern” si può adattare anche al Web
  
  • Ian Graham, “Web patterns for usability”

Percorsi di briciole

• I percorsi di argomenti (percorsi di briciole) sono strumenti di navigazione molto efficaci per siti con una strutturazione gerarchica degli argomenti.
• Esempi
  
  • Elettronica > Foto > macchine digitali
  • Ristoranti > Etnici > Cinesi > Cantonesi
• Contesto: siti con cataloghi gerarchici
  
  • Dove collocarli?
  • Che simbolo usare?

Interfaccia di ricerca

• Gli ingredienti: una text-box, delle opzioni, un bottone

Check box?

Bottone radio?

Menù a discesa?

Quanto grande la text-box?
Dove scrivo 'cerca'?
Il bottone vai è necessario?

Ultime tendenze per le form

Uso dei tab

• I tab sono molto efficaci nel suddividere il sito in prospettive.
• Alcuni esempi:
  
  • Amazon
  • Sloan
• Analogia con gli schedari di una volta
• La scheda in evidenza deve essere in continuità con lo sfondo.

Copiare o creare?

• Giusto compromesso tra usare schemi che già funzionano e a cui gli utenti sono abituati e innovazione
• Per rompere le regole bisogna conoscerle
• Non essere troppo rigidi con l’applicazione delle regole di usabilità
• Tensione tra Jacob Nielsen e i creativi.

Usabilità secondo Jacob Nielsen

• Jacob Nielsen è considerato il guru dell’usabilità
• Nielsen Norman Group
• Nel suo libro [Nielsen]:
  
  • Usabilità delle pagine
  • Usabilità dei contenuti
  • Usabilità della navigazione

Usabilità delle pagine

• La cosa più importante sono i contenuti
  
  • no allo spazio sprecato
  • no alle cose inutili
  • no ad un utilizzo non ottimale della finestra del browser
    - lo spazio 'above the folder' è prezioso
• Differenza con le interfacce grafiche tradizionali
  
  • la sfida è fare pagine che si adattino ai diversi media
  • che occupino al meglio lo spazio disponibile sullo schermo
  • misure percentuali migliori di misure fisse
  • la frase "ottimizzato per uno schermo 800x600" (best viewed with ...) è da evitare

Tempi di risposta

• Il caricamento lento è uno dei peccati mortali del Web secondo Siegel
• Tempi di risposta
  
  • < 1 sec; pagine di 30-40 KB (comprese immagini)
  • tempi prevedibili: uniformi e annunciati
  • uso cauto della grafica e della multimedialità
  • caricamento parziale (ALT, WIDTH, HEIGHT su immagini e tabelle)
• Dimensione pagina: somma delle dimensioni di tutti i file coinvolti
  
  • Ogni richiesta di file al server ha un costo
  • Tecniche per ridurre il numero di richieste

Link

• Tipi di link
  
  • Link strutturali (di navigazione)
  • Link associativi (approfondimento di contenuti)
  • Link ad altri siti
• Suggerimenti
  
  • testo del link non troppo lungo (< 80 caratteri)
  • testo significativo (evitare “clicca qui”)
  • testo supplementare che spiega cosa si troverà
  • usare TITLE
    - per nome del sito di destinazione
    - sezione diversa del sito
    - avvertimenti (se necessaria registrazione, lingua ...)

Ancora sui link

• Il colore dei link
  
  • colore azzurro per link non visitati
  • colore violetto o rossastro per i link già visitati
  • colore diverso per link in uscita dal sito? hover diverso?
• Link in ingresso
  
  • sono un valore
  • le pagine devono essere permanenti
  • le pagine devono avere contenuti specifici e approfondimenti
  • richieste di abbonamento e registrazioni sono ostacoli ai link in ingresso

Usabilità dei contenuti

• Lo stile dei testi è importante
• Un titolo o link scadente può costare a una azienda 10 milioni (di vecchie lire)
  
  • 5 secondi in più per interpretarlo
  • 10% cliccano anche se non interessati
  • 30 secondi per capire che la cosa non interessa
  • 10.000 dipendenti a 100.000 lire l’ora
• Può servire capire come la gente usa il Web ...

Come gli utenti usano il Web [Krug]

Come gli utenti usano il Web (eye tracking)

Scrivere per il Web

• Bisogna essere estremamente succinti e diretti
  
  • 25% più lento leggere
  • 50% più succinto
• Vietate le lunghe spiegazioni
• Limitare l’uso della barra di scorrimento
• Titoli significativi
  
  • Usati dai motori di ricerca
  • Vanno nei “favoriti”
  • devono essere ancora significativi se decontestualizzati

Scrivere per il Web

• Un paragrafo un’idea
• Principio della piramide capovolta
  
  • il contenuto più importante all’inizio della pagina
  • i link importanti nella prima schermata
• Ipertesti, non testi lineari suddivisi su più pagine
  
  • Pagine brevi, uso limitato della barra di scorrimento
  • Linee brevi
  • Flusso principale
  • Approfondimenti
  • cose che interessano solo alcuni utenti

Un esempio

Leggibilità

• Colori di sfondo in contrasto
• Grafica di sfondo non invasiva
• Caratteri non troppo piccoli
• EVITARE TUTTO MAIUSCOLO: PIÙ LENTO DA LEGGERE
  
  
• Per approfondimenti vedi il sito Il mestiere di scrivere di Luisa Carrada

Usabilità della navigazione

• Le domande a cui rispondere sono tre:
  
  • Dove mi trovo?
    - Logo in ogni pagina, struttura di navigazione ripetuta, percorso di briciole
  • Dove sono stato?
    - bottone back e link rossastri
  • Dove posso andare?
    - link topici: ulteriori informazioni
    - link strutturali: un livello sopra, pagina successiva ...
    - link associativi: contenuti simili
  • La struttura del sito deve essere progettata per la semplicità di navigazione e non caotica

Strumenti per la navigazione

• Strumenti offerti dai browser
  
  • Link visitati di recente
  • Back
  • Segnalibri
• Mappa del sito
• Navigazione contrapposta a ricerca
• Motori di ricerca
  
  • raggiungibile da ogni pagina del sito
  • presentazione dei risultati
  • … ne parleremo a proposito di promozione

Architettura dell’informazione

• Il progetto della struttura di un sito è il dominio dell’Architettura dell'informazione (AI)
• A cosa serve in generale:
  
  • l'informazione è [sovra]-abbondante, frammentata e multi-canale
  • Il ruolo dell’architettura dell’informazione è creare relazioni capaci di ricucire assieme i frammenti d’informazione
  • Le relazioni creano contesto e danno un senso, talvolta nuovo, ai frammenti
• Le troppe scelte rischiano di creare stress
  
  • il tempo e lo stress da scelta non dipendono tanto dal numero delle opzioni disponibili, ma soprattutto dal modo in cui queste sono organizzate e presentate

Architettura dell’informazione

• L’architetto dell’informazione è colui che
  
  • organizza i contenuti osservando le strutture ricorrenti presenti nei dati, mette ordine nel caos, rende semplice trovare le informazioni
  • sono richiesti metodi efficaci e intuitivi di classificazione e di etichettatura
  • analizza i contenuti e le esigenze degli utenti e trova una corrispondenza
• Diversi paradigmi
  
  • Classificazioni gerarchiche enumerative
  • Classificazioni a faccette
  • Folksonomie

Gerarchie

• Quando l’informazione è complessa bisogna costruire un sistema di classificazione (tassonomia): categorie di oggetti, sezioni di un sito web ...
• Una gerarchia è un modo comune di organizzare una tassonomia; bisogna dare nomi intuitivi alle categorie (etichette)
• Esempio: la bilancia del supermercato
• Un unico schema può non essere soddisfacente nel web:
  
  • Al "catalogo" possono sovrapporsi criteri geografici, distinzioni sull'utenza, esigenze di popolarità, di freschezza dell'informazione ...
  • Gli schemi di classificazione studiati negli anni in ambito bibliotecario sono inadeguati: pensati per i libri, chiusi, non estendibili

Alternative

• Classificazione a faccette
  
  • Metodo introdotto da Ranganathan (1933)
  • Descrizione degli oggetti attraverso loro caratteristiche (faccette)
  • Ogni faccetta è indipendente dalle altre
• Folksonomy
  
  • Tagging collaborativo o sociale
  • Tag clouds per mettere in evidenza i tag più popolari

Card sorting

• Un metodo empirico che prevede di coinvolgere gli utenti nell’organizzare l’informazione in un sito web, in modo per loro chiaro
• Si chiede di raggruppare i contenuti per somiglianza in gruppi o categorie
  
  • Card sorting chiuso: le categorie sono fissate (classificazione)
  • Card sorting aperto: oltre a raggruppare si chiede anche di dare un nome alle categorie (clustering)
• Come procedere
  
  • Predisporre le carte, una carta per ogni tipo di contenuto (50)
  • In una sessione di card sorting ciascun utente raggruppa le carte in gruppi e poi dà loro un nome [motivando le scelte ad alta voce]. Analisi dei dati
• Esistono strumenti in rete. Per saperne di più Donna Spencer

Valutazione di usabilità

• Valutazione euristica
  
  • compiuta da esperti, senza utenti, sulla base di principii e dell’esperienza
  • Linee guida e liste di controllo
• Simulazione cognitive (cognitive walk-throughs)
  
  • test con gli utenti
  • gli utenti svolgono compiti specifici
  • gli esperti osservano, registrano
• I problemi individuati dagli esperti non coincidono normalmente con i problemi degli utenti

Test di usabilità con gli utenti

• Test early. Test often.
• Gli utenti devono essere rappresentanti tipici delle categorie a cui è rivolto il sito
• Avranno dei compiti da svolgere
• Think aloud: mentre interagiscono con il sito commentano e vengono registrati
• Test di compito e test di scenario

Esempi di test di compito (task)

• Agenzia di viaggio
  
  • Registrati sul sito
  • Ricerca nel catalogo un viaggio a Cuba di una settimana, con partenza il 24 dicembre
  • Scegli l’albergo più economico e richiedi disponibilità posti e preventivo per 2 persone
  • Accedi alla tua scheda personale e modifica indirizzo

Esempio di test di scenario

• I task elementari non vengono esplicitamente indicati, ma si descrive un obiettivo più generale
• Agenzia di viaggio
  
  • Organizza una settimana al mare per te e tua moglie, in una località tropicale, durante le vacanze di Natale. Pertenza dopo il 22 dicembre, ritorno entro il 10 gennaio. Spesa complessiva non eccessiva: entro i 2500 euro tutto compreso. Siete entrambi appassionati di pesca subacquea e preferireste un villaggio vacanze vicino al mare ma non troppo lontano da un centro abitato per fare shopping. Trovate nel sito una soluzione soddisfacente, con disponibilità di posti liberi.

Test con gli utenti costosi?

• La conduzione richiede un po’ di esperienza
• Gli utenti dove li trovo? Vanno pagati? Quanti ne servono? Nielsen ci dice che …

Conclusioni

• Progettare per l'usabilità
• Pensare agli utenti tipici e a come questi usano il sito
• Utilizzare Design pattern efficaci
• Essere consapevoli di una serie di regole euristiche scaturite dagli studi di usabilità
• Fare test con utenti reali
• Per saperne di più ...
  
  • Libro di Nielsen "Web Usability", Apogeo 2000.
  • Sito/blog di Luca Rosati