Usabile è una cosa che impariamo e ricordiamo facilmente, che è efficace (ci permette di raggiungere lo scopo) ed efficiente (ci permette di farlo con il minore sforzo possibile), e il cui uso risulta dunque soddisfacente. Ecco perché l’usabilità è importante nella comunicazione tecnica, in particolare quando realizziamo Help Online (HoL), e altre applicazioni dedicate all’erogazione e alla fruizione di informazioni via web, mobile e app. Report sulla terza edizione dello storico libro di Steve Krug, Don’t Make Me Think. Un approccio di buon senso all’usabilità web e mobile, Tecniche Nuove, Milano, 2014

1. Kea s.r.l. | Via Strà, 102 | 37042 Caldiero (VR)
Tel. / Fax: +39 045 6152381
Web: www.keanet.it | E-mail: info@keanet.it
Usabilità, comunicazione tecnica ed Help
Online (HoL)
Usabile è una cosa che impariamo e ricordiamo facilmente, che è efficace (ci
permette di raggiungere lo scopo) ed efficiente (ci permette di farlo con il minore
sforzo possibile), e il cui uso risulta dunque soddisfacente.
Ecco perché l’usabilità è importante nella comunicazione tecnica, in particolare
quando realizziamo Help Online (HoL), e altre applicazioni dedicate all’erogazione
e alla fruizione di informazioni via web, mobile e app.
Report sulla terza edizione dello storico libro di Steve Krug, Don’t Make Me Think.
Un approccio di buon senso all’usabilità web e mobile, Tecniche Nuove, Milano, 2014
Sommario
Che cos’è l’usabilità........................................................................................................................................... 3
Principi dell’usabilità ......................................................................................................................................... 3
Non costringermi a pensare .......................................................................................................................... 3
Scorriamo le pagine web, non le leggiamo ................................................................................................... 3
Non facciamo scelte ottimali, ma soddisfacenti ........................................................................................... 3
Non cerchiamo di comprendere il funzionamento, ma di far funzionare il sito ........................................... 4
Linee guida generali per progettare siti usabili................................................................................................. 4
Usare le convenzioni...................................................................................................................................... 4
Sfruttare le gerarchie visive........................................................................................................................... 4
Suddividere le pagine in aree ben definite.................................................................................................... 4
Rendere ovvio gli elementi su cui possiamo fare clic.................................................................................... 4
Minimizzare il “rumore” delle pagine ........................................................................................................... 4
Formattare il testo in modo che sia facile scorrerlo...................................................................................... 4
Rendere facili le scelte................................................................................................................................... 4
Omettere le parole inutili.............................................................................................................................. 5
Come progettare una navigazione usabile........................................................................................................ 5
Come progettare una home page usabile......................................................................................................... 6
Test di usabilità fai da te.................................................................................................................................... 6
Mobile................................................................................................................................................................ 7
1
Don’t Make Me Think. Un approccio di buon senso all’usabilità web e mobile – Gennaio 2015

2. Kea s.r.l. | Via Strà, 102 | 37042 Caldiero (VR)
Tel. / Fax: +39 045 6152381
Web: www.keanet.it | E-mail: info@keanet.it
Accessibilità di base........................................................................................................................................... 7
2
Don’t Make Me Think. Un approccio di buon senso all’usabilità web e mobile – Gennaio 2015

3. Kea s.r.l. | Via Strà, 102 | 37042 Caldiero (VR)
Tel. / Fax: +39 045 6152381
Web: www.keanet.it | E-mail: info@keanet.it
Che cos’è l’usabilità
Nell’introduzione alla terza edizione del suo storico libro, Steve Krug sottolinea che “l’usabilità riguarda le
persone e come esse capiscono le cose, non la tecnologia. A anche se la tecnologia cambia rapidamente, le
persone cambiano lentamente”.
Usabile è una cosa che impariamo e ricordiamo facilmente, che è efficace (ci permette di raggiungere lo
scopo) ed efficiente (ci permette di farlo con il minore sforzo possibile), e il cui uso risulta dunque
soddisfacente.
Krug sottolinea che “quello che funziona è un buon design integrato, che soddisfi un bisogno, studiato
attentamente, ben eseguito e testato”. Al centro di ogni oggetto usabile sta il destinatario e le sue esigenze
operative, decisionali, informative e formative.
Non da ultimo, l’usabilità va di per sé nella direzione dell’accessibilità, in questo caso di un sito, da parte di
utenti disabili.
Principi dell’usabilità
Non costringermi a pensare
La 1° legge dell’usabilità di Krug dice: “Non costringermi a pensare”.
L’utente vuole afferrare senso e funzionamento del sito senza particolare sforzo mentale, cioè senza
doversi porre domande e cercare le risposte.
Ogni interrogativo aggiunge un peso al nostro carico di lavoro cognitivo, distraendoci dall’obiettivo che
intendiamo raggiungere.
Secondo Krug obiettivo è che il sito sia autoevidente. Quando cioè non è possibile il sito deve essere
autoesplicativo, grazie al supporto dell’aspetto degli elementi, della nomenclatura delle etichette e di
piccole quantità di testo guida.
Scorriamo le pagine web, non le leggiamo
Partendo dal nostro obiettivo, scorriamo la pagina web alla ricerca di parole che catturino la nostra
attenzione, ignorando quanto non è funzionale al raggiungimento dello scopo. Sul web la nostra lettura è di
tipo informativo, siamo alla ricerca di informazioni azionabili.
Non facciamo scelte ottimali, ma soddisfacenti
Scorrendo la pagina, scegliamo la prima opzione ragionevole.
Non confrontiamo più opzioni prima di decidere, perché: abbiamo fretta; il bottone Indietro ci permette di
ritornare facilmente sui nostri passi; il confronto non migliora di per sé la chance di scegliere
correttamente.
3
Don’t Make Me Think. Un approccio di buon senso all’usabilità web e mobile – Gennaio 2015

4. Kea s.r.l. | Via Strà, 102 | 37042 Caldiero (VR)
Tel. / Fax: +39 045 6152381
Web: www.keanet.it | E-mail: info@keanet.it
Non cerchiamo di comprendere il funzionamento, ma di far funzionare il sito
Non cerchiamo di comprendere il funzionamento del sito, ma di farlo funzionare per raggiungere il nostro
obiettivo.
Se il funzionamento è autoevidente / autoesplicativo è più facile raggiungere lo scopo con soddisfazione e
scoprire una gamma più vasta di funzioni. Per l’autore del sito è invece più facile guidare l’utente verso le
parti del sito che desidera fossero visitate.
Linee guida generali per progettare siti usabili
Usare le convenzioni
Usare le convenzioni per posizione, aspetto e funzionamento di determinati elementi (vd. sotto per i
suggerimenti relativi alla progettazione della navigazione e della home page).
Sfruttare le gerarchie visive
Sfruttare le gerarchie visive per dare rilievo diverso a elementi più o meno importati; per raggruppare
elementi omogenei collegati dal punto di vista logico; per nidificare elementi non omogenei che sono parte
di uno stesso insieme (per esempio di una scheda prodotto).
Suddividere le pagine in aree ben definite
Suddividere le pagine in aree ben definite permette all’utente di orientarsi rapidamente e di concentrarsi su
ciò che è di suo interesse.
Rendere ovvio gli elementi su cui possiamo fare clic
Forma (dei pulsanti), posizione (dei menu) e formattazione (dei link) devono rendere immediatamente
riconoscibili gli elementi su cui è possibile fare clic.
Minimizzare il “rumore” delle pagine
Per ridurre le fonti di distrazione, Krug suggerisce di: creare una gerarchia visiva per gli elementi della
pagina, evitando di dare a ognuno la stessa importanza; evitare pagine disorganizzate e sovraffollate.
Formattare il testo in modo che sia facile scorrerlo
Per le formattazioni Krug suggerisce di: usare titoli di paragrafo; posizionare il titolo vicino al testo che
segue; distinguere in modo evidente i vari livelli di titolazione (H1 – H6); mantenere brevi i paragrafi; usare
gli elenchi puntati; evidenziare in grassetto parole ed espressioni chiave.
Rendere facili le scelte
La 2° legge dell’usabilità di Krug dice: “Non importa quante volte devo fare clic, purché ciascun clic sia frutto
di una scelta semplice e non ambigua”.
I link dovrebbero essere autoevidenti. Quando ciò non è possibile, l’aiuto dovrebbe essere breve,
contestuale e ben visibile.
4
Don’t Make Me Think. Un approccio di buon senso all’usabilità web e mobile – Gennaio 2015

5. Kea s.r.l. | Via Strà, 102 | 37042 Caldiero (VR)
Tel. / Fax: +39 045 6152381
Web: www.keanet.it | E-mail: info@keanet.it
Omettere le parole inutili
La 3° legge dell’usabilità di Krug dice: “Liberatevi della metà delle parole in ogni pagine e poi liberatevi della
metà di quelle che rimangono”.
Al di là della provocazione, confessata dallo stesso Krug, liberarsi delle parole inutili riduce il livello di
rumore delle pagine, rende più visibili i contenuti utili e accorcia le pagine, favorendone lo scorrimento da
parte dell’utente.
Come progettare una navigazione usabile
Krug illustra le principali convenzioni che rendono usabile la navigazione web:
• ID o logo del sito, in alto a sinistra. Deve riportare alla home page
• Utility, in alto a destra. Link ai 4-5 elementi maggiormente utilizzati, che ci aiutano a usare il sito, per
esempio: registrazione, login, carrello, contatti, scelta della lingua. Importante è non nascondere
informazioni rilevanti per l’utente, come per esempio i contatti dell’assistenza clienti, le tariffe di
spedizione, ecc. Può essere opportuno prevedere una pagina di FAQ reali, aggiornate in base al
feedback dell’assistenza clienti e del supporto tecnico
• Motore di ricerca, in alto a destra, sotto le Utility, composto da casella, pulsante ed etichetta Cerca. Per
facilitare l’utente, il consiglio è di non limitare la ricerca alla fonte, ma di dare la possibilità all’utente di
filtrare successivamente i risultati. La casella del motore di ricerca, come le form, vanno programmate
in modo tale da essere “tolleranti”: l’utente non deve seguire le nostre regole per immettere i dati, ma
deve poterli digitare liberamente (per esempio nel caso di codici articolo, numeri di telefono, codici
fiscali, ecc.)
• Navigazione globale, di primo ed eventualmente di secondo livello. Fra le sezioni di primo livello è
opportuno includere anche la home page. Il consiglio è di valutare anche l’adozione della navigazione a
schede, autoesplicative, evidenti ed eleganti
• Questi quattro elementi (ID o logo del sito, Utility, motore di ricerca e navigazione globale)
dovrebbero comparire su tutte le pagine. Fa parzialmente eccezione la navigazione globale, che non
andrebbe visualizzata sulle pagine al cui interno costituisce una fonte di distrazione, per esempio su:
form, carrello, pagamento, registrazione, invio di feedback
• Briciole di pane (in alternativa all’evidenziazione della posizione sulla navigazione globale), sotto la
navigazione globale. Gli elementi vanno separati dal carattere > e l’ultimo elemento deve essere in
grassetto e non un link
• Navigazione locale, a sinistra
• Nome della pagina, a destra e posizionato in modo tale da racchiudere il contenuto della pagina.
Posizione, dimensione, colore e tipo di carattere devono concorrere a rendere il titolo ben visibile. Il
titolo deve essere coerente con l’etichetta della pagina su cui l’utente ha cliccato
• Navigazione del piè di pagina. Contiene link ad altre utility utilizzate meno di frequente.
5
Don’t Make Me Think. Un approccio di buon senso all’usabilità web e mobile – Gennaio 2015

6. Kea s.r.l. | Via Strà, 102 | 37042 Caldiero (VR)
Tel. / Fax: +39 045 6152381
Web: www.keanet.it | E-mail: info@keanet.it
Come progettare una home page usabile
Fra le molte funzioni della home page spiccano in particolare quelle di comunicare:
• Identità e missione del sito
• Gerarchia del sito
• Ricerca
• Elementi di richiamo
• Promo di contenuti
• Promo di funzionalità
• Contenuti temporanei
• Pubblicità (attività di marketing e vendita condotte dal sito)
• Scorciatoie
• Registrazione / Login…
Dal momento che la quantità di spazio della home page è relativamente ridotta, in particolare quella “sopra
la piega”, è necessario concentrarsi sull’essenziale.
Secondo Krug, in primo luogo la home page deve comunicare identità e missione del sito (rispondere alla
domanda “che cos’è?”). Tre i punti in cui comunicare il messaggio del sito:
• Tagline. A destra o sotto l’ID o logo del sito. Deve essere chiara e informativa, composta da 6-8 parole,
trasmettere differenziazione e un chiaro vantaggio (devono cioè essere la value proposition
dell’azienda)
• Welcome blurb. Descrizione concisa del sito in alto a sinistra o al centro dello spazio dedicato ai
contenuti
• Per saperne di più. Krug consiglia un breve video esplicativo, anziché un ulteriore testo.
In secondo luogo la home page deve rispondere alla domanda “che cosa posso fare?”. Vanno resi ovvi i
punti di partenza per: eseguire ricerche, navigare, accedere alle sezioni più importanti (scorciatoie).
Test di usabilità fai da te
Krug insiste sul fatto che un sito è frutto non solo di un’attenta progettazione incentrata sui bisogno
dell’utente, ma anche di cicli di test di usabilità, che servono per guardare le persone utilizzare
effettivamente il sito. Ecco alcuni consigli di Krug:
• Eseguire test, magari sui siti della concorrenza, fin dall’avvio del progetto
• Testare il sito una volta al mese anche solo con 3 utenti. La selezione degli utenti non è cruciale, perché
qualsiasi utente incontrerà i problemi di usabilità più gravi
• Per eseguire i test sono sufficienti: due stanze (una per il partecipante e il facilitatore, l’altra per gli
osservatori), computer con software di condivisione / registrazione dello schermo, definizione dei
compiti da testare
• Ogni osservatore ha il compito di annotare i 3 principali problemi che nota. Nell’esperienza di Krug i
problemi più diffusi sono: agli utenti non è chiaro lo scopo del sito; non trovano le parole / espressioni
6
Don’t Make Me Think. Un approccio di buon senso all’usabilità web e mobile – Gennaio 2015

7. Kea s.r.l. | Via Strà, 102 | 37042 Caldiero (VR)
Tel. / Fax: +39 045 6152381
Web: www.keanet.it | E-mail: info@keanet.it
che cercano; sovraffollamento delle pagine. I problemi “kayak” possono essere invece ignorati secondo
Krug, se l’utente al secondo tentativo e senza particolare frustrazione riesce a trovare ciò che sta
cercando
• Al termine del test è necessario annotare i dieci problemi più gravi e decidere quali correggere prima
della prossima sessione di test.
Mobile
Dal momento che sui dispositivi mobili non c’è cursore e né rollover, è particolarmente importante
l’affordance (con “affordance” si definisce la qualità fisica di un oggetto che suggerisce a un essere umano
le azioni appropriate per manipolarlo.) di bottoni e link: è necessario attraverso dimensioni, posizione e
formattazione rendere chiara la funzione degli elementi.
Accessibilità di base
A prescindere dal fatto che un sito usabile è di per sé un sito più accessibile, Krug dà alcuni consigli per
ottenere un’accessibilità di base del sito:
• Aggiungere un testo alternativo adeguato all’immagine, lasciando vuoto l’attributo ALT nelle immagini
che gli screen reader devono saltare
• Usare correttamente, cioè in sequenza logica, i vari livelli di titolo
• Utilizzare l’elemento HTML LABEL per associare i campi delle form alle rispettive etichette
• Aggiungere all’inizio di ogni pagina il link “Vai al contenuto principale della pagina”, perché l’utente
possa saltare la lettura tramite lo screen reader della navigazione globale
• Rendere i contenuti accessibili tramite tastiera
• Creare un contrasto significativo fra testo e sfondo. Non usare caratteri troppo piccoli e rendere il sito
zoomabile
• Usare un modello accessibile per il proprio CMS web.
Autore: Petra Dal Santo (dalsanto@keanet.it)
www.keanet.it
http://blog.keanet.it/
7
Don’t Make Me Think. Un approccio di buon senso all’usabilità web e mobile – Gennaio 2015