Usabilità siti web e interaction design

Usabilità siti web

L’usabilità web rappresenta il grado di facilità d’uso di un sito internet da parte dell’utente finale, cioè la sua capacità di essere user friendly. Attingendo dalla definizione di usabilità contenuta nella norma ISO 9241-210:2010 è possibile derivare le principali caratteristiche di un sito web usabile:

• efficacia: consente di svolgere specifici compiti in modo completo e preciso;
• efficienza: permette di raggiungere lo scopo con il minimo sforzo e un ridotto impiego di risorse;
• soddisfazione: fornisce un’esperienza d’uso piacevole e positiva.

Rispettare i principi di usabilità è basilare nella progettazione delle interfacce web perché pongono al centro la relazione tra le persone e la tecnologia: partendo dall’analisi dei bisogni e dei comportamenti dell’utente, si studiano le modalità di interazione più idonee a soddisfare le esigenze individuate, in rapporto all’ambiente d’uso.

Per comprendere meglio questo legame, è possibile consultare le 10 euristiche di usabilità per l’interfaccia utente di Jakob Nielsen, il padre dell’usabilità del Web, in cui sono raccolti i principi generali di interaction design da applicare sia per progettare l’interazione sia per eseguire i test di usabilità delle interfacce. Si tratta di linee guida utili per realizzare siti internet di qualità, in cui l’ergonomia cognitiva abbraccia la semplicità d’utilizzo e il benessere delle persone.

Interaction design

L’usabilità dei siti web si consegue concentrando l’attenzione sul modo in cui le persone interagiscono con le tecnologie della Rete, per far sì che i prodotti realizzati – siti internet, e-commerce, app, ecc. – soddisfino realmente le loro necessità, risultando comprensibili, gradevoli e facili da usare.

È questo l’obiettivo del design dell’interazione: progettare e realizzare interfacce chiare, semplici ed efficaci, basandosi su principi psicologici, tecnici ed estetici per migliorare la comprensione di ciò che si può fare, ciò che succede e ciò che è appena successo durante l’interazione.

Utilizzando i criteri di interaction design si ottengono interfacce web usabili che, oltre a consentire l’utilizzo proficuo della tecnologia, mantengono alto il livello qualitativo dell’esperienza complessiva.

Fra le caratteristiche di una buona progettazione, due assumono particolare rilievo: la visibilità e la comprensibilità dei controlli disponibili. Sono soprattutto queste proprietà che rendono un sito usabile perché consentono di capire cosa fa, come funziona, quali azioni sono possibili e come eseguirle. La loro importanza è determinante specialmente nei sistemi complessi, dove sono presenti molti comandi e funzioni, come ad esempio i siti e-commerce.

L’interaction design studia in che modo migliorare la visibilità e la comprensibilità nelle interfacce utente e lo fa tramite la corretta applicazione di alcuni concetti che lo psicologo e ingegnere statunitense Donald Norman ha definito principi fondamentali dell’interazione: affordance, significanti, vincoli, mapping e feedback.

Vediamoli in dettaglio, riferendoli alla progettazione e all’analisi e valutazione dell’usabilità di un sito web.

Principi fondamentali dell’interazione

Affordance

Il termine affordance, introdotto nel 1979 dallo psicologo americano James Gibson, può essere tradotto con “invito all’uso” e indica la relazione fra un oggetto fisico e una persona (agente), cioè la relazione fra le proprietà dell’oggetto e la capacità dell’agente di determinare in che modo l’oggetto potrebbe essere usato.

Facciamo un po’ di chiarezza con alcuni semplici esempi.

Un pulsante all’interno del sito (oggetto) permette all’utente (agente) di attivare una certa funzionalità; in questo caso, l’affordance è rappresentata dalla capacità del pulsante di essere premuto e dell’utente di capire che per usarlo deve servirsi del mouse, da desktop, o del dito, se il dispositivo è touchscreen.

In un’interfaccia che consente il drag-and-drop, l’affordance è data dalla possibilità di trascinare e rilasciare un oggetto, connessa alla capacità dell’utente di farlo tenendo premuto il tasto sinistro del mouse sull’oggetto, muovendo il mouse e rilasciando poi il tasto.

La presenza di un’affordance, quindi, dipende congiuntamente dalle qualità dell’oggetto e dalle abilità dell’agente che vi interagisce. La cosa importante da comprendere è che l’affordance non è una proprietà dell’oggetto o dell’agente, ma una relazione che li lega entrambi.

Per essere efficaci, le affordance devono essere percepibili; solo in questo modo possono fornire indizi su come funzionano i controlli di un’interfaccia e suggerire quali azioni è possibile eseguire. Da questo aspetto, centrale nell’interaction design, dipende in buona misura l’usabilità dei siti web.

Significanti

La componente segnaletica di un’affordance si chiama significante. Se le affordance determinano quali azioni sono possibili, i significanti comunicano dove va eseguita l’azione. All’interno di un sito usabile sono necessarie entrambe le cose.

In assenza dei significanti è praticamente impossibile capire come utilizzare un’interfaccia. il compito dei designer è proprio quello di predisporre gli indizi che permetteranno agli utenti di interagire, comunicando in modo efficace lo scopo, la struttura e il funzionamento del sistema a coloro che lo useranno.

Vediamo qualche esempio.

All’interno del testo di un sito web, la presenza di una parola sottolineata suggerisce che si tratta di un collegamento ipertestuale; in questo caso, la sottolineatura è il significante che indica la possibilità di premere sul link (affordance).

In un sito e-commerce, i numeri che costituiscono la paginazione in una pagina di categoria sono significanti che rivelano la possibilità di scorrere l’elenco dei prodotti.

In generale, tutte le icone, le frecce e i pulsanti presenti in un’interfaccia costituiscono dei significanti per le rispettive operazioni associate.

I significanti segnalano cose, in particolare quali azioni sono possibili e come eseguirle; per questo devono essere percepibili, altrimenti non funzionano. Assieme alle affordance, sono indici molto importanti del buon design e dell’usabilità di un sito web.

Vincoli

I vincoli sono condizioni che limitano l’insieme delle azioni possibili. L’uso intelligente dei vincoli in sede di design permette alle persone di decidere prontamente il giusto corso d’azione, anche in una situazione del tutto nuova.

Le funzioni obbliganti sono una forma di vincolo: si tratta di quelle situazioni in cui le azioni sono vincolate in modo che un passaggio mancato impedisca di procedere al successivo. Un esempio è dato dalla sequenza di passi per completare la procedura d’acquisto in un sito e-commerce – che normalmente prevede l’autenticazione, l’inserimento degli indirizzi di spedizione e fatturazione, la selezione del corriere e la scelta del metodo di pagamento – in cui non è possibile passare alla pagina successiva senza aver completato il passaggio corrente.

Un altro esempio di vincolo sono i sistemi lock-in, che mantengono attiva una funzione impedendo che qualcuno la interrompa prematuramente. È il caso delle finestre pop-up che richiedono la conferma prima di eseguire una certa azione, come abbandonare la pagina senza aver salvato lo stato attuale.

I vincoli contribuiscono all’usabilità dei siti internet perché servono per impedire comportamenti indesiderati da parte dell’utente.

Mapping

Il mapping mette in relazione la disposizione dei comandi con gli oggetti comandati, rendendo più semplice capire come utilizzarli e lasciando intuire l’esito delle possibili azioni da compiere.

Ad esempio, in uno slideshow di immagini, la presenza delle frecce a destra e a sinistra aiuta a comprendere il senso di scorrimento e il punto in cui compariranno gli elementi.

Feedback

Il feedback è un modo per far sapere all’utente che la sua richiesta è in fase di elaborazione e per comunicare i risultati di un’azione. È uno degli elementi più rilevanti se parliamo di usabilità siti web e interaction design perché mantiene vivo il dialogo tra l’utente e il sistema.

Un buon feedback deve essere:

• immediato: la risposta deve giungere nel più breve tempo possibile, altrimenti si rischia l’abbandono dell’operazione in corso;
• informativo: deve chiarire esattamente cosa sta succedendo o cosa è successo; se l’informazione è inutile, incompleta o incomprensibile, diventa una distrazione e fonte di irritazione;
• programmato: tutte le azioni hanno bisogno di una conferma, che non sia però troppo invadente; ci deve essere anche una scala di priorità, tale che l’informazione meno importante venga presentata in maniera poco evidente, mentre i segnali che contano devono catturare l’attenzione.

Esempi di feedback sono: il loader che dà segno che l’elaborazione è in corso, la barra di progressione che mostra lo stato di avanzamento del processo, il messaggio che conferma l’aggiunta del prodotto al carrello, la “thank you page” che avverte che l’ordine è andato a buon fine.

Conclusioni

Osservare i principi fondamentali dell’interazione è essenziale nella progettazione e nella realizzazione di siti web usabili. Sono strumenti potenti, capaci di guidare opportunamente le azioni dell’utente e di determinare il tono del ricordo dell’esperienza vissuta.

Come sempre, unire le best practice del design al buon senso è il modo migliore per ottenere risultati positivi, in linea con i bisogni delle persone e con la tecnologia a disposizione.