UsabilitĂ , comunicazione tecnica ed Help Online (HoL)

postato da Petra Dal Santo - KEA s.r.l. [13/01/2015 07:16]
foto

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

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.

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 (h3 - 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.

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.

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 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.